Getting started

UI Craft is an Agent Skill. It does not install into your project — it installs into your coding agent. Once it’s there, any prompt that touches UI routes through the skill before code gets written.

There is one thing to understand, and it’s a ladder.

The ladder

Four rungs. Each one is a real jump in what you get, and each costs a little more effort than the last. You only climb when you want the next thing. Rung 0 is where everybody starts, and plenty of people never leave it.

                        ┌──── 3 · ENFORCE ──── wire once
                  ┌──── 2 · PERSIST ──── write once
            ┌──── 1 · DIRECT ──── one command
      0 · ASK ──── no effort

That’s the whole product. Everything else in these docs is depth on one of those four rungs.

Install

One command, every harness. It detects Claude Code, Cursor, Codex, Gemini, and OpenCode and wires each into its native config — skill, commands, MCP gates, review agents, design memory.

macOS and Linux

curl -fsSL https://skills.smoothui.dev/install | bash

Windows

irm https://skills.smoothui.dev/install.ps1 | iex

Then, once:

ui-craft install

No Node required at install time, and checksums are verified. Run ui-craft with no arguments for the interactive hub.

Prefer Homebrew, Scoop, the Claude Code plugin, npx skills add, or a git submodule? All of them are in Install options, with a table of which rungs each one gives you.

Rung 0 · Ask

Nothing to learn. Open your agent and ask for UI the way you always have.

Build a pricing page for a developer tool.

Paste that. What happens next is the whole point of rung 0:

1. Discovery runs first. Before writing a line, the skill reads your project for design decisions that already exist — CSS variables, Tailwind config, font imports, component themes, accent colors. If you have a design system, it uses yours.
2. If there’s nothing to find, it asks four questions. Style; accent color (never defaults to blue); font; animation stack, if any. Answer once per project.
3. Then it builds in one pass — layout, type, color, spacing, motion, and accessibility decided together, not one concern at a time.

You get a pricing page that doesn’t look like every other AI pricing page. No flag, no prefix, no command. That is rung 0 in full.

Not sure where you are?

/start

/start is the front door. It looks at your project, tells you which rung you’re on, and names the one command worth running next. If you read nothing else on this page, run that.

Rung 1 · Direct

Climb here the moment you want to aim a pass instead of describing it. One command, one lens, one surface.

/craft dashboard        # build a whole surface: tokens, shell, states, keyboard, finish
/critique               # UX critique, no code changes
/audit                  # accessibility, performance, responsive findings
/polish                 # the compound-details pass
/animate                # motion with the right easing, duration, and origin

/craft asks three quick questions (persona, theme, density), picks a composition, and builds in one pass — the acceptance bar has to pass before it reports done. The other commands each do one thing well. All 25, with what each one loads, are in Commands.

Rung 1 is still session-local: close the session and the agent forgets your choices. That’s what rung 2 fixes.

Rung 2 · Persist

Climb here when you catch yourself re-explaining the same design decisions in every new session.

/brief                  # product purpose, primary user, 3-5 ranked principles, out of scope
/tokens                 # the 3-layer token spine, light and dark both crafted
/remember               # capture a correction so it never happens twice

/brief lands at .ui-craft/brief.md. Tokens land wherever your stack keeps them — globals.css for Tailwind, theme.ts for CSS-in-JS, tokens.css for vanilla, design-tokens.json for cross-platform. Both are read by every future session, so the decisions stop being something you carry in your head. See Brief, Tokens, and Design memory.

Rung 3 · Enforce

Climb here when “it looks good” needs to survive other people, other agents, and next month.

/finalize               # the 10-pass finish bar, gated on the brief existing
ui-craft-detect src     # 43 deterministic rules, zero dependencies, CI-ready

Plus two read-only review agents that run in a fresh context, eight MCP tools your agent can call mid-conversation, and a deterministic 0–100 score you can fail a build on. This is the rung that turns taste into something you can put in a pull request.

The express lane

/sddesign is not a fifth rung. It’s rungs 1 to 3 walked in a single guided run — brief, tokens, shape, craft, converge, ship — for one big surface. Reach for it when a surface is large enough to deserve a spec, and use the individual rungs for everything else. See /sddesign pipeline.

Optional: the three dials

You do not need these to get value, which is why they’re at the bottom of the page. The skill sets them during Discovery, and they change behavior — not just tone.

What the thresholds gate:

• CRAFT_LEVEL at 4 or below turns /polish into a no-op.
• MOTION_INTENSITY at 3 or below limits motion to hover plus modal enter and exit.
• MOTION_INTENSITY at 8 or above loads the 442-line motion-stack reference — but only if you opted into a motion stack during Discovery.
• VISUAL_DENSITY at 8 or above makes /adapt produce tight 4/8px grid layouts.

Where to go next

• Staying on rung 0? Nothing to read. Go ask for a screen.
• Ready for rung 1 — Commands, all 25 grouped by rung.
• Want a style locked in — Style variants.
• Curious how it decides — Skill anatomy and the How it thinks section in the sidebar. Those pages are what the agent loads for you. You never have to read them.

Spotted something out of date? Open an issue on GitHub →