Commands
All 25 slash commands, grouped by rung — so the group tells you what a command costs you before you read what it does.
Updated 2026-07-25
Commands are focused passes. Each loads a single lens from the skill and returns a structured output. Reach for one when you know exactly what you want and would rather not describe it.
They are not a flat list. Every command belongs to a rung of the ladder, and the rung is the useful thing to know first:
| Rung | Commands | What it costs you |
|---|---|---|
| Front door | /start |
nothing — read-only |
| 1 · Direct | 19 commands | one command, session-local |
| 2 · Persist | /brief, /tokens, /remember |
written once, read by every future session |
| 3 · Enforce | /finalize |
wired once into review or CI |
| Express lane | /sddesign |
walks rungs 1 to 3 in one run |
In Claude Code, invoke with the native slash syntax (/ui-craft:audit). In every other harness each
command ships as a peer sub-skill — trigger it by intent (“audit my UI”, “polish this page”). Same
content, different surface.
Commands honor the dials set during Discovery. /ui-craft:polish at CRAFT_LEVEL=3 is a no-op.
/ui-craft:animate at MOTION_INTENSITY=2 refuses entrance stagger.
Front door
| Command | One-liner | Example prompt | Relevant knobs |
|---|---|---|---|
/ui-craft:start |
Run this first. Reads the project (framework, tokens, brief, spec, existing UI), reports which rung you are on, and names the one command worth running next. Read-only. | “where do I start” / “what can ui-craft do here” | knob-agnostic |
If you are unsure which command fits, you do not need to memorize the catalog below — /start picks
for you.
Rung 1 · Direct
Nineteen commands, one focused pass each. Nothing here persists past the session.
Build a surface
| Command | One-liner | Example prompt | Relevant knobs |
|---|---|---|---|
/craft |
One-shot pipeline for a complete surface — inputs (or silent defaults) → composition → theme → build order → acceptance bar enforced before reporting. | “build me a dashboard” / “craft a SaaS landing page” | CRAFT_LEVEL, VISUAL_DENSITY, MOTION_INTENSITY |
/ui-craft:shape |
Wireframe-first. ASCII layout + content inventory + state list + open questions before any JSX. | “shape a settings page for API keys” | knob-agnostic |
/ui-craft:redesign |
Modernize an existing surface without losing what works — audits first, classifies what to preserve (brand, IA, SEO, content), then picks refresh / reskin / rebuild. | “redesign this site” / “make this look current” | CRAFT_LEVEL |
/craft is the fastest path to a shippable surface. It loads the matching outcome recipe (currently
dashboard · landing · auth), asks the recipe’s Step 0 questions in one compact prompt, and builds top
to bottom: tokens → shell → hero tier → primary region → states → keyboard → finish. The acceptance bar
must pass before it reports done.
At CRAFT_LEVEL ≥ 8, /craft finishes with the full /finalize gate instead of the recipe’s minimum
passes. Surfaces with no recipe yet (settings, onboarding) fall back to a standard build with the
closest references — /craft will say which recipe is missing. The full build contracts live in
Recipe — SaaS Dashboard, Recipe — Landing Page, and
Recipe — Auth.
Adjust one dimension
| Command | One-liner | Example prompt | Relevant knobs |
|---|---|---|---|
/ui-craft:animate |
Add or fix motion. Honors MOTION_INTENSITY and loads the stack reference if you opted in. |
“animate this modal entrance” | MOTION_INTENSITY tiers ≤3 / 4–7 / 8+ |
/ui-craft:adapt |
Responsive pass — mobile, tablet, desktop, touch, safe areas. | “adapt this table for mobile” | VISUAL_DENSITY sets column count per breakpoint |
/ui-craft:typeset |
Typography pass — fonts, scale, hierarchy, micro-typography. | “typeset this long-form page” | knob-agnostic |
/ui-craft:colorize |
Introduce color strategically — 90% neutral, one accent, 3–5 placements. | “colorize this empty-state UI” | defers to variant if one is active |
/ui-craft:clarify |
UX copy pass — buttons, errors, empty states, form hints. Clarity over cleverness. | “clarify the copy on this onboarding” | knob-agnostic |
/ui-craft:extract |
Pull repeated patterns into components and lift magic values into tokens. | “extract repeated patterns in this page” | knob-agnostic |
/ui-craft:distill |
Strip to essence. Cut every section that doesn’t earn its space. | “distill this hero” | CRAFT_LEVEL drives cut aggression |
/ui-craft:delight |
Add purposeful moments of joy — micro-interactions, not decorative animation. Copy first, animation last. | “add a delight moment to the success screen” | gated by MOTION_INTENSITY ≥ 4 |
/ui-craft:polish |
Final polish pass — the compound details that separate “done” from “crafted”. | “polish this dashboard” | CRAFT_LEVEL gates skip / full / signature |
/ui-craft:bolder |
Amplify personality — more layout variance and motion, stronger typography, one signature detail. Still no slop. | “make it bolder” / “more personality” | raises CRAFT_LEVEL and MOTION_INTENSITY intent |
/ui-craft:quieter |
Tone down noise — less variance and motion, simpler layout and color weight, hierarchy kept intact. | “quieter” / “tone it down” | lowers variance and motion intent |
Review a surface
| Command | One-liner | Example prompt | Relevant knobs |
|---|---|---|---|
/ui-craft:critique |
UX critique — hierarchy, clarity, anti-slop. No code changes unless asked. | “critique this pricing page” | CRAFT_LEVEL sets severity floor |
/ui-craft:heuristic |
Signature move — scored critique using Nielsen’s 10 plus 6 design laws plus persona walkthroughs. Markdown scorecard, no code. | “run a heuristic on this checkout” | knob-agnostic |
/ui-craft:audit |
Technical UI audit — a11y, performance, responsive. Prioritized findings table. | “audit this checkout form” | knob-agnostic |
/ui-craft:unhappy |
State-first pass — design every non-happy state (idle / loading / empty / error / partial / conflict / offline) before the happy path. | “design the unhappy paths for this form” | knob-agnostic |
/ui-craft:harden |
Production readiness — loading, empty and error states, i18n, offline, edge cases. | “harden this signup flow” | knob-agnostic |
Gating detail
/ui-craft:polish—CRAFT_LEVEL ≤ 4skips entirely; 5–7 is a full pass; 8+ adds a signature detail (the compound moment: a page-level motif or micro-interaction earned by the rest of the craft)./ui-craft:critique—CRAFT_LEVEL=3flags only critical issues;CRAFT_LEVEL=9+flags minor polish./ui-craft:audit,/ui-craft:harden,/ui-craft:heuristicand/ui-craft:unhappyare explicitly knob-agnostic. They run the same pass regardless of dial.
Motion tiers
/ui-craft:animate behaves differently per MOTION_INTENSITY band:
- 1–3 — hover states only; modal enter and exit if essential. No scroll reveals, no stagger.
- 4–7 — reveals on scroll, stagger on lists, page-level transitions if the stack supports it.
- 8+ — loads
references/stack.mdfor Motion / GSAP / Three.js patterns, but only if you opted into a stack during Discovery. Allows magnetic cursors, scroll-linked scenes, WebGL elements.
Rung 2 · Persist
Three commands. What they write outlives the session — every future run reads it before touching a pixel.
| Command | One-liner | Example prompt | Relevant knobs |
|---|---|---|---|
/ui-craft:brief |
Write or update the durable design brief at .ui-craft/brief.md — 5 required sections plus the principles workshop. Run before any net-new project. |
“write a brief for this product” | knob-agnostic |
/ui-craft:tokens |
Audit or establish the 3-layer token spine. Light and dark both intentionally crafted, never inverted. | “audit the tokens” / “establish tokens” | knob-agnostic |
/ui-craft:remember |
Record a design constraint learned from a correction, so the same mistake cannot come back. | “remember: never gradients on the hero here” | knob-agnostic |
More depth: Brief, Tokens, Design memory.
Rung 3 · Enforce
One command, and it is a gate rather than a pass.
| Command | One-liner | Example prompt | Relevant knobs |
|---|---|---|---|
/ui-craft:finalize |
Pre-ship gate. Runs the detector, the brief and token check, the 10-pass finish bar, and the feedback-hierarchy filter. Output only — no auto-fix. | “finalize this surface” | CRAFT_LEVEL ≤ 6 runs only load-bearing passes; explicit invocation overrides |
/finalize is gated on the brief existing, which is why rung 2 comes first. The rest of rung 3 is not
commands — it is the review agents, the MCP gates, the
score, and ui-craft-detect in CI.
Express lane
| Command | One-liner | Example prompt | Relevant knobs |
|---|---|---|---|
/sddesign |
Walks rungs 1 to 3 in one guided run — brief → tokens → shape → craft → converge → ship. Writes .ui-craft/spec.md. |
“sddesign a billing dashboard” | all three |
Not a fifth rung. Use it when a surface is big enough to deserve a spec, and use the individual rungs for everything else. See /sddesign pipeline.
Invocation surfaces
Same command, different invocation per harness:
Claude Code /ui-craft:polish
Codex "polish this page" (matches ui-craft-polish sub-skill)
Cursor "polish this page" (matches ui-craft-polish sub-skill)
Gemini "polish this page" (matches ui-craft-polish sub-skill)
OpenCode "polish this page" (matches ui-craft-polish sub-skill)The materialization is done by scripts/sync-mirrors.mjs (npm run sync). Every command in commands/ becomes its
own peer skill with dedicated frontmatter in each non-Claude harness mirror.
Source files
Every command ships as a single markdown file with YAML frontmatter. Read the source to see exactly what
context each one loads and how it routes:
commands/ in the ui-craft repo.
Spotted something out of date? Open an issue on GitHub →