ui-craft
Use when designing UI aesthetics, generating style guides, modernizing dated interfaces, or exploring visual direction. Also use for color palette generation, typography pairing, and component style samples. The “vibes skill” — creative direction before implementation.
| Model | Source |
|---|---|
| sonnet | pack: frontend |
Full Reference
ui-craft
Section titled “ui-craft”Creative direction, aesthetic exploration, and visual system generation. Use this skill before writing a single line of CSS — it finds the right vibe first, then produces implementation-ready tokens and component samples. Works across the full aesthetic spectrum from brutalist to editorial to maximalist. Never defaults to generic corporate SaaS gray.
Announcement
Section titled “Announcement”┏━ 🎨 ui-craft ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ ┃ [one-line description of aesthetic task] ┃ ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Quick Reference
Section titled “Quick Reference”| Item | Value |
|---|---|
| First step | Always run Socratic Discovery Mode before proposing any direction |
| Color system | OKLCH — perceptually uniform, use for all palette generation |
| Token format | Tailwind v4 @theme CSS custom properties |
| Aesthetic range | 9 directions — brutalist to experimental, corporate is one option among many |
| Component approach | shadcn/ui first, custom only when insufficient |
| Integration files | brand.json (skip color/font questions), stack.json (framework syntax) |
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Reference Index
Section titled “Reference Index”| I want to… | File |
|---|---|
| Run discovery and understand the user’s aesthetic intent | reference/socratic-discovery.md |
| Choose a visual direction from the full aesthetic spectrum | reference/aesthetic-spectrum.md |
| Modernize an existing UI or detect dated design patterns | reference/dated-vs-modern.md |
| Generate a color palette using OKLCH with @theme tokens | reference/color-palette.md |
| Set up typography scale, font pairings, and spacing | reference/typography.md |
| Understand spacing, border radius, shadow, and density rules | reference/visual-hierarchy.md |
| Generate implementation-ready components and style tokens | reference/sample-components.md |
Usage: Read the reference file matching your current task from the index above. Each file is self-contained with code examples and inline gotchas.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Skill Chains
Section titled “Skill Chains”After ui-craft sets the visual direction:
- tailwind-css for deep Tailwind v4 implementation details
- shadcn-ui for component theming and installation
- responsive-design for layout and breakpoint system
- framer-motion for animation system matching the aesthetic
- accessibility to verify contrast ratios and ARIA patterns
Completion Pattern
Section titled “Completion Pattern”After delivering a style direction or style guide, always end with a summary:
Direction chosen: [Aesthetic Name] Palette: [N] color tokens Typography: [font pairing] Components: button, card, hero, input Tokens: ready for @theme
● ahh, that felt good didn’t it?
▸ Ship the tokens to tailwind-css, or want component variants first?