← ClaudeAtlas

visual-regressionlisted

Work with the Ladle visual-regression check — read a failing `visual` CI run, decide whether a pixel diff is a regression or an intended redesign, and adopt CI-produced baselines into the PR. Use when the `visual` workflow fails, when a PR needs updated component snapshots, when adding or changing a `*.stories.tsx` file, or when someone asks to update/refresh/accept UI snapshots.
ahilles107/gravity · ★ 15 · AI & Automation · score 76
Install: claude install-skill ahilles107/gravity
# Visual regression for Ladle stories The `visual` workflow screenshots every Ladle story and compares it byte for byte against a committed baseline in `apps/desktop/tests/visual/__screenshots__/`. One PNG per story id. ## The rule that governs everything here **Adopt baselines from the pinned CI environment.** They are only reproducible inside the pinned Playwright container that CI uses (`mcr.microsoft.com/playwright` — the tag lives in `scripts/vr-ci.sh`). A macOS or bare-Linux checkout renders different glyphs and antialiasing, so a locally produced PNG is guaranteed to fail on the next push while looking correct in the diff. `playwright.config.ts` enforces this: `--update-snapshots` throws unless `CI=true`, and `updateSnapshots: "none"` makes a missing baseline a hard failure rather than a silent write. Do not work around either guard. ## Adopting new baselines Before adopting, verify the repository, branch and exact run commit. Inspect `git status --short -- apps/desktop/tests/visual/__screenshots__` for existing edits and untracked files. Do not overwrite them. The acceptance script replaces the entire directory: identify that target, preserve local work, and obtain approval for replacement if it is not already authorized. When `visual` fails, the job regenerates the complete baseline set inside the container and uploads it as the `visual-snapshots` artifact. Adopt it with: ```bash scripts/vr-accept.sh # newest `visual` run for the current branch scr