What problem does it solve? Manually screenshotting every page of a Next.js web UI at multiple viewport sizes is slow and error-prone, and teams often lose track of which routes were captured and whether they succeeded. This Skill automates Playwright E2E capture so every route produces screenshots, per-page request JSON, and an auditable capture index written immediately to disk. ## Core Features & Use Cases - Automated Route Discovery: Derives concrete routes from Next.js App Router page.tsx files, skipping route groups and dynamic segments that cannot be captured without fixture data. - Multi-Viewport Screenshots: Captures desktop (1440px), tablet (768px), and mobile (375px) screenshots per route into ux_ui_map/screenshots/. - Immediate Artifact Write-Out: Writes per-page request JSON and appends a JSONL line to capture-index.jsonl for every route, including failure states with ok:false. - Use Case: When updating the EdgeQuake WebUI, run the capture spec to regenerate a complete visual map of all pages at three breakpoints, then review the capture index to spot 404s or auth-blocked routes. ## Quick Start Ask the AI to run the Playwright UX/UI capture for the EdgeQuake WebUI routes and write screenshots plus the capture index to the ux_ui_map directory.
