design-measurelisted

# Design measure A screenshot is a symptom. The diagnosis is a measurement, and the fix is whatever the measurement says; eyeballing a picture and guessing a utility costs a round trip per guess. `docs/shot-probe-sheet.md` has the commands. ## Read first The page's section component and its module (`src/components/<page>/`), and `STANDARD.md` §8 first — the thing that "looks broken" may be a decision. ## Steps 1. **Name the element** from the claim: the section by its heading (`--heading "<words from the screenshot>"`), the element by a selector (`--select`), and the width the owner was looking at (a phone screenshot is 390 or 393 wide; a desktop one 1440 or 1920). 2. **Measure it**: ```bash pnpm kit probe /<page> --heading "<heading>" --width 390 # box, computed styles, stacking, pending reveals pnpm kit probe /<page> --select "<selector>" --all --width 390 # every instance of the class pnpm kit probe /<page> --select "<selector>" --motion --timeline 3000 --every 200 # when it appears, and how far it travels pnpm kit shot /<page> --heading "<heading>" --width 390 --scale 2 # the crop, for the owner and for you ``` Against the dev server while iterating: `--url http://localhost:8000` (use the hostname the dev server allows; a page that does not hydrate measures un-hydrated markup). 3. **Read the numbers against the claim**: - "Unaligned" / "a gap": the boxes of the element and its neighbour, in `pageBox