사용 방법
- 설치 명령을 복사하고 자신의 에이전트 환경에 설치하기 전에 소스 패키지를 확인하세요.
- 필요한 도구, 인증 정보, 지원 환경은 원본 문서에서 확인하세요.
- 입력과 원하는 산출물을 설명하고 출처와 결과를 대조하세요.
npx skills add https://github.com/barmoshe/claude-creative-stack --skill ui-design-kit시작 전 확인
- 설치에는 모델 구독, API 한도, 파일 접근 권한이 포함되지 않습니다.
- 별점 수와 설치 수는 활동 지표이며 독립적인 품질·보안 검증이 아닙니다.
원본 Skill 문서
원본 저장소의 제목, 예시, 코드, 표, 링크, 이미지를 유지해 표시합니다.
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.
