qa-verify

QA & verification

Two layers. The script decides what is decidable; you decide the rest. Never report "done" on the script alone — it cannot see a design.

Browser checks below use tools/qa/ against a running yarn build && yarn start (yarn qa:setup once; every tool takes --url; see tools/qa/README.md). Probes need a person's UA — the default puppeteer UA gets the robot form, which has no motion, no cursor and no scene, and "proves" a bug gone that a person still sees. Look at every screenshot a tool writes (Read the image) — numbers flag, the eye decides.

Layer 1 — mechanical (always run first)

.claude/scripts/verify.sh          # whole src/
.claude/scripts/verify.sh src/views/about.tsx   # scoped
yarn lint
yarn build                          # must pass before anything ships

Every FAIL must be fixed. WARNs are judgement calls: fix or justify in your summary, do not silently ignore them.

Layer 2 — judgement checks

Work section by section. For each one:

Design fidelity (only when a design exists)

Re-fetch the Figma node — do not QA from memory or from your own earlier summary. get_design_context for values, get_screenshot for layout. Then compare:

• Copy — character for character. Flag anything paraphrased, shortened or invented.
• Layout — column count, flex direction, alignment, order, positioning.
• Spacing — margins, padding, gaps against the design values.
• Typography — size, weight, line-height, letter-spacing. Never assume a heading is bold; designs often use 400.
• Colour — exact values, resolved through tokens rather than matched by eye.
• Images — aspect ratio, crop, radius, overlap. No effects the design lacks.

If an image looks invisible or wrong, check the container first — an invented wrapper background is the usual cause, not the asset itself.

Tokens

• Every colour/spacing/radius/type value resolves to a token.
• New tokens follow the three-tier grammar and carry a comment naming their origin.
• No literal reached @theme inline or a Tier 2 token.
• The cookie banner and preferences modal match the site: --consent-* tokens point at the project's palette (not the neutral defaults once a brand exists), the type and buttons look like the site's, contrast passes light and dark, and the banner copy is still the two short lines — see obsidian/frontend/components/common.md → "Brand the consent UI".
• A value that had to be invented because the design has no token for it is flagged to the user for design review, not quietly added.