testland/visual-diff-summarizer
Builds a per-PR visual-diff summary that clusters intentional vs incidental changes across snapshots emitted by Percy, Chromatic, Playwright `toHaveScreenshot`, Storybook test-runner, and other visual testing tools - groups diffs by component / route, separates "intent-aligned with PR scope" from "cascade / regression suspect", surfaces baseline-update recommendations, and emits a single PR comment that points the reviewer at the screenshots that need actual eyes. Use when a PR has 20+ visual diffs and the reviewer needs help triaging which ones to actually open.
74
93%
Does it follow best practices?
Run evals on this skill
Adds up to 20 points to the overall score
View guide
Low
Low-risk findings worth noting
report-format.mdreferences/
Visual-diff summary report format
The sticky PR comment emitted by SKILL.md Step 5. Clusters are grouped
aligned → adjacent → unrelated, sorted by max diff ratio within each group.
## Visual diff summary - `<sha>`
**Total snapshots:** 87 (12 changed, 75 unchanged)
**Verdict:** REVIEW (1 unrelated cluster suspects regression)
### ✅ Aligned with PR intent (3 clusters, 7 diffs)
The PR title says **"Refactor Button to use new design tokens"** - these clusters match.
| Cluster | Diffs | Max diff% | Recommendation |
|---------|------:|----------:|----------------|
| Button | 4 | 8.2% | Update baselines (accept new snapshots) |
| ButtonGroup | 2 | 3.1% | Update baselines |
| IconButton | 1 | 1.5% | Update baseline |
### ⚠ Adjacent (1 cluster, 3 diffs) - confirm intent
| Cluster | Diffs | Max diff% | Recommendation |
|---------|------:|----------:|----------------|
| Modal | 3 | 2.8% | Modal contains Button; check that the Button color change inside Modal is intended (it should be - but eyeball one). |
### ❌ Unrelated (1 cluster, 2 diffs) - DO NOT update without investigation
| Cluster | Diffs | Max diff% | Recommendation |
|---------|------:|----------:|----------------|
| Footer | 2 | 12.0% | The Footer component isn't mentioned in the PR. Suspected unintended cascade. Open the diffs and run a regression bisect if no obvious cause. |The report ends with a Quick actions block that auto-approves only the aligned cluster - adjacent and unrelated clusters are left for manual review:
# Update aligned baselines after eyeballing 1 sample per cluster:
chromatic --auto-accept-changes --only-changed --components Button,ButtonGroup,IconButton
# OR for Percy:
percy approve <build-id> --snapshots Button,ButtonGroup,IconButton
# Refused - Footer cluster needs investigation; do NOT auto-approve.