Verwendung
- Installationsbefehl kopieren und das Quellpaket vor der Installation in der eigenen Agentenumgebung prüfen.
- Benötigte Werkzeuge, Zugangsdaten und Hosts im Original prüfen.
- Eingabe und gewünschtes Ergebnis beschreiben und die Ausgabe mit den Quellen abgleichen.
npx skills add https://github.com/barmoshe/claude-creative-stack --skill ui-design-kitVor dem Start
- Die Installation umfasst weder Modellabo noch API-Kontingent oder Dateizugriffsrechte.
- Sterne und Installationen zeigen Aktivität, keine unabhängige Qualitäts- oder Sicherheitsprüfung.
Originales Skill-Dokument
Aus dem Quell-Repository gerendert; Überschriften, Beispiele, Code, Tabellen, Links und Bilder bleiben erhalten.
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.
