visual-regression-validator

Visual regression testing compares current UI screenshots against baseline images to automatically detect unintended changes. This Skill captures screenshots across viewports and themes, generates pixel-perfect diffs, and flags deviations using threshold-based rules to catch design drift early.

Yes. This Skill captures and compares screenshots for mobile, tablet, and desktop viewports alongside light and dark theme variants, ensuring visual consistency across all user-facing surfaces in a single validation pass.

This Skill integrates with E2E_VALIDATOR_V1, letting you embed visual regression checks directly into end-to-end tests. After Playwright captures screenshots during test execution, the Skill compares them to baselines and reports pass/fail status alongside functional results.

The Skill maintains baseline screenshots as reference images. During validation runs, it captures current screenshots, generates diffs highlighting pixel-level changes, and applies threshold rules to determine pass/fail. Review workflows let you approve updates to baselines when intentional changes occur.

Playwright is the underlying screenshot capture mechanism for this Skill. It handles cross-browser and multi-viewport automation, making it the required foundation for capturing consistent, pixel-accurate images across your UI surface.

Visual regression testing catches unintended pixel-level changes automatically on every build, making it ideal for design-system updates, component refactoring, and continuous deployment. Manual review complements this by validating intentional design changes and user experience improvements.