design-critique

Design critique — a rendered, bounded review loop

Code review cannot see a page. This skill reviews what the browser actually drew: screenshots and a deterministic detector first, judgment against a written rubric second, and a fix loop that stops after one re-check.

Two modes. Audit: report only, change nothing. Fix: the same review, then step 6. The caller says which; when unsaid, it is audit.

1. Evidence first

Evidence already captured. When the caller says the evidence is already in <dir> with a design-detect exit code N (the design-audit command does, after its sequential capture), do not run the script: <dir> is <outdir> and N is the exit code read below — N = 2 still means unknown. Otherwise:

~/.claude/scripts/design-detect.sh <url|file> <outdir>

The script is the source of truth for its widths and the detector version — do not restate them. Exit 0 = captured, no detector hit; 1 = captured, hits; 2 = unknown (capture failed, blank or error page, detector crashed). On 2, write unknown and the script's stderr (the caller's saved stderr file, when the evidence was already captured) as the whole report, and stop: a page that was not captured is never "clean".

In <outdir>, for each width and scheme the script captured: shots/<width>-<scheme>-fold.png (first screen) and shots/<width>-<scheme>.png (full page); then shots/1440-light-focus.png (keyboard focus), one detect-<width>.json per detect width, capture.json (including the HTTP status and hasDarkScheme) and console.json (console errors and uncaught page errors during the load). A local file target yields one detect file — say so; do not invent the other widths.

2. Context — what the project sanctions

Read the project's root DESIGN.md, and the design section or design entries of its CLAUDE.md, and every design document either of them names — the hub's CLAUDE.md points to design-and-themes.md (in its wrp-architecture skill) for the rules its identity still obeys. List what they sanction, mapped to detector ids, before looking at any finding. Reference case: the hub (~/Dev/{portfolio-site}) documents its ground in the CLAUDE.md entry "Deliberate identity: the paper palette", so cream-palette is sanctioned there — and per design-tells A0, the companions it did not ask for (italic accent word, terracotta, numbered eyebrows) are still findings.