design-verifylisted
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