Mode d’emploi
- Copiez la commande et examinez le paquet avant de l’installer dans votre environnement agent.
- Consultez le document original pour les outils, identifiants et environnements requis.
- Décrivez les entrées et le livrable souhaité ; comparez la sortie aux sources.
npx skills add https://github.com/barmoshe/claude-creative-stack --skill ui-design-kitAvant de commencer
- L’installation n’inclut ni abonnement au modèle, ni quota API, ni accès aux fichiers.
- Étoiles et installations reflètent l’activité, pas un test indépendant de qualité ou de sécurité.
Document Skill original
Rendu depuis le dépôt source en conservant titres, exemples, code, tableaux, liens et images.
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.
