Skip to content

/design-review

Use when a design deliverable is about to be reported done — the final quality gate after design-motion or a mobile mockup.

shell
$ npx -y skills add fusengine/agents --skill design-review --agent claude-code

How it fires

How this skill gets triggered: by you, by Claude, or both.

  • Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.
  • You can call itInvoke it directly when you want it.
  • Slash command/design-review
How auto-invocation works

Context preview

The summary Claude sees to decide when to auto-load this skill.

Use when a design deliverable is about to be reported done — the final quality gate after design-motion or a mobile mockup.

SKILL.md

design-review.SKILL.md
name: design-review
description: "Use when a design deliverable is about to be reported done — the final quality gate after design-motion or a mobile mockup."
when-to-use: "After design-motion (or directly after the mockup for design-ios/design-android) — the last step before reporting a design deliverable done. Also the target of design-method's critique.md and audit.md moves."
keywords: review, audit, critique, challenger, p0-p3, no-aggregate-score, wcag, anti-slop, contrast, lookalike-test, body-sequence, je-reproduis
priority: critical
related: design-method, design-motion, design-system, ux-copy

<objective> The final quality gate before any design deliverable is reported done. Runs two assessments that must stay ISOLATED from each other — deterministic detection (grep/count/compute checks) is never performed in the same head as the subjective/visual read, because collapsing them into one pass is exactly how prior AI-slop clusters shipped through this audit undetected.

Findings are tagged P0-P3 (Blocking / Major / Minor / Polish) and reported individually — there is NO aggregate score, health score, or letter grade, ever; an aggregated number invites self-grading theater.

The visual review is a bounded loop, maximum 2 fix cycles: the loop exits PASS only once the register-applicable positive floors are actually met, and a plateau (cycle 2 repeating cycle 1's finding) stops immediately even at cycle 1 of 2.

Before any "done" claim, a mandatory in-loop challenger gate judges the deliverable blind — fresh-context, off a rendered PNG only, never fed this procedure's own reasoning. A Block from the challenger must be resolved or owner-accepted before "done" is reported. </objective>

Design Review — Final Quality Gate

When

After `design-motion` (web/webapp) or directly after the mockup (`design-ios`/ `design-android`). The last step before reporting any design deliverable done — never skipped, never reported as passed if it wasn't actually run (`references/review-procedure.md` Failure Handling).

Input

  • The complete rendered artifact: components/mockup with animations (if any) and

interactive states.

  • `design-system.md` as the audit baseline (tokens, forbidden fonts, contrast floors).
  • The `Je reproduis` line written by `design-web`/`design-webapp` — three declared

elements, **two tagged `[corpus: {reference}/{tokens section}]`** (measured procedure, the craft) and **one tagged `[sector: {url} — register]`** (register signal only; `[sector: none — register from brief]` is valid, an empty slot is not). A missing or untagged line is a blocking Part 1 finding — the binary verdict has no input without it.

  • **The corpus pages opened** (Gate 0 artefact 3): at least two

`{reference}-recode/index.html`, named. The `[corpus: …]` tags prove the corpus was read, never that it was seen — and a page sourced from markdown alone clears every mechanical check and reads dead. Absent ⇒ blocking Part 1 finding.

  • **The on-screen inventory** (Gate 0 artefact 4): what each section physically carries,

plus the screen-holding-floor verdict. Blocking when `VISUAL_DENSITY` ≤ 3 or `DESIGN_VARIANCE` ≥ 6; reported otherwise.

  • Any declared premium pattern(s); the signature element (`design-method` Step 2) instead

gets a **Signature Dominance** verdict.

  • The plan's two structural picks — hero treatment

(`design-method/references/macrostructure-bank.md`) **and** body sequence (`design-method/references/body-sequence-bank.md`). A plan naming neither is itself a detector signal (anti-slop entry 15). `brand` register; a `product` deliverable carries neither.

  • **The register** (`brand`/`product`, from `design-method` Gate 0) — an input, never

inferred mid-review: check 14's floors, Part 2 item 8's floors and the Lookalike Test (item 8b) all branch on it.

The two assessments — ISOLATED, never in the same head

This is the structural rule the whole procedure hangs on: the mechanical read and the subjective read must not anchor on each other.

1. **Deterministic detection** (`references/anti-ai-slop-audit.md` + `references/pre-flight-checklist.md`) — grep/count/compute, zero taste involved. Run by `design-expert` itself; there is nothing to isolate here because there is no judgment call to bias. 2. **Subjective visual review** — screenshots, named elicitation techniques (`references/elicitation-visual.md`), Nielsen heuristics (`references/ux-nielsen.md`), UX laws (`references/ux-laws.md`). This pass is run by `design-expert`, so it is **not yet independent** — independence is delivered by the mandatory challenger gate below, which judges blind, fresh-context, off the rendered PNG only, never this procedure's own reasoning. Do not treat the elicitation-technique pass alone as "isolated" — it isn't; the challenger is the isolation.

Never collapse these into one pass "to save a round" — that is exactly how the cream/serif/terracotta cluster shipped through this audit once already (documented in `anti-ai-slop-audit.md` Gate Semantics).

Part 1 — Deterministic Checks (mechanical, run first)

Full 15-item list is canonical in `references/review-procedure.md` Part 1 — contrast (4.5:1 text / 3:1 UI, light+dark), forbidden fonts, OKLCH-only color format **in the produced code** (corpus values arrive as hex/rgb — convert them, never drop them), em-dash crutch (2+ occurrences), token adherence, the anti-AI-slop audit (`references/anti-ai-slop-audit.md`, 15 detectors — including entry 15, the generic **body** sequence: canonical order verbatim AND uniform vertical rhythm, a conjunction because the canon *treated* is legitimate; clusters 9-11 are FLAG-with-justification, not a block, if declared per `design-method` Step 2), the mechanical pre-flight (`references/pre-flight-checklist.md`), WCAG beyond contrast (`references/ux-wcag.md`), cross-component consistency (`references/consistency-checks.md`), mobile nav functionality, doc↔code anima

Read more
Read it on GitHub ↗

Showing the first part of this file.

Ships withfusengine-agents

A plugin ecosystem that turns Claude Code into a supervised, multi-agent development environment.

Get the whole plugin, auto-invoked
Stats
22
Stars
0
Views
3
Forks
Active
Maintenance
CSS
Language
MIT
License
1d ago
Last commit
6mo ago
Created

Repo: fusengine/agents