| name | ae-ltd-visual-regression-forge |
| description | Use when UI changes must be proven safe across breakpoints using baseline and diff workflows. AE.LTD visual quality gate for release confidence. |
AE.LTD Visual Regression Forge
What This Skill Does
Proves UI changes are safe across breakpoints using baseline and diff workflows. Visual quality gate for release confidence. Niche gem source: visual-regression plugin from awesome-claude-code-toolkit.
- Define snapshot scope (pages, viewports)
- Capture clean baselines with network idle
- Run pixel diffs against threshold
- Convert failures into actionable fixes
Quick Start
User: "Did my CSS change break anything?"
→ Define scope → Capture baseline → Run diff → Report pass/fail
Workflow
-
Define snapshot scope.
Pick critical pages/components and three base viewports: mobile, tablet, desktop.
-
Capture clean baselines.
Wait for network idle and mask dynamic regions.
-
Capture current state with matching settings.
Use identical viewport/device/browser settings for comparability.
-
Run diff and classify.
Compute pixel deltas and mark pass/warn/fail against threshold.
-
Convert failures into actionable fixes.
Map each diff to CSS/layout/asset causes and patch.
Guardrails
- Do not auto-update baselines without explicit intent.
- Keep dynamic content excluded to reduce false positives.
- Report diff percentages with file names and viewport labels.
- Store baselines and diffs in deterministic folder names.
