Install any skill in seconds. Free to start, no credit card required.
Get Started Free →Use when designing, auditing, polishing, improving, or codifying frontend UI — websites, dashboards, landing pages, components, design systems
.claude/skills/catlog22-maestro-impeccable/SKILL.md| Test case | Without → With | Effect | Δ tokens | Δ turns |
|---|---|---|---|---|
| case-11 | ✗→✓ | ▲ Improved | 1130% | 0% |
| case-09 | ✗→✓ | ▲ Improved | 713% | 0% |
| case-19 | ✗→✓ | ▲ Improved | 277% | 0% |
| case-12 | ✓→✗ | ▼ Worse | 162% | 0% |
| case-15 | ✓→✗ | ▼ Worse | 770% | 0% |
> Plan tracking: codex 无 TaskCreate/TaskUpdate/TodoWrite 任务板。进度清单用 update_plan({ explanation?, plan: [{ step, status }] }) 维护(整体提交步骤数组,status: pending | in_progress | completed),权威状态始终在 session 工件中;依赖/认领(addBlockedBy/owner)是工件字段,不是工具参数。
<required_reading> @~/.maestro/workflows/run-mode.md @~/.maestro/workflows/codex-run-mode.md </required_reading>
<deferred_reading> Codify mode only (read when --codify and the corresponding phase starts):
</deferred_reading>
<purpose> UI design command: direct single-command, chain multi-step with quality gates, codify a design system from existing code, or search design knowledge. Parse input → prerequisites → read workflow file → execute → track. </purpose>
$ARGUMENTS first word determines mode:
| First Word | Mode | |------------|------| | --codify / codify | Codify — extract design system from existing code (see <codify_mode>) | | Known command (see routing table) | Direct |
> Disambiguation for overlapping names (harden, live): bare keyword without target → Chain; keyword + explicit target/path → Direct. Override: --chain forces Chain, --direct forces Direct.
| Chain name: build, redesign, improve, enhance, launch, harden, foundation, live | Chain | | continue / next / -c | Resume | | search | Search: maestro impeccable search "$REST" | | Free text (any) | Free Text Routing (3-layer system below) | | (empty) | Menu: show commands by category |
All workflows at ~/.maestro/workflows/impeccable/{command}.md:
| Command | Category | Description | |---------|----------|-------------| | craft | Build | Shape then build end-to-end — full page/component implementation | | shape | Build | Plan UX/UI before code — information architecture, wireframe, visual direction | | teach | Build | Set up PRODUCT.md — users, brand, tone, anti-references, principles | | document | Build | Generate DESIGN.md from existing code — extract tokens, typography, colors | | extract | Build | Pull tokens/components into reusable design system | | explore | Build | Multi-style comparison — generate variants, render prototypes, visual compare, select/mix | | critique | Evaluate | UX heuristic review with Nielsen scoring (/40) + P0/P1 findings | | audit | Evaluate | Technical quality checks — a11y, performance, responsive, code quality (/20) | | polish | Refine | Final quality pass — micro-adjustments, pixel perfection | | bolder | Refine | Amplify bland/safe designs — stronger personality, more contrast | | quieter | Refine | Tone down aggressive/overwhelming designs — reduce visual noise | | distill | Refine | Strip to essence — remove clutter, reduce cognitive load | | harden | Refine | Production-ready — error states, i18n, edge cases, overflow, empty states | | onboard | Refine | First-run flows, empty states, activation paths, progressive disclosure | | animate | Enhance | Add purposeful motion — transitions, micro-interactions, scroll effects | | colorize | Enhance | Add strategic color — OKLCH palette, contrast, color strategy | | typeset | Enhance | Improve typography — scale, hierarchy, font pairing, line length | | layout | Enhance | Fix spacing, rhythm, visual hierarchy, alignment, grid | | delight | Enhance | Add personality — memorable details, joy, surprise moments | | overdrive | Enhance | Push past conventional limits — ambitious visual effects | | clarify | Fix | Improve UX copy — labels, error messages, microcopy, CTAs | | adapt | Fix | Adapt for devices/screens — responsive, touch targets, breakpoints | | optimize | Fix | Fix UI performance — loading, rendering, bundle, paint/layout jank | | live | Iterate | Browser-based variant iteration — real-time design in DevTools |
Reference files (loaded by workflow as needed, not standalone commands): brand.md, product.md, design.md, codex.md, heuristics-scoring.md, cognitive-load.md, color-and-contrast.md, interaction-design.md, motion-design.md, personas.md, responsive-design.md, spatial-design.md, typography.md, ux-writing.md
Chain step names below reuse Command Routing names but resolve through the chain runner. To avoid ambiguity with Direct command invocation, internal display, todo items, and session status records always tag chain steps with the impeccable: prefix (e.g. impeccable:craft, impeccable:critique). The bare names in this table refer to the workflow file at ~/.maestro/workflows/impeccable/{name}.md that the chain step reads.
| Chain | Steps | Scenario | |-------|-------|----------| | build | teach? → explore? → shape → craft → critique → refine] → audit → polish | New from scratch | | redesign | document → explore → shape → craft → critique → refine] → audit → polish | Redesign existing code | | improve | critique → refine] → polish → audit | Iterative improvement | | enhance | {cmd...} → critique → refine] → polish | Targeted enhancement (multi-command) | | launch | harden → adapt → optimize → audit → polish | Full production readiness | | harden | harden → audit → polish | Edge case hardening | | foundation | teach? → explore → document → extract | Design system setup | | live | live | Real-time iteration |
? = conditional: teach if PRODUCT.md missing; explore if DESIGN.md missing and --skip-design not set[refine] = quality gate loop: gate fails → auto-select fix commands from findings → re-gate{cmd...} = enhance supports multiple commands, comma-separated: enhance colorize,typeset landing-pageChain flags: --threshold <N> (default 26/40), --max-loops <N> (default 3), --skip-design, --styles <N>, -y (skip Layer 2 ambiguity request_user_input — select first matching chain; skip chain session confirmation; skip quality gate refine confirmations. Does NOT skip prerequisite checks.)
Three-layer priority matching. Stop on first match — do not continue to lower layers.
Semantically match user description against the Command Routing table's Description column. Match the closest single command.
Skip condition: If the prompt matches a Layer 2 chain keyword AND matches MORE THAN ONE row in the Layer 1 intent signal table, skip this layer. Example: enhance colors and typography — "enhance" is a chain keyword + multiple design dimensions → skip to Layer 2.
| Intent signal | Command | |---------------|---------| | review, check UX, score, heuristic, evaluate usability | critique | | audit, a11y, accessibility, technical check, performance audit, code quality | audit | | add animation, motion, transitions, micro-interactions | animate | | color, palette, OKLCH, contrast, color scheme | colorize | | font, typography, type scale, line height, font pairing | typeset | | layout, spacing, grid, alignment, visual hierarchy | layout | | too loud, tone down, visual noise, make it simpler, too busy | quieter | | too bland, bolder, more personality, stronger, more contrast | bolder | | too complex, simplify, strip, remove clutter, cognitive load | distill | | polish, fine-tune, pixel perfect, final pass, refine details | polish | | copy, labels, error messages, UX writing, microcopy, CTAs | clarify | | responsive, mobile, adapt, breakpoints, touch targets | adapt | | performance, loading, bundle, jank, speed, rendering | optimize | | edge cases, error states, i18n, overflow, empty state hardening | harden | | onboarding, first-run, empty state, activation, progressive disclosure | onboard | | fun, surprise, personality, memorable, joy, delight | delight | | extraordinary, push limits, ambitious effects, cutting-edge | overdrive | | plan UX, wireframe, information architecture, visual direction | shape | | multi-style, variants, compare styles, style comparison | explore | | brand definition, PRODUCT.md, product context | teach | | extract design, DESIGN.md, document design system | document | | pull tokens, extract components, design system extraction | extract | | real-time, browser iteration, live editing | live |
Override: if the user explicitly uses a chain name as the primary verb (improve, enhance, redesign, build, launch), prefer Layer 2 chain even if Layer 1 matched a single command.
Layer 1 did not match. Check for chain-level keywords — even if the prompt also contains a specific target/path, chain matching takes priority.
| Pattern | Chain | |---------|-------| | new, create, build, from scratch, start fresh | build | | redo, redesign, rethink, restyle, overhaul, revamp | redesign | | improve, iterate, better, refine overall | improve | | enhance, visual upgrade, level up | enhance | | launch, deploy, ship, production-ready, go live | launch | | harden, production-harden, edge cases | harden | | design system, tokens, design foundation, design infrastructure | foundation | | real-time, live, browser | live |
Ambiguous + no -y:
request_user_input (single-select, header: "意图确认"):
Layer 1+2 both did not match, but intent is to build/create a specific thing:
d:\path, src/pages/, index.html)based on..., like..., similar to...)→ Route to craft (Direct)
If all three layers produce no match → E001 (No command or intent resolved). Before raising E001, attempt request_user_input with top 2-3 closest matches from Layer 1+2 tables.
Before reading any command workflow:
maestro load --type spec --category ui → if empty → maestro impeccable load-context[TODO]) → execute teach first, then resume original task~/.maestro/workflows/impeccable/{brand|product}.md ── Command: {command} ──────────────────── Category: {category} | Target: {target} ─────────────────────────────────────────
~/.maestro/workflows/impeccable/{command}.md[{command}] {phase description}impeccable: to disambiguate from Direct commands): ── Chain: build ──────────────────────────
───────────────────────────────────────── Target: {target}
◆ marks quality gate steps with threshold↺ marks refine loop with max iteration count(skipped)Create session: .workflow/.maestro/ui-craft-{YYYYMMDD-HHmmss}/status.json json { "chain_type": "...", "target": "...", "steps": [...], "current_step": 0, "gate_history": [], "loop_count": 0, "status": "running" }
[chain] step N: impeccable:{command} — {description} (use impeccable: prefix to disambiguate from Direct command items)[chain] step 5: impeccable:critique ◆ gate ≥26/40~/.maestro/workflows/impeccable/{command}.md → executecurrent_step, step status)**Total** | | **N/40**, audit **Total** | | **N/20**[P0] / [P1] tags<codify_mode> Extract a design system from existing source code into tokens, a reference package, and knowledge assets. 4-phase pipeline: validate → extract → package → knowhow.
Trigger: first word is --codify or codify. Also reachable when the foundation chain reaches its document/extract steps and the user wants full reverse-extraction with knowhow persistence.
Arguments: --codify <source-path> [--package-name <name>] [--output-dir <path>] [--overwrite]
<source-path> (required): Directory containing CSS/SCSS/JS/TS/HTML source files--package-name <name>: Package name for reference output (default: auto-generated from source directory)--output-dir <path>: Output directory for reference package (default: .workflow/reference_style)--overwrite: Allow overwriting existing package directoryOutput boundary: ALL file writes MUST target the --output-dir path (default: .workflow/reference_style/) for reference packages, and .workflow/knowhow/ for knowledge assets (manifest-driven direct writes per ui-codify-knowhow). NEVER modify the source directory being analyzed.
--overwrite flag (E102)bashmaestro load --type spec --category ui
Route to ~/.maestro/workflows/ui-codify.md and follow completely. The workflow orchestrates 4 phases with deferred loading of phase-specific workflow files (see <deferred_reading>). Each phase reads its workflow file only when execution reaches that phase.
GATE Phase 1 → Phase 2: Validation → Extraction
GATE Phase 2 → Phase 3: Extraction → Package
GATE Phase 3 → Phase 4: Package → Knowhow
question: "Preview 生成完成。是否继续将设计系统持久化为 knowhow 知识资产?" options:
description: "按 knowhow-manifest.json 写入 AST/DCS assets 和 spec entries"
description: "保留 preview.html + preview.css,不写入知识库"
GATE Phase 4 → Completion: Knowhow → Done
.workflow/knowhow/ and .workflow/specs/ per ui-codify-knowhow Step 4.4 (after user confirmation at Phase 3→4 gate).REQUIRED_ARTIFACTS = [
"design-tokens.json", // Phase 1
"layout-templates.json", // Phase 2
"preview.html", // Phase 3
"preview.css", // Phase 3
"knowhow-manifest.json" // Phase 4
]If any artifact is missing: DO NOT report completion. </codify_mode>
Scan .workflow/.maestro/ui-craft-*/status.json for status == "running" || status == "paused" → most recent → resume from current_step.
When findings lack explicit suggested command:
| Finding Category | Command | |-----------------|---------| | Layout, spacing, hierarchy, alignment | layout | | Color, contrast, palette | colorize | | Typography, font, readability | typeset | | Animation, motion, transitions | animate | | Copy, labels, UX writing | clarify | | Responsive, mobile, breakpoints | adapt | | Performance, loading, speed | optimize | | Complexity, overload, clutter | distill | | Bland, safe, generic | bolder | | Aggressive, overwhelming | quieter | | Onboarding, empty state | onboard | | Edge cases, i18n, error handling | harden | | Personality, memorability | delight |
Never auto-select: teach, shape, craft, live, document, extract, overdrive, critique, audit.
GATE: Quality Gate Step → Next Step
GATE: Chain → Completion
status: "completed" and final scores.<error_codes> | Code | Severity | Condition | Recovery | |------|----------|-----------|----------| | E001 | error | No command or intent resolved from input | Provide a known command, chain name, or descriptive intent | | E002 | error | Source/target path not found | Verify path exists | | E003 | error | PRODUCT.md missing and teach step failed | Run maestro impeccable teach manually first | | E004 | error | Chain quality gate failed after max loops | Review findings manually, fix critical issues, then resume | | W001 | warning | UI specs not found via maestro load --type spec --category ui | Continuing without specs — output may miss project conventions | | W002 | warning | Quality gate score below threshold but P0 == 0 | Auto-refine loop triggered | | W003 | warning | Chain step failed but non-blocking | Step failure documented, chain continues | | E101 | error | Codify: source path not found or not a directory | Verify --codify <source-path> exists | | E102 | error | Codify: package directory exists without --overwrite | Re-run with --overwrite or a new --output-dir | | W004 | warning | Codify: animation-tokens.json not found (optional) | Extraction continues without animation tokens | | W005 | warning | Quality gate score unparseable from output | Retry gate step; if still fails, treat as gate fail | </error_codes>
<success_criteria> Direct mode:
Chain mode:
.workflow/.maestro/ui-craft-*/status: "completed" and final scoresCodify mode:
maestro load --type spec --category ui (if available)</success_criteria>
<completion>
| Condition | Suggestion | |-----------|-----------| | Direct teach complete | maestro impeccable shape | | Direct shape complete | maestro impeccable craft | | Direct craft complete | maestro impeccable critique | | Direct critique findings | maestro impeccable polish or targeted fix command | | Chain complete | Review final scores, consider maestro impeccable improve for iteration | | Chain paused/interrupted | maestro impeccable continue to resume | | Codify complete | Use extracted tokens in maestro impeccable craft for new builds | | Codify design system needs refinement | maestro impeccable document to regenerate DESIGN.md | | Codify knowledge assets persisted | maestro search --type knowhow "design system" to verify | </completion>
| Case | Status | Duration (ms) | Turns | Tokens | Tool calls | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Without | With | Δ | Without | With | Δ | Without | With | Δ | Without | With | Δ | ||
case-11 | fail→pass | 4,593 | 7,433 | +62% | 1 | 1 | 0% | 603 | 7,414 | +1130% | 0 | 0 | — |
case-01 | fail→fail | 5,287 | 8,032 | +52% | 1 | 1 | 0% | 301 | 6,761 | +2146% | 0 | 0 | — |
case-02 | fail→fail | 4,760 | 9,196 | +93% | 1 | 1 | 0% | 198 | 6,890 | +3380% | 0 | 0 | — |
case-03 | fail→fail | 26,376 | 19,961 | -24% | 1 | 1 | 0% | 5,021 | 7,534 | +50% | 0 | 0 | — |
case-04 | fail→fail | 19,901 | 7,631 | -62% | 1 | 1 | 0% | 3,644 | 6,485 | +78% | 0 | 0 | — |
case-05 | fail→fail | 9,932 | 6,417 | -35% | 1 | 1 | 0% | 1,484 | 6,533 | +340% | 0 | 0 | — |
case-12 | pass→fail | 16,219 | 11,138 | -31% | 1 | 1 | 0% | 2,622 | 6,860 | +162% | 0 | 0 | — |
case-06 | fail→fail | 21,355 | 11,804 | -45% | 1 | 1 | 0% | 4,268 | 7,137 | +67% | 0 | 0 | — |
case-07 | fail→fail | 11,328 | 10,148 | -10% | 1 | 1 | 0% | 1,642 | 7,008 | +327% | 0 | 0 | — |
case-08 | fail→fail | 15,961 | 9,242 | -42% | 1 | 1 | 0% | 2,648 | 6,801 | +157% | 0 | 0 | — |
case-09 | fail→pass | 6,120 | 5,125 | -16% | 1 | 1 | 0% | 863 | 7,017 | +713% | 0 | 0 | — |
case-10 | fail→fail | 3,998 | 6,514 | +63% | 1 | 1 | 0% | 581 | 6,480 | +1015% | 0 | 0 | — |
case-13 | pass→pass | 19,516 | 18,388 | -6% | 1 | 1 | 0% | 3,437 | 8,537 | +148% | 0 | 0 | — |
case-14 | fail→fail | 19,836 | 13,372 | -33% | 1 | 1 | 0% | 3,864 | 7,278 | +88% | 0 | 0 | — |
case-15 | pass→fail | 5,411 | 7,478 | +38% | 1 | 1 | 0% | 755 | 6,572 | +770% | 0 | 0 | — |
case-16 | fail→fail | 2,222 | 7,826 | +252% | 1 | 1 | 0% | 300 | 6,655 | +2118% | 0 | 0 | — |
case-17 | fail→fail | 7,809 | 8,683 | +11% | 1 | 1 | 0% | 989 | 6,623 | +570% | 0 | 0 | — |
case-18 | fail→fail | 16,137 | 38,806 | +140% | 1 | 1 | 0% | 2,225 | 6,569 | +195% | 0 | 0 | — |
case-19 | fail→pass | 13,132 | 6,130 | -53% | 1 | 1 | 0% | 1,885 | 7,098 | +277% | 0 | 0 | — |
case-20 | fail→fail | 6,350 | 5,523 | -13% | 1 | 1 | 0% | 1,035 | 6,471 | +525% | 0 | 0 | — |
case-21 | pass→fail | 16,319 | 11,360 | -30% | 1 | 1 | 0% | 3,207 | 6,878 | +114% | 0 | 0 | — |
case-22 | pass→fail | 12,846 | 23,532 | +83% | 1 | 1 | 0% | 2,551 | 8,137 | +219% | 0 | 0 | — |
case-23 | pass→fail | 10,767 | 19,458 | +81% | 1 | 1 | 0% | 1,428 | 7,969 | +458% | 0 | 0 | — |
DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 23 cases were attempted, and 4 counted toward the lift figure. The other 19 produced results that are not comparable between the two arms, so they are excluded from the headline rather than averaged into it. The headline lift of -9 percentage points is the difference between those two pass rates over the 4 comparable cases. 5 cases got worse with the skill loaded, and they are included in that figure.
Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.
Other measured skills in the registry, with their headline benchmark lift.