browser-testlisted

# Browser Test v3.0 Visual verification using Chrome DevTools MCP and Playwright. ## Quick Start ```bash /browser-test http://localhost:3000 /browser-test http://localhost:3000 --a11y /browser-test http://localhost:3000 --perf ``` ## Workflow ### 1. Start Dev Server (if needed) ```bash # Auto-detect package manager and start npm run dev & # or yarn dev, bun dev # Wait for server to be ready ``` ### 2. Navigate and Screenshot Using Playwright MCP or Chrome DevTools: - Navigate to URL - Take full-page screenshot - Save to `.claude/quality-results/screenshots/` ### 3. Console Errors Check - Capture all console messages (errors, warnings) - Flag any errors as BLOCKING - Flag warnings as ADVISORY ### 4. Lighthouse Audit Run via Chrome DevTools MCP: - Performance score (target: > 90) - Accessibility score (target: > 90) - Best Practices score (target: > 90) - SEO score (target: > 90) ### 5. Network Check - Verify no failed requests (4xx, 5xx) - Check for oversized assets (> 500KB) - Verify no mixed content (HTTP on HTTPS) ## Output Format ``` Browser Test Report — http://localhost:3000 ============================================= Screenshot: .claude/quality-results/screenshots/2026-04-04-home.png Console: 0 errors, 2 warnings Lighthouse: Perf 94 | A11y 98 | BP 100 | SEO 92 Network: 23 requests, 0 failed, largest: 145KB --------------------------------------------- RESULT: PASS (0 blocking, 2 advisory) ``` ## Integration Points | Skill | How | |---|---| | /gates