Teo — the agent reads this page so you do not have to.Documentation
Reference for UI Craft — the skill, its knobs, variants, commands, 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
- 01 Getting started Install UI Craft in your AI coding agent, answer four discovery questions, and get non-generic interfaces from the next prompt. →
- 02 Skill anatomy How UI Craft is structured — the main skill, its 23 domain references, the 18 slash commands, and the 3 style variants. →
- 03 Style variants Three 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. →
- 04 Commands The 19 slash commands — each a focused pass that applies a single lens from the skill. →
- 05 Brief Durable design brief at `.ui-craft/brief.md` — anchors every design decision in the project across sessions. →
- 06 Tokens 3-layer token spine — primitive → semantic → component. Both light and dark intentionally crafted, not just inverted. →
- 07 Finish bar 10-pass finishing protocol with measurable criteria. The pre-ship gate that turns "done" into "ships with intent". →
- 08 Principles catalog 42 example design principles across 8 product categories — seed material for the /brief principles workshop. →
CLI
Reference
- 01 Heuristic critique Score your UI against Nielsen's 10 usability heuristics + 6 design laws, with impact framing for PMs. →
- 02 Persona walkthroughs Five archetypes for walking your UI through real users — first-timer, power, low-bandwidth, screen-reader, one-thumb. →
- 03 State-first design Every interactive surface has 7 states. Design the unhappy path first. →
- 04 Data visualization Cleveland-McGill perceptual hierarchy, chart selection, ColorBrewer palettes, Tufte principles. →
- 05 UX copy Voice, tone, reading level, terminology, inclusive language, locale-aware strings, error anatomy, CTAs, empty states. →
- 06 Motion Decision ladder, duration + easing token scales, choreography, motion budget, reduced-motion contract. →
- 07 AI / chat surfaces Framework-agnostic interaction patterns for streaming UIs, tool traces, citations, and generative UI. →
- 08 Forms Holistic form system design — validation timing, multi-step wizards, autosave, optimistic submit, and field-specific patterns. →
- 09 Recipe — SaaS Dashboard Build contract for a production SaaS dashboard — three named compositions, exact shell spec, component inventory, strict build order, and a 10-item acceptance bar. →
- 10 Theme Presets Four production-ready token stacks — Graphite, Porcelain, Carbon, Signal. Full OKLCH neutral ramps, accent + semantic colors, type, radius, shadows, motion. Both light and dark intentional. →
- 11 Component Contracts Anatomy rules for the workhorse components — buttons (including the destructive friction ladder), text links, icon labels, menus, modals, search, cards, and nav. →
- 12 Recipe — Landing Page Build 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. →
- 13 Recipe — 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 →