How to use
- Copy the installation command and review the source package before installing it in your own agent environment.
- Check the source document for required tools, credentials and supported hosts.
- Describe your input and desired deliverable; review the output against the source material.
npx skills add https://github.com/barmoshe/claude-creative-stack --skill ui-design-kitBefore you start
- Installation does not include a model subscription, API allowance or permission to access your files.
- Repository stars and installation counts describe activity, not an independent quality or security test.
Original skill document
Rendered from the source repository. Headings, examples, code, tables, links, and referenced images are preserved.
UI Design Kit
When to trigger
- "Build me a design system"
- "UI kit for my project"
- "Component library"
- "shadcn theme"
- "Set up tokens + primitives"
Stack
- Tokens from
palette-generator— oklch, light + dark sets. - Tailwind v4 (CSS-first config when possible) with core utilities only. No arbitrary values.
- shadcn/ui component primitives where they exist in the artifact runtime whitelist.
- React functional components with hooks. Default export for the showcase.
- Dark mode via
.darkclass toggled from React state (nolocalStoragein artifact).
Components to ship
| Component | Variants | Keyboard |
|---|---|---|
| Button | default, outline, ghost, optional icon | Enter/Space |
| Input | default + error state | native |
| Textarea | auto-grow optional | native |
| Select | single-select | Arrow + Enter |
| Checkbox | with label | Space |
| Switch | with label | Space |
| Card | header + content + footer | — |
| Badge | default, success, warn, danger | — |
| Dialog | trap focus, ESC to close | Tab cycles, ESC |
| Tabs | horizontal | Arrow keys |
Token + scale decisions
- Radius scale:
0/0.25rem/0.5rem/0.75rem/9999rem— pick one family (rounded-mdetc.) and commit. - Type scale: 12 / 14 / 16 / 18 / 20 / 24 / 32 / 48 — map to Tailwind core
text-xs→text-5xl. - Spacing scale: Tailwind default (4px base).
- Density: comfortable default (
py-2 px-3on inputs). Compact variant reduces topy-1.5 px-2.5.
Accessibility checklist (enforce)
:focus-visiblering on every interactive element.- Dialog traps focus + returns focus to trigger on close.
- Labels are
<label htmlFor>-associated, not placeholder-only. - Color is not the only indicator of error / success — include icon or text.
- Contrast ratios verified in token output (see
palette-generator).
Output shape
- Tokens —
:root+.darkCSS blocks. - Type + spacing + radius scales — short tables.
- Full JSX artifact showcasing all 10 components, default-exported, under ~300 lines.
- Extension notes — 3 bullets on adding a new component without breaking the theme.
Delegation
- If
anthropics/skillscanvas-designortheme-factoryare installed, call those for theme scaffolding; this skill adds the component showcase layer on top. - If
frontend-designskill is installed, use its non-generic layout guidance for the demo page.
Further reading
knowledge/05-graphics-design.md— design trends, typography, color.prompts/generate-ui-kit.md— ready-to-paste prompt.skills/palette-generator/SKILL.md— token generation rules.
