ui-review
Installation
SKILL.md
UI review
The render is the evidence. A description, DOM text or source code only supports it. Severity, the 13 criteria and the edge cases are in references/criteria.md. An installed design system's own rules come first and count as agreed criteria.
Steps
- Scope. What the caller names, else the branch's changed screens, else the five top routes.
- Lint. Run the project's own lint on the scoped files. Record the command and exit code.
- Capture each screen at each width (the app's narrowest and widest, 390 and 1280 by default) in the states that matter, one fresh navigation per width. With
build-design-systeminstalled,build-design-system/scripts/capture.mjsdoes this behind a guard that blocks every write and saves each capture's accessibility tree. It needs--writes <file>listing the app's writes, or--no-backend, and writes only to its--outfolder (keep that under.ui-review/). Otherwise use the host's browser tool and save the tree yourself. Run the project's accessibility scanner too when it has one. - Fix the purpose of each screen in one line. Mark it assumed when the caller did not give it.
- Probe the traps each screen has, on a local build only: keyboard path, focus after close, loading and error states, a throttled tab, reduced motion, and a touch width. Each probe gets a measured result or a reason it did not run. Measure press feedback with the Event Timing API (a
PerformanceObserveronevententries, eachdurationunder 100 ms). Do not click anything that writes to shared data. - Walk the criteria at each width. Cite each finding by number and name, or by the installed rule's ID.
- Sort. With more than one reviewer available (a panel), give each the same prompt and no persona, read only. The coordinator then sorts every finding into
blocking,should-fix,noteordismissed, naming who raised it and giving one line of reason. A finding raised by two reviewers on their own is the strongest signal. Dismiss nitpicks, hypotheticals nobody traced to a real call site, and "I would have done it differently". Within a bucket, put surfaces that write data first, then order by places hit. Without a panel, do the same alone. - Walk the edge cases and mark each shown or not shown.
- Write the verdict last.