Jak używać
- Skopiuj polecenie instalacji i sprawdź źródła przed instalacją we własnym środowisku agenta.
- W oryginale sprawdź wymagane narzędzia, dane dostępowe i obsługiwane środowiska.
- Opisz dane wejściowe i oczekiwany rezultat; porównaj wynik ze źródłami.
npx skills add https://github.com/barmoshe/claude-creative-stack --skill ui-design-kitPrzed rozpoczęciem
- Instalacja nie obejmuje subskrypcji modelu, limitu API ani uprawnień do plików.
- Gwiazdki i instalacje pokazują aktywność, a nie niezależny test jakości lub bezpieczeństwa.
Oryginalny dokument Skill
Treść z repozytorium z zachowaniem nagłówków, przykładów, kodu, tabel, linków i obrazów.
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.
