agent-browser-verify

name	agent-browser-verify
description	Automated browser verification for dev servers. Triggers when a dev server starts to run a visual gut-check with agent-browser — verifies the page loads, checks for console errors, validates key UI elements, and reports pass/fail before continuing.
metadata	{"priority":2,"docs":["https://docs.anthropic.com/en/docs/claude-code/sub-agents"],"pathPatterns":[],"bashPatterns":["\\bnext\\s+dev\\b","\\bnpm\\s+run\\s+dev\\b","\\bpnpm\\s+dev\\b","\\bbun\\s+run\\s+dev\\b","\\byarn\\s+dev\\b","\\bvite\\s*(dev)?\\b","\\bnuxt\\s+dev\\b","\\bvercel\\s+dev\\b"],"promptSignals":{"phrases":["check the page","check the browser","check the site","is the page working","is it loading","blank page","white screen","nothing showing","page is broken","screenshot the page","take a screenshot","check for errors","console errors","browser errors","page is stuck","page is hanging","page not loading","page frozen","spinner not stopping","page not responding","page won't load","page will not load","nothing renders","nothing rendered","ui is broken","screen is blank","screen is white","app won't load"],"allOf":["[Truncated]","[Truncated]","[Truncated]","[Truncated]","[Truncated]","[Truncated]","[Truncated]","[Truncated]","[Truncated]","[Truncated]","[Truncated]","[Truncated]","[Truncated]"],"anyOf":["page","browser","screen","rendering","visual","spinner","loading"],"minScore":6}}
retrieval	{"aliases":["browser verify","dev server check","visual check","page verification"],"intents":["verify dev server","check page loads","find console errors","validate UI"],"entities":["dev server","console errors","visual check","gut-check"]}
chainTo	[{"pattern":"console\\.(error|warn)\\s*\\(|Error:|TypeError:|ReferenceError:","targetSkill":"investigation-mode","message":"Console errors detected during browser verification — loading investigation mode to debug root cause with structured error analysis."},{"pattern":"localhost:\\d+|127\\.0\\.0\\.1:\\d+|http://0\\.0\\.0\\.0:\\d+","targetSkill":"agent-browser","message":"Dev server URL detected — loading browser automation skill for deeper interactive testing beyond the initial gut-check."}]

Dev Server Verification with agent-browser

You MUST verify the dev server with agent-browser after starting it. Do not assume the page works just because the dev server process started. Many issues (blank pages, hydration errors, missing env vars, broken imports) are only visible in the browser. Run this verification before continuing with any other work:

Quick Verification Flow

# 1. Open the dev server
agent-browser open http://localhost:3000
agent-browser wait --load networkidle

# 2. Screenshot for visual check
agent-browser screenshot --annotate

# 3. Check for errors
agent-browser eval 'JSON.stringify(window.__consoleErrors || [])'

# 4. Snapshot interactive elements
agent-browser snapshot -i

Verification Checklist

Run each check and report results:

1. Page loads — agent-browser open succeeds without timeout
2. No blank page — snapshot shows meaningful content (not empty body)
3. No error overlay — no Next.js/Vite error overlay detected
4. Console errors — evaluate document.querySelectorAll('[data-nextjs-dialog]') for error modals
5. Key elements render — snapshot -i shows expected interactive elements
6. Navigation works — if multiple routes exist, verify at least the home route

Error Detection

# Check for framework error overlays
agent-browser eval 'document.querySelector("[data-nextjs-dialog], .vite-error-overlay, #webpack-dev-server-client-overlay") ? "ERROR_OVERLAY" : "OK"'

# Check page isn't blank
agent-browser eval 'document.body.innerText.trim().length > 0 ? "HAS_CONTENT" : "BLANK"'

On Failure

If verification fails:

1. Screenshot the error state: agent-browser screenshot error-state.png
2. Capture the error overlay text or console output
3. Close the browser: agent-browser close
4. Fix the issue in code