Detecting Visual Regressions

This skill performs semantic visual comparison — understanding what UI elements mean and how they relate to each other — instead of brittle pixel-by-pixel diffing. It catches real regressions while maintaining a false positive rate below 2%.

When to Use

• After CSS/layout changes to verify nothing else broke
• When comparing current UI against Figma design specs
• For design system audits (are components consistent?)
• As part of CI/CD visual regression gates
• When migrating UI frameworks or component libraries

Comparison Workflow

Step 1 — Capture Screenshots

Use the capture script to take consistent, comparable screenshots: