← ClaudeAtlas

agent-browser-verifylisted

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.
build-with-dhiraj/ai-workflow-framework-portability-kit · ★ 2 · AI & Automation · score 81
Install: claude install-skill build-with-dhiraj/ai-workflow-framework-portability-kit
# 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 ```bash # 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 ```bash # 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