| name | doncheli-visual-test |
| description | Run visual regression tests by comparing UI screenshots against baselines. Activate when user mentions "visual test", "screenshot", "UI regression", "visual diff", "pixel diff", "visual snapshot". |
Don Cheli: Visual Test
Instructions
- Detect the visual testing tool in use: Playwright, Cypress, Percy, Chromatic, Storybook, or custom
- Run the visual test suite and capture screenshots of the current state
- Compare against the stored baseline snapshots
- Report each visual difference:
- Component / page name
- Diff percentage (pixels changed vs. total)
- Category: layout shift, color change, missing element, new element
- Classify severity:
-
5% diff → blocker (likely regression)
- 1-5% diff → warning (review required)
- < 1% diff → info (minor or anti-aliasing)
- For new snapshots (no baseline exists), prompt the user to approve them as the new baseline
- Never auto-approve baselines — always require explicit human confirmation
- Generate a visual diff report with image paths or URLs if available
- Save report to
.dc/visual-test-report-<timestamp>.md
Output Format
## Visual Test Report — 2026-03-28T15:00Z
### Summary
- Compared: 24 snapshots
- Passed: 21
- Diffs: 3 (1 blocker, 2 warnings)
### Blocker 🔴
- CheckoutPage/desktop — 12.3% diff
Category: layout shift — payment form moved 40px down
Baseline: .visual/baselines/checkout-desktop.png
Current: .visual/current/checkout-desktop.png
### Warnings 🟡
- Button/primary — 2.1% diff — color shift (likely theme variable change)
- NavBar/mobile — 1.8% diff — font rendering difference (check font loading)
### New Snapshots (approval required)
- VoiceModal/desktop — no baseline found — run with --approve to set baseline
