verify-ui

Verify local UI changes in a real browser by exercising flows and inspecting console and network errors.

Updated May 13, 2026
One-click install
npx skills add https://github.com/andrewcodesit/skills --skill verify-ui-andrewcodesit
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: verify-ui
Source: https://github.com/andrewcodesit/skills/tree/main/skills/engineering/verify-ui
Command: npx skills add https://github.com/andrewcodesit/skills --skill verify-ui-andrewcodesit

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Frontend changes often look correct in code but break in the browser, and a quick visual glance misses console errors, failed network requests, and broken interaction states. This Skill runs a real verification pass against a running local app and returns a structured findings report instead of a vague "it renders" claim. ## Core Features & Use Cases - Dev Server Management: Finds the correct run command from repo docs or package.json, reuses an already-running server, and waits until the app is actually reachable. - Real Flow Exercising: Walks the actual user path relevant to the change, covering modals, form validation, navigation, loading states, and edge cases beyond the happy path. - Browser Signal Inspection: Captures console errors, failed network requests, layout breakage, and interaction regressions, plus a mandatory final-state screenshot as evidence. - Use Case: After implementing a new checkout form, ask the agent to verify it locally; it starts the dev server, submits valid and invalid inputs, checks console and network traffic, screenshots the result, and reports a Pass/Fail verdict with findings. ## Quick Start Verify my recent UI changes by starting the dev server, opening the affected page in the browser, exercising the flow, and reporting any console or layout issues.

Frequently Asked Questions about verify-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I verify frontend changes in a real browser with an AI agent?▼

Ask the agent to verify the UI: it finds the run command in your repo, starts or reuses the dev server, opens the target page, exercises the relevant flow, and inspects console and network activity. You receive a verdict report with findings and a final-state screenshot.

How to test a local web page end to end before committing?▼

Run a UI verification pass that walks the actual user path for your change, including form validation, navigation, and loading states. The workflow checks console errors and failed requests, then reports Pass, Pass with issues, Blocked, or Fail.

Does UI verification work without a browser automation tool?▼

No. The workflow requires a browser surface such as chrome-devtools-mcp or another automation tool for navigation, screenshots, console, and network access. Without one, verification is reported as blocked rather than guessed.

What does the UI verification report include?▼

The report contains a verdict, what was verified, findings with severity and file:line references, flows left uncovered, and evidence including a final-state screenshot plus relevant console errors and failed requests.

Why does UI verification report blocked instead of results?▼

Verification is blocked when the dev server fails to start, no browser automation surface is available, or credentials, feature flags, or seed data are missing. The report states the blocking error instead of describing a page that was never opened.