Visual Regression

WHEN: A prototype is iterated more than once, or before declaring a prototype review-ready. This skill snapshots the key screens at the canonical breakpoints, diffs new builds against an approved baseline, and fails the audit if drift is unintended. Default engine is Playwright; managed services (Chromatic, Percy, Applitools) are listed for teams that prefer hosted review queues.

When to Use This Skill

• Iterating a prototype where each change can shift unrelated screens
• Hardening a working SPA prototype that will inform a production build
• Catching CSS regressions from token or theme changes
• Reviewing a PR that touches global styles or shared components

Visual regression complements axe (a11y) and Lighthouse (performance). It does not replace either.

Authoritative Sources