← ClaudeAtlas

design-verifylisted

Measure an implemented screen against its design export with a headless pixel diff and report the regions, the number and the side-by-side image. NOT for choosing what to build (that's design-implement), NOT for resolving the design input (that's design-acquire), and NOT for behavioural UI checks without a reference design (that's browser-verification in core).
atretyak1985/swarmery · ★ 4 · Web & Frontend · score 76
Install: claude install-skill atretyak1985/swarmery
# Purpose Phase 6 of `design-implement`, and the only place the measurement procedure is written down. Mechanical on purpose: six steps, run in order, every one of them producing something the operator can see. # 1. Get a live target Check that the app answers on `design.devUrl`. If it does not, start `design.devCommand` in the background, wait until the URL answers, and **record that this process has to be stopped** when verification finishes — a dev server left running outlives the task and confuses the next one. Never point verification at a production origin. The target is the local dev URL from `design.devUrl` plus the route under test. # 2. Run the diff `$SCRIPTS_DIR` is the one resolved in `design-implement` Step 0.3 (`${CLAUDE_PLUGIN_ROOT}/scripts` inside the pack, the skill's own `scripts/` directory inside a standalone bundle). ```bash node "$SCRIPTS_DIR/screenshot-diff.mjs" \ --design <design path> \ --url <design.devUrl + route> \ --viewport <authoring viewport> \ --threshold <design.diff.threshold> \ --pixel-tolerance <design.diff.pixelTolerance> \ --out .design-verify/report/<slug> ``` The viewport is the authoring breakpoint carried over from Phase 2, not a convenient one. Add `--full-page` when the screen is taller than the viewport and the part below the fold is in scope. Exit codes: `0` ok, `1` bad arguments or unreadable input, `2` runtime failure (the render failed, or the URL was unreachable — check step 1 before blaming the diff), `3