What problem does it solve? Front-end changes often ship with bugs that eyeballing one screenshot misses: horizontal overflow on mobile, text colliding with art at certain scroll positions, nav contrast failures over dark sections, WCAG violations, and unintended visual regressions from shared-component edits. This Skill makes those checks mechanical and repeatable instead of relying on manual review. ## Core Features & Use Cases - Automated multi-width sweep: Builds and serves the static site, then drives it through headless Chromium at 390/768/1440px widths, auto-scrolling pinned scenes, checking horizontal overflow, console errors, and running axe-core for WCAG AA violations. - Baseline screenshot regression: Pixel-diffs every route against committed full-page baselines, writes diff images with changed pixels highlighted, and supports blessing intentional redesigns via --update-baselines. - Design fidelity checks: Companion scripts compare a build against a reference design — ground-sequence contact sheets, lateral scroll-motion detection, glyph-width/display-scale fidelity metrics, and a vision-judge loop for clone work. - Use Case: After adding a new hero section to a Next.js marketing site, run the gate before committing to catch a 6px iPhone SE overflow, a contrast failure, and an unintended change to an unrelated page — all in one command. ## Quick Start Run the visual QA gate on my built site by executing bash .claude/skills/visual-qa/run.sh against my project directory and then review the screenshots and report it produces.