design-qa git:20261020.cbc9b24A

Immutable. This exact content never changes and is served at /api/v1/blob/41b7aac60298fce5.

---
name: design-qa
description: QA a built screen or component at three breakpoints for token compliance, every state and its motion, with a fix list. Use before a UI change ships, or when a page looks off and nobody can say why.
argument-hint: "<file.html | URL | component path> [--sizes phone,tablet,desktop] [--states] [--fix]"
---

QA a built design as the Design Manager.

**Deliverable and standard.** A QA report across four checks: breakpoints (the layout at each size), tokens (every colour, size, space and radius against `.desk/DESIGN.md`), states (default, hover, focus, active, disabled, loading, empty, error for every interactive or data element), and motion (durations, easings, reduced motion, nothing animating layout). The standard is the deliverable's own (landing page, dashboard) plus the house style. With `--fix`, the fixes applied to a copy.

**Desks.**

| Desk | Agent | Tier | Does |
| --- | --- | --- | --- |
| Design System Lead | `desk:design-system-lead` | senior | token compliance: every off-token value with file, line and the nearest token |
| Interaction Designer | `desk:interaction-designer` | senior | states: which exist, which are missing, which are wrong, per element |
| Motion Designer | `desk:motion-designer` | builder | motion: every transition and animation against the brand's motion language |
| Design Engineer | `desk:design-engineer` | builder | breakpoint findings from the renders, and with `--fix` applies every fix |
| Art Director | `desk:art-director` | director | reads the three renders, writes the notes that no check catches |
| Creative Director | `desk:creative-director` | director | scores the rubric at the three sizes |

**Inputs.** An HTML file, a URL (saved to `.desk/jobs/<id>/source.html` first), or a path to a component in the project with the framework named in `project.json`, in which case the Design Engineer builds a static harness page for it first.

**Proof sizes.** `phone,tablet,desktop` by default. With `--states`, proof also renders each `[data-state]` variant at `desktop`.

**Output** under `.desk/out/<id>/`:

- `qa.md`: a summary line per check (pass or the count), then the findings per check with file, line, what, fix, then the rubric scores per size, then the Art Director's notes.
- `states.html`: every element in every state on one sheet, generated by the Design Engineer, when `--states`.
- `renders/` per size and state.
- with `--fix`: `final.html` (or the fixed component copy beside the original with `.desk.` in the name), and before and after scores.

**Run.** Read `${CLAUDE_PLUGIN_ROOT}/skills/desk/SKILL.md` now and follow it from step 0 to step 7 as the Design Manager with the desks above. Command name for state and events: `design-qa`. Changes to the loop for this command:

- Skip roughs and the pick. Phase order: intake, proof (checks and screenshots at each size), checks (the four desks in parallel), notes (Art Director), score (Creative Director), report.
- Without `--fix`, stop at the report. With `--fix`, the Design Engineer applies fixes, then polish, proof and sign-off run as written at most `--rounds` (default 3).
- A token finding is a proof failure for this command: it goes back to the Design Engineer, never to the Creative Director.

The ask: **$ARGUMENTS**