From 6hamtol-skills
DESIGN.md를 기반으로 Tailwind·shadcn·Radix UI 디자인 시스템을 실제 코드로 구현. 트리거 조건: "디자인 시스템 구현", "DESIGN.md 적용", "shadcn 셋업", "tailwind 토큰 적용", "implement design system", "디자인 시스템 코드로", "@DESIGN.md 기반으로". NOT for: DESIGN.md 자체 작성(→ create-design-md 스킬 사용), 컴포넌트 한두 개만 추가, 기존 디자인 시스템 마이그레이션.
How this skill is triggered — by the user, by Claude, or both
Slash command
/6hamtol-skills:implement-design-systemThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
DESIGN.md의 디자인 토큰을 읽어 Tailwind config, globals.css, shadcn 컴포넌트까지 일괄 생성한다.
DESIGN.md의 디자인 토큰을 읽어 Tailwind config, globals.css, shadcn 컴포넌트까지 일괄 생성한다.
DESIGN.md 탐색./create-design-md 스킬로 파일을 생성해 주세요."/create-design-md first to generate the file."--- 블록)를 추출해 colors, typography, rounded, spacing, components 토큰을 수집한다.references/token-mapping.md를 따른다.다음 항목을 순서대로 확인하고 결과를 사용자에게 한 줄로 요약한다.
프레임워크 감지 (package.json의 dependencies/devDependencies):
next 키 존재 → Next.js (App Router: app/, Pages: pages/ 구분)vite 키 존재 → Vite + Reactreact-scripts 키 존재 → CRA@remix-run/react 존재 → Remix패키지 매니저 감지 (lockfile 우선):
pnpm-lock.yaml → pnpmyarn.lock → yarnbun.lockb → bun기존 파일 존재 여부 체크:
tailwind.config.{js,ts} → 있으면 머지 모드app/globals.css 또는 src/index.css → CSS 변수 삽입 위치 결정components.json → 있으면 shadcn 이미 초기화됨 (init 건너뜀)AskUserQuestion기본 스택:
tailwindcss shadcn/ui @radix-ui/* lucide-react
class-variance-authority sonner overlay-kit
이미 package.json에 있는 항목은 "(이미 설치됨)"으로 표시. 세 가지 옵션으로 확인:
스택 결정 결과에 따라 이후 단계에서:
sonner 제외 → Toast 컴포넌트 생성 건너뜀overlay-kit 제외 → Dialog OverlayProvider 와이어링 건너뜀AskUserQuestion (multiSelect, 카테고리 단위)각 카테고리를 하나씩 AskUserQuestion(multiSelect)으로 확인한다. 기본값은 전체 선택 (Domain-specific 카테고리 제외).
Form & Input
Button Input Textarea Label Select Checkbox RadioGroup Switch Combobox MultiCombobox DatePicker TimePicker Calendar
Overlay & Navigation
Tabs Tooltip Popover DropdownMenu Dialog Drawer ScrollArea Separator Breadcrumb StepIndicator
Display & Feedback
Badge Tag Callout Card Spinner Skeleton Progress EmptyState Stat DefinitionList IndicatorDot Toast
Layout & Composite
Topbar Sidebar StickyActionBar DataTable
Domain-specific (기본: 미선택)
AiChat — 사용자가 명시할 때만 포함. 추가 도메인 컴포넌트 이름도 자유 입력.
설치할 패키지 목록을 한 화면에 보여준 뒤 사용자 confirm을 받는다. 선택한 스택 + 선택한 컴포넌트 기반으로 최소 필요 패키지만 포함.
감지된 패키지 매니저로 실행:
# 예시 (pnpm 감지 시)
pnpm add tailwindcss @radix-ui/react-* class-variance-authority lucide-react sonner overlay-kit
shadcn 초기화:
npx shadcn@latest init
components.json이 이미 있으면 건너뜀.
실패 시: 명령어를 출력하고 "직접 실행 후 재개할 수 있습니다"라고 안내.
references/token-mapping.md의 변환표를 따라 DESIGN.md 토큰을 코드로 변환한다.
tailwind.config.{js,ts} 패치:
theme.extend.colors — DESIGN.md colors.* 토큰을 CSS 변수 참조로 추가theme.extend.fontFamily — typography.*.fontFamily 수집 (중복 제거)theme.extend.fontSize — typography.* 레벨별 [size, { lineHeight, letterSpacing }]theme.extend.borderRadius — rounded.*theme.extend.spacing — spacing.*기존 파일이 있으면 덮어쓰지 않고 머지. 충돌하는 키(같은 이름의 기존 토큰)가 있으면 사용자에게 나열 후 결정 요청(유지 / 덮어쓰기).
globals.css (또는 src/index.css) 패치:
shadcn 표준 CSS 변수 블록을 DESIGN.md 색상으로 교체:
:root {
--background: <surface or neutral>;
--foreground: <on-surface>;
--primary: <primary>;
--primary-foreground: <on-primary or contrast>;
--secondary: <secondary>;
--secondary-foreground: <on-secondary or contrast>;
--destructive: <error>;
--border: <neutral-variant>;
--input: <neutral-variant>;
--ring: <primary>;
--radius: <rounded.md>;
}
DESIGN.md에 다크 팔레트가 정의된 경우에만 .dark { ... } 블록 추가.
사용자가 선택한 컴포넌트를 순서대로 처리.
shadcn registry에 있는 컴포넌트 (references/component-catalog.md 참고):
npx shadcn@latest add button input textarea label select checkbox radio-group switch
npx shadcn@latest add tabs tooltip popover dropdown-menu dialog drawer scroll-area separator breadcrumb
npx shadcn@latest add badge card skeleton progress calendar
npx shadcn@latest add data-table
각 추가 후 생성된 파일에서 cva variant의 색상·radius·font 값을 DESIGN.md 토큰 참조 클래스(bg-primary, text-foreground, rounded-[var(--radius)] 등)로 교체.
shadcn registry에 없는 컴포넌트 — references/component-catalog.md의 코드 스켈레톤으로 components/ui/<name>.tsx를 직접 생성:
Combobox, MultiComboboxDatePicker, TimePickerStepIndicatorEmptyState, Stat, DefinitionList, IndicatorDotTopbar, Sidebar, StickyActionBarTag (Badge variant 확장), Callout (Alert variant 확장)SpinnerToast (sonner <Toaster> 래퍼)AiChat (선택 시)컴포넌트 파일 출력 경로는 components.json의 aliases.components 값 우선. 없으면 components/ui/.
Next.js App Router (app/layout.tsx):
sonner 선택 → <Toaster /> 추가 (client component 내부에 위치)overlay-kit 선택 → <OverlayProvider> 로 children 감싸기Next.js Pages Router (pages/_app.tsx), Vite (main.tsx), Remix (app/root.tsx):
이미 Provider가 설정돼 있으면 건너뜀 (코드 내 OverlayProvider / Toaster 문자열로 감지).
다음 Self-check 항목을 모두 통과한 후 사용자에게 완료 메시지 출력.
변경된 파일 목록(생성/수정)을 요약 표시. 다음 명령 안내:
# 타입 체크
pnpm typecheck # 또는 tsc --noEmit
# 개발 서버
pnpm dev
데모 페이지 생성 제안 (원할 때만):
app/(playground)/design-system/page.tsxsrc/pages/design-system.tsxreferences/component-catalog.md 스켈레톤으로 생성했는가| ❌ Avoid | ✅ Instead |
|---|---|
| DESIGN.md 없이 진행 | 즉시 중단 + create-design-md 안내 |
| 기본 스택 확인 없이 install | 스택 목록 보여주고 사용자 confirm 후에만 |
| 카테고리 없이 25개 컴포넌트를 한 번에 묻기 | 카테고리별 multiSelect로 분할 |
기존 tailwind.config 덮어쓰기 | 머지 + 충돌 키 사용자 결정 |
shadcn 기본 색상(hsl(222.2 47.4% 11.2%)) 그대로 | DESIGN.md 색상 토큰으로 CSS 변수 교체 |
npm·pnpm 혼용 | lockfile 감지 결과로 통일 |
| Domain-specific 컴포넌트 기본 선택 | AiChat 등은 기본 미선택, 명시 시에만 포함 |
| frontmatter 없는 DESIGN.md로 계속 진행 | 파싱 실패 즉시 중단 + 안내 |
references/token-mapping.md — DESIGN.md YAML → tailwind.config + globals.css 변환표references/component-catalog.md — 컴포넌트별 shadcn 명령, 커스텀 스켈레톤, 토큰 패치 노트Creates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.
npx claudepluginhub 6hamtol/skills