adapt
Responsive layout pass covering breakpoints, touch targets, safe areas, and fluid type. Use when the UI has layout or touch issues on mobile/tablet, when…
Produce a scored heuristic critique of the UI using Nielsen's 10 + 6 design laws + optional persona walkthroughs. Outputs a machine-parseable scorecard plus a 0-100 UsabilityScore (the judged companion to the deterministic UICraftScore).
> /plugin marketplace add educlopez/ui-craft > /plugin install ui-craft@ui-craft
How it fires
How this command gets triggered: by you, by Claude, or both.
/heuristicContext preview
What this command does when you run it.
Produce a scored heuristic critique of the UI using Nielsen's 10 + 6 design laws + optional persona walkthroughs. Outputs a machine-parseable scorecard plus a 0-100 UsabilityScore (the judged companion to the deterministic UICraftScore).
description: Produce a scored heuristic critique of the UI using Nielsen's 10 + 6 design laws + optional persona walkthroughs. Outputs a machine-parseable scorecard plus a 0-100 UsabilityScore (the judged companion to the deterministic UICraftScore). argument-hint: "[file or component path] [--persona=<name>]"
Score the UI at `$ARGUMENTS` against Nielsen's 10 + 6 design laws. Load the `ui-craft` skill.
**Step 1 — Load the methodology.** Read `references/heuristics.md` for the full rubric, scoring definitions, design law details, and the required output format. Do NOT invent a new format or a new scale.
**Step 2 — Walk Nielsen's 10 heuristics.** Score each 1-5 per the rubric:
For every heuristic, write a concrete finding — quote text, count elements, name the broken flow. Vague findings are rejected.
**Step 3 — Audit the 6 design laws.** PASS / FAIL each with a specific detail:
**Step 4 — Persona walkthrough (if `--persona=` present).** If the args include `--persona=<name>`, load `references/personas.md` and run the matching walkthrough checklist. Supported: `priya`, `jordan`, `adaeze`, `kwame`, `margo`, `all`. Output the walkthrough as a `| Checklist item | Pass/Fail | Finding | Impact |` table. Without the flag, skip this step.
**Step 5 — Rank findings by impact tag.** Impact order: `blocks-conversion > adds-friction > reduces-trust > minor-polish`. Include at most 5 findings in the ranked list; cut anything at `minor-polish` unless there are no higher-impact findings.
**Step 6 — Compute the UsabilityScore.** Roll the scorecard into a 0-100 number + grade per the **UsabilityScore** formula in `references/heuristics.md`: `heuristic_base = round(((mean(nielsen_scores) − 1) / 4) × 100)`, minus `5 × (failed design laws)`, clamped [0,100]. Same A/B/C/D/F bands as UICraftScore. Always label it `(judged)` — it is **not** deterministic and must never gate CI. If the args include `--json`, also emit the machine-readable block. If the user asks for the full picture, build the **Extended quality report** by fetching the deterministic UICraftScore (`node scripts/eval.mjs <path> --json` or the `score_ui` MCP tool) and placing both side by side — never average them.
**Step 7 — Output.** Use the exact scorecard format in `references/heuristics.md`:
1. `## Heuristic Scorecard` table 2. `## Design Law Audit` table 3. `## Persona Walkthrough` table (only if `--persona=` was passed) 4. `## Top findings (ranked by impact)` — numbered list, 3-5 items 5. `## UsabilityScore` block — the 0-100 score + grade + component breakdown
**Knob awareness:** knob-agnostic. Usability is not a knob — a 2 is a 2 whether `CRAFT_LEVEL` is 3 or 9. Do not soften scores based on `CRAFT_LEVEL`.
**Output contract:**
Do NOT edit code. This is a scored critique.
**Next step:** Fix the findings, then `/finalize` — the scorecard is the input to a gated ship (rung 3).
Ship designer-grade UI by default. A design engineering system for AI coding agents — install it as a skill or as the ui-craft CLI, and your agent starts designing like it has taste. Ask for a dashboard, get one you'd put in production.
Repo: educlopez/ui-craft
Responsive layout pass covering breakpoints, touch targets, safe areas, and fluid type. Use when the UI has layout or touch issues on mobile/tablet, when…
Motion design pass — adds purposeful animations or removes excessive ones, respecting MOTION_INTENSITY and the project's animation stack. Use when the user…
Technical UI audit — a11y, performance, responsive. Produces a prioritized findings table.
Amplify personality — raises layout variance and motion, strengthens typography and one signature detail, without slop. Use when the UI works but feels safe,…
Write or update the project's durable design brief at .ui-craft/brief.md.
UX copy review across buttons, errors, empty states, and form hints — critiques by default, applies only on request. Use when copy feels vague, generic, or…