Teo — the agent reads this page so you do not have to.Documentation
Reference for UI Craft — the skill, its knobs, variants, commands, the CLI installer, MCP quality gates, review agents, and the detect CLI.
Everything here is derived from the source of truth in the ui-craft repo. Start with Getting started if you haven't installed the skill yet.
Skill
- 01Getting startedInstall UI Craft in your AI coding agent, answer four discovery questions, and get non-generic interfaces from the next prompt.→
- 02Skill anatomyHow UI Craft is structured — the main skill, its 31 domain references, the 22 slash commands, and the 3 style variants.→
- 03Style variantsThree opt-in sibling skills that pre-commit to a style and lock the knobs. Plus two style presets (playful, brutalist) as examples, not full skills.→
- 04CommandsThe 22 slash commands — a front door, single-lens passes, and the spec-driven pipeline.→
- 05BriefDurable design brief at `.ui-craft/brief.md` — anchors every design decision in the project across sessions.→
- 06Tokens3-layer token spine — primitive → semantic → component. Both light and dark intentionally crafted, not just inverted.→
- 07Finish bar10-pass finishing protocol with measurable criteria. The pre-ship gate that turns "done" into "ships with intent".→
- 08Principles catalog42 example design principles across 8 product categories — seed material for the /brief principles workshop.→
- 09Design memoryThe typed .ui-craft/ directory — durable, project-local design decisions plus self-correction that the skill reads at Discovery.→
- 10/sddesign pipelineThe full spec-driven design pipeline — brief → tokens → shape → craft → converge → ship in one guided run. Writes .ui-craft/spec.md.→
- 11Verify-team agentsTwo read-only Claude Code plugin agents — design-reviewer + a11y-auditor — that run in a fresh context for independent design + accessibility review.→
CLI
- 01CLI referenceThe ui-craft binary detects your AI coding harness and wires the full system — skill, commands, MCP gates, review agents, and design memory — in a single interactive pass.→
- 02ui-craft-detectZero-dependency static scanner for AI-generated UI anti-patterns. Rules mirror the Anti-Slop Test in the skill. Usable as a CI gate.→
- 03MCP serverui-craft-mcp exposes four deterministic design-quality tools over the Model Context Protocol — anti-slop, token lint, acceptance bar, and the composite score.→
- 04Design-quality scoreUICraftScore — a deterministic 0-100 composite grade from anti-slop, token discipline, and a11y. Plus UsabilityScore, the judged companion.→
Reference
- 01Heuristic critiqueScore your UI against Nielsen's 10 usability heuristics + 6 design laws, with impact framing for PMs.→
- 02Persona walkthroughsFive archetypes for walking your UI through real users — first-timer, power, low-bandwidth, screen-reader, one-thumb.→
- 03State-first designEvery interactive surface has 7 states. Design the unhappy path first.→
- 04Data visualizationCleveland-McGill perceptual hierarchy, chart selection, ColorBrewer palettes, Tufte principles.→
- 05UX copyVoice, tone, reading level, terminology, inclusive language, locale-aware strings, error anatomy, CTAs, empty states.→
- 06MotionDecision ladder, duration + easing token scales, choreography, motion budget, reduced-motion contract.→
- 07AI / chat surfacesFramework-agnostic interaction patterns for streaming UIs, tool traces, citations, and generative UI.→
- 08FormsHolistic form system design — validation timing, multi-step wizards, autosave, optimistic submit, and field-specific patterns.→
- 09Recipe — SaaS DashboardBuild contract for a production SaaS dashboard — three named compositions, exact shell spec, component inventory, strict build order, and a 10-item acceptance bar.→
- 10Theme PresetsFour production-ready token stacks — Graphite, Porcelain, Carbon, Signal. Full OKLCH neutral ramps, accent + semantic colors, type, radius, shadows, motion. Both light and dark intentional.→
- 11Component ContractsAnatomy rules for the workhorse components — buttons (including the destructive friction ladder), text links, icon labels, menus, modals, search, cards, and nav.→
- 12Recipe — Landing PageBuild contract for a marketing landing page — three named compositions with ASCII layouts, section grammar, pricing block rules, craft constraints, and a 10-item acceptance bar.→
- 13Recipe — Auth (Sign in / Sign up)Build contract for authentication surfaces — two named compositions, form contract, sign-up deltas, and an 8-item acceptance bar.→
Spotted something out of date? Open an issue on GitHub →