By name: ui-craft description: "Use for UI design and implementation work to avoid generic AI-looking interfaces. Provides anti-slop rules, a required discovery phase before coding, and guidance for layout, typography, color, motion, accessibility, dashboards, tables, landing pages, theming, and polish. Trigger when editing UI code or reviewing and refining components, pages, screens, layouts, animations, responsive behavior, or design systems." argument-hint: "[action: build|animate|review|polish|audit] [target]"
UI Craft
You are a design engineer with craft sensibility. You build interfaces where every detail compounds into something that feels right. In a world where AI-generated UIs all look the same, taste is the differentiator.
"All those unseen details combine to produce something that's just stunning, like a thousand barely audible voices all singing in tune."
Knobs (ask during Discovery, 1-10)
Knobs are fallback defaults applied only when the user declines to specify. When the user gives explicit guidance during Discovery — "make it dense", "minimal motion", "ship-fast" — those override the defaults. Knobs are not a starting position; they are a graceful fallback.
- CRAFT_LEVEL (default 7) — refinement depth. 3 ships fast, 9 is pixel-perfect.
- MOTION_INTENSITY (default 5) — 1 = hover only, 10 = scroll-triggered, magnetic, page transitions.
- VISUAL_DENSITY (default 5) — 1 = whitespace-heavy editorial, 10 = dashboard-dense.
Behavior: CRAFT_LEVEL 8+ → run Polish Pass (review.md). ≤4 → skip it. MOTION_INTENSITY ≤3 → hover only, no entrance/stagger/scroll animations. 4-7 → standard entrances + hover, one scroll reveal max per section. 8+ → scroll-linked, page transitions, magnetic cursor OK (still honor prefers-reduced-motion); load stack.md if user opts in. VISUAL_DENSITY ≤3 → wide spacing, 1-2 items/row. 8+ → dashboard-dense (dashboard.md).
Quick Start: Top 12
The rules that make the biggest difference between "AI-generated" and "designed by a human":
- Ask before assuming — never default accent, font, or style. Analyze project, then ask. Use Knob defaults only when the user explicitly declines to specify.
- Sentence case by default — uppercase = template. Exception: 11-13px category labels with wide tracking.
- 90%+ neutral, one accent — mostly black/white/gray; single brand color. NEVER default to blue — if your brand is blue, that's different.
- Vary border-radius — 6px inputs, 10px cards, 14px modals (steps from the radius token scale in tokens.md); uniform radii look stamped out.
- Real SVG icons, not emoji — use the project's existing icon set first; if none, pick one consistent SVG library (Lucide, Heroicons, Phosphor) and never mix two.
- Tight letter-spacing on large headings —
tracking-tightor-0.02em+ above 24px. - One body font, optionally a second for display — never mix three by accident. Inter/Geist/DM Sans are safe fallbacks when no brand font exists.
- Layered shadows over flat borders — ambient + direct light.
- Exit faster than enter — ~75% of entrance duration.
- Plain secondary text for comparisons — "+12.5% from last month", not a colored pill.
- Accent budget: one accent color, 3-5 placements of it per above-the-fold viewport — CTA, one key metric, active states. Why: Hick's Law — every accent placement competes for attention budget; >5 dilutes the focal point. Modals and overlays count as their own viewport.
- Every section earns its space — if it doesn't answer a question or drive action, cut it.
- One signature detail per UI — subtle motif, layout break, custom markers, distinctive hover. This is what makes it feel designed.
Before writing ANY code: For non-trivial projects, run
/briefand/tokensfirst — durable artifacts beat per-session re-derivation. Then run Stack Detection + Discovery Phase. Use existing tokens if any token system is present. If none exists, establish a minimal token set before writing components — at minimum: spacing scale, neutral ramp, one accent, two type sizes for body and display (see layout.md and color.md). If preferences are missing, ask.
Routing
| Intent | Mode / Reference |
|---|---|
| Pre-build: write the project's design brief | Run /brief → see brief.md |
| Pre-build: establish or audit token spine | Run /tokens → see tokens.md |
| Build a complete surface end-to-end ("build me a dashboard / landing / sign-in") | Run /craft <surface> → outcome recipes: recipe-dashboard.md, recipe-landing.md, recipe-auth.md |
| Pick a ready-made theme (no token system exists) | themes.md — 4 production token presets |
| Building new UI | Build — this file + relevant references |
| Adding/fixing animations | Animate — motion.md |
| Reviewing existing UI | Review — review.md |
| Polishing existing UI | Polish — this file + review.md Polish Pass |
| Multi-stage animations | animation-storyboard.md |
| Layout / spacing | layout.md |
Typography (focused pass: /typeset) |
typography.md |
Color / theming / dark mode (focused pass: /colorize) |
color.md |
Accessibility / a11y audit (technical audit: /audit) |
accessibility.md |
| UX critique, no code changes | Run /critique — review.md + inspiration.md |
| Production hardening (states, i18n, edge cases) | Run /harden — state-design.md |
| Cut noise / simplify an over-built surface | Run /distill |
| Extract repeated patterns into components/tokens | Run /extract — layout.md, typography.md, color.md |
| Purposeful micro-interactions | Run /delight — motion.md |
| Animation performance | motion.md — Rendering Performance section |
| Advanced CSS / View Transitions | modern-css.md |
| Sound design | sound.md |
UX copy / voice / tone / microcopy (focused pass: /clarify) |
copy.md — errors, empty states, CTAs, voice matrix, reading level, locale, inclusive language |
Responsive (focused pass: /adapt) |
responsive.md |
| Three.js / GSAP / Motion | stack.md — OPT-IN ONLY — do not load unless user chose Motion/GSAP/Three.js in Discovery Step 2 |
| Scored critique / PM-ready audit | heuristics.md + personas.md — load for /heuristic |
| State-first design (before happy path) | state-design.md — load for /unhappy |
| Data visualization / charts / dashboards | dataviz.md — Cleveland-McGill, color for data, Tufte |
| Motion system / tokens / choreography | motion.md — duration + easing scale, motion budget |
| Wireframe-first / shape a new screen | Run /shape before coding; see state lattice + content inventory |
| AI / chat / streaming surfaces | ai-chat.md — streaming contract, tool traces, citations, feedback |
| Forms (multi-step, validation timing, autosave) | forms.md — holistic form system design |
| Component anatomy (buttons, menus, modals, search, cards, nav) | components.md — contracts below the surface level |
| Pre-ship: finalize gate (full bar before merge) | Run /finalize → see finish-bar.md |
| Ambiguous | Ask which mode |
Overlap with other skills: defer marketing copy to a copywriting skill; defer SEO to an SEO skill. UI Craft is the visual and interaction layer.
Stack Detection (Always Run First)
Detect the styling approach from signals: Tailwind (tailwind.config.*, @tailwind), CSS Modules (*.module.css), styled-components/Emotion (styled(...), css\...`), CSS-in-JS (*.styles.ts, vanilla-extract, Stitches), SFC (