From mz-design
ALWAYS invoke when the user wants a UI/UX design document or interface spec. Triggers: "design a UI for X", "create a design document", "design spec", "UX spec". Provide a brief as the argument.
npx claudepluginhub doctormozg/claude-pipelines --plugin mz-designThis skill is limited to using the following tools:
Takes a UI/UX design brief and produces a comprehensive design document with ASCII wireframes, Mermaid diagrams, and a WCAG 2.2 AA contrast report. Refines the draft through four specialist critics in parallel (ui-designer, ux-designer, art-designer, accessibility-specialist) with a WCAG hard gate, for up to 5 iterations, until all critics approve and zero contrast violations remain.
Guides Next.js Cache Components and Partial Prerendering (PPR): 'use cache' directives, cacheLife(), cacheTag(), revalidateTag() for caching, invalidation, static/dynamic optimization. Auto-activates on cacheComponents: true.
Edits, creates, cleans, and formats spreadsheet files (.xlsx, .xlsm, .csv, .tsv) with zero formula errors, professional styling, and financial model standards like color coding.
Share bugs, ideas, or general feedback.
Takes a UI/UX design brief and produces a comprehensive design document with ASCII wireframes, Mermaid diagrams, and a WCAG 2.2 AA contrast report. Refines the draft through four specialist critics in parallel (ui-designer, ux-designer, art-designer, accessibility-specialist) with a WCAG hard gate, for up to 5 iterations, until all critics approve and zero contrast violations remain.
build (mz-dev-pipe).audit or review-branch.brainstorm (mz-creative).$ARGUMENTS — The design brief. Supports inline modifiers:
scope:branch|global|working — codebase scope for design-researcher (default: global)@image:<path> — reference image path (acknowledged, not decoded)@doc:<path> — existing requirement/brief document to ingestIf empty, ask the user for a brief via AskUserQuestion. Never guess.
.mz/design/<YYYY_MM_DD>_design_<slug>| # | Phase | File | Loop? |
|---|---|---|---|
| 0 | Setup | inline below | — |
| 1 | Intake & Research | phases/intake_and_research.md | — |
| 2 | Initial Draft | phases/initial_draft.md | — |
| 3 | Critique Loop | phases/critique_loop.md | max MAX_DESIGN_ITERATIONS (5) |
| 4 | Finalization | Inline gate below (+ phases/finalization.md for details) | user-approval sub-loop |
$ARGUMENTS. Extract brief, scope:, @image: refs, @doc: refs.AskUserQuestion asking for the brief. Do not guess.<YYYY_MM_DD>_design_<slug> where <YYYY_MM_DD> is today's date (underscores) and slug is a snake_case summary of the brief (max 20 chars); on same-day collision append _v2, _v3..mz/design/<task_name>/.state.md with Status, Phase, Started, Iteration: 0, FilesWritten: [].task_name, DESIGN_DIR path, detected modifiers.This orchestrator (not a subagent) must present to the user via AskUserQuestion. This step is interactive and must not be delegated.
Mandatory pre-read: Read .mz/design/<task_name>/design.md with the Read tool, then read wireframes.md and wcag-report.md from the same directory. Capture the full design document body, ASCII wireframes, and WCAG contrast report into context. The critique loop must have converged with AGGREGATE: PASS and zero WCAG violations before this gate fires. See phases/finalization.md Step 4.1 for extended presentation rules and the revision-writer sub-loop.
Mandatory inline-verbatim presentation: The AskUserQuestion question body must contain the verbatim contents of design.md, wireframes.md, and wcag-report.md under labeled sections. Never substitute a path, line count, iteration summary, or <verdict> placeholder — the user must review the actual finalized design (including the contrast pairs) in the question itself, not have to open files separately. If any artifact is very long and would exceed AskUserQuestion's practical body size, surface that risk to the user via AskUserQuestion before truncating; never silently summarize.
Before invoking AskUserQuestion, emit a text block to the user:
**Design ready for approval**
All four specialist critics have approved the design, and the WCAG contrast report shows zero violations. Please review the finalized design document, wireframes, and WCAG report below.
- **Approve** → write `final-summary.md` and mark task complete
- **Reject** → mark task aborted and stop
- **Feedback** → dispatch design-revision-writer to apply changes, loop back to this gate
Invoke AskUserQuestion with this body (where each <verbatim ...> marker is replaced by the bytes you just read):
Design document ready (<N>/5 iterations, Aggregate: <verdict>, WCAG: PASS). Please review the finalized design:
## Design Document (design.md)
<verbatim design.md contents>
## Wireframes (wireframes.md)
<verbatim wireframes.md contents>
## WCAG Contrast Report (wcag-report.md)
<verbatim wcag-report.md contents>
Type **Approve** to proceed, **Reject** to cancel, or type your feedback.
Response handling:
state.md to complete, proceed to write final-summary.md.state.md to aborted_by_user and stop. Do not write final-summary.md.design-revision-writer to apply the feedback, overwrite the affected artifact(s), return to this gate, re-read the updated artifact(s), and re-present via AskUserQuestion with the full new contents under each section — never diff-only, never summary-only, since context compaction may have destroyed the user's memory of earlier iterations. This is a loop — repeat until the user explicitly approves. Never proceed to final-summary.md without explicit approval.Techniques: delegated to phase files — see Phase Overview table above.
| Rationalization | Rebuttal |
|---|---|
| "The first draft is fine, skip the critique loop" | "Four parallel critics catch issues in one round that would surface as rework during implementation. The loop costs 5 agents per round and prevents 10+ downstream cycles." |
| "WCAG AA is overkill for internal tools" | "Internal users include colleagues with visual impairments. AA is the legal floor, not a stretch goal. The hard gate is non-negotiable." |
| "Mermaid diagrams and ASCII wireframes are busywork" | "Flow diagrams surface IA gaps invisible in prose. Wireframes make layout decisions concrete — without them, ui-designer has nothing to critique." |
| "I'll approve iteration 1 to save time" | "The 5-iteration cap is a ceiling, not a target. Most drafts pass in 1–2 rounds. Approving an unreviewed draft defeats the purpose of the specialist critics." |
STATUS: DONE.AGGREGATE: FAIL and advanced without running the revision writer.MAX_DESIGN_ITERATIONS without escalating to the user.At the end of Phase 4, output:
Design document finalized.
Task dir: .mz/design/<task_name>/
Iterations: <N>/5
Aggregate: <PASS | ACCEPTED_WITH_UNRESOLVED>
WCAG gate: <PASS | FAIL>
Files:
- design.md (<lines>)
- wireframes.md (<lines>)
- wcag-report.md (<lines> — <pair count> pairs)
- final-summary.md
If any phase is incomplete, print the blocker explicitly. The verification block is mandatory — do not skip it.
AskUserQuestion.@image: path does not exist → note in intake.md, continue with placeholder.@doc: path does not exist → ask the user whether to proceed without it.state.md before and after spawning agents.After each phase, update .mz/design/<task_name>/state.md with:
Status: pending | running | complete | complete_with_unresolved | aborted_by_user | failedPhase: 0 | 1 | 2 | 3 | 4PhaseName: short label (setup, intake_and_research_complete, etc.)Iteration: 0..MAX_DESIGN_ITERATIONSLastVerdict: (Phase 3 only) the 6-line verdict block from critique_<N>.mdFilesWritten: cumulative list of pathsNever rely on conversation memory for cross-phase state — context compaction destroys specific paths and decisions. The state file is the source of truth.