← ClaudeAtlas

design-prooflisted

Prove a change on the site's pixels with the screenshot harness - a baseline of the commit it starts from, a capture after, a compare read as a report - so a refactor shows it moved nothing and a design change shows it moved only what it meant to. Use before any merge that touches src/, styles or images, when asked to prove, verify, check parity or "make sure nothing else changed", and after a `SIZE`, `CHANGED` or `reflow` line needs reading.
HKamkar/agentic-cms · ★ 2 · Web & Frontend · score 71
Install: claude install-skill HKamkar/agentic-cms
# Design proof The harness is `agentic-cms visual-parity` (`docs/visual-parity.md` of the kit — the modes, the file names, the waits, the traps — and `docs/commands.md` for the flags). A proof is two captures and one compare; the compare's report says what moved, where, and whether the rest of the page survived. ## Read first `docs/visual-parity.md` § Reading a compare; the change's diff (`git diff develop --stat`) to know which pages and sections it can touch; whether anything animates (`grep -rl "agentic-cms/ix" src/components`), which decides whether `--motion` is part of the proof. ## Steps 1. **The baseline**, from the exact commit the change starts from, never from a checkout that moved on: ```bash pnpm kit visual-parity capture before --ref develop # or the branch's base commit; its demo routes are left out ``` (A served build standing in for a commit — `--url` — has its `git log -1` printed first.) With reveals in use, also `--motion`; with hover, focus, checked or open states touched, also `--states`; with a dark theme, `--scheme dark`. A long run goes in the background; the capture is finished when `.parity/visual/<label>/capture.json` exists. 2. **The change**, built exactly as it will be committed (`pnpm build`; nothing edited after it), then: ```bash pnpm kit visual-parity capture after pnpm kit visual-parity compare before after --json ``` `--pages /a,/b` on both while iterating on one page; the fu