← ClaudeAtlas

visual-verifylisted

Proves a UI change works by driving it in a real browser — starts the dev server, reaches each state from the spec, screenshots it, and reads console and network for errors the DOM does not show. Run it after any user-visible change and before handover.
AlpayC/claude-skill-set · ★ 0 · AI & Automation · score 60
Install: claude install-skill AlpayC/claude-skill-set
# Visual verify A passing unit test proves a function returns what it was told to return. It does not prove the page renders, that the button is reachable, that the request fires, or that the console is not full of errors. For frontend work, this gap is where unattended runs quietly fail. Closing it requires actually looking. Invoke the `claude-in-chrome` skill for the browser tooling, then work through the states. ## 1 — Get the app running From `docs/agent/repo-map.md`: the dev server command, its port, and the route base for the feature. Start it in the background and wait for it to be genuinely ready — the port accepting connections is not the same as the bundle being served. Watch the server output for the ready line. Handle the preconditions the app needs before the feature is reachable at all: authentication, a mock backend, seeded data, a feature flag. These are recorded in the app's `CLAUDE.md`; when they are not, discovering them is a finding to write back there so the next run does not rediscover it. When the server cannot be started, that is a stop condition, not a reason to skip the gate. Report it — an unverified UI change reported as unverified is fine; one reported as working is not. ## 2 — Walk the states The spec's acceptance criteria and `ui-spec`'s state matrix are the checklist. Reach each state and screenshot it into `.agent/evidence/<id>/`, named for the state: `orders-empty.png`, `orders-error-403.png`, `orders-loading.png`. Reaching the unha