design-qa

Files (1)

• SKILL.md

SKILL.md (first lines)

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**

From adityareddy-dev/deskstudio, MIT.

More from adityareddy-dev/deskstudio