← ClaudeAtlas

visual-regressionlisted

Catch unintended visual change — what to snapshot, how to make snapshots deterministic, how to review a diff, and why the highest-value finding is on a surface the feature never touched. Load when a render harness exists and a change touches shared UI.
soumit-kaz/lazysitter · ★ 1 · Code & Development · score 69
Install: claude install-skill soumit-kaz/lazysitter
# Visual regression ## The finding worth the whole setup A unit test proves a component does what its test says. **Visual regression proves the forty other places that render it still look right.** A padding change in a shared `Button` ripples into every page in the app, and no per-feature review looks at pages the feature did not open. ```bash lazysitter fe-index impact src/ui/Button.tsx ``` gives you exactly which surfaces to check. **Go and look at those**, not only at the feature's own screens. That is where the unintended diffs are, and finding one is worth more than every intended diff combined. ## What to snapshot **Snapshot:** component states in isolation (each variant, size, and interaction state) · full pages at key breakpoints · **every state in the UI state matrix** — loading, empty, error, long content · themes if the app themes · RTL if it supports it · focus states, which are otherwise invisible in a screenshot. **Do not snapshot:** anything with live data · animations mid-flight · anything containing a timestamp, a random id, or a rotating avatar. These produce diffs on every run and train everyone to click "approve". ## Determinism is the whole game A flaky visual suite is worse than none, because it teaches the team to approve diffs without reading them. Control every source of variation: - **Freeze time** — a fixed clock, so relative timestamps do not move. - **Fixed seed data** — no random ids, no `faker` without a seed. - **Disable animations an