timelabs 0.1.0 → 0.1.1

package/skills/web-design/claude-code/gen/gen-tokens/01-generate-process.md

@@ -0,0 +1,318 @@
+# 생성 프로세스
+
+
+### 1. 스타일 해석
+
+`config.style`로 `defs/styles.md`에서 해당 스타일의 색상 정의를 가져옵니다.
+
+```
+style = styles[config.style]
+primary = style.primary
+background = style.background
+accent = style.accent
+```
+
+#### 경쟁사 색상 차별화 체크 (리서치 데이터 있을 때)
+
+```
+if config.research.enabled && config.research.ux.color_palettes exists:
+  competitor_primaries = research.ux.color_palettes.map(p => p.colors[0])
+
+  if style.primary와 competitor_primaries 중 유사한 색상 존재:
+    → "⚠️ 경쟁사 색상 겹침 경고: {competitor_name}의 primary color({color})와 유사합니다."
+    → "💡 차별화 제안: accent 색상을 강화하거나, primary를 {shifted_color}로 조정 고려"
+
+  # 토큰 생성 시 참고 정보로 주석 포함
+  → base.json 또는 variables.css에 주석 추가:
+    "/* 경쟁사 참고: {competitor_name}: {color} - 차별화 확인 완료 */"
+```
+
+> **리서치 미실행 시**: 차별화 체크를 건너뛰고 기존 방식으로 토큰을 생성합니다.
+
+### 2. 토큰 범위별 데이터 생성
+
+`config.token_scope[]`에 포함된 항목만 생성합니다.
+
+#### Colors (`colors` in scope)
+
+> 값 정의: defs/tokens.md § 1 참조
+
+**gen 고유 로직 — tint/shade 생성 함수:**
+
+```
+primary 스케일 생성:
+  50~400: tint(primary, 95%/90%/75%/50%/25%)
+  500: {primary} 원본
+  600~900: shade(primary, 10%/25%/40%/60%)
+
+secondary, accent도 동일 패턴 적용
+
+background 파생:
+  card: lighten(background, 5%)
+  elevated: lighten(background, 10%)
+
+text 파생:
+  primary: contrast(background)
+  secondary: opacity(contrast(background), 0.7)
+  disabled: opacity(contrast(background), 0.4)
+
+border 파생:
+  DEFAULT: opacity(contrast(background), 0.15)
+  strong: opacity(contrast(background), 0.3)
+```
+
+#### Typography (`typography` in scope)
+
+> 값 정의: defs/tokens.md § 2 참조
+
+#### Semantic Colors (`colors` in scope — 항상 함께 생성)
+
+primitive 토큰 위에 **시맨틱 레이어**를 추가합니다. UI 컴포넌트는 primitive 대신 semantic 토큰을 참조합니다.
+
+```json
+{
+  "semantic": {
+    "bg": {
+      "primary": "{color.background.DEFAULT}",
+      "secondary": "{color.background.card}",
+      "tertiary": "{color.background.elevated}"
+    },
+    "text": {
+      "primary": "{color.text.primary}",
+      "secondary": "{color.text.secondary}",
+      "disabled": "{color.text.disabled}"
+    },
+    "border": {
+      "default": "{color.border.DEFAULT}",
+      "focus": "{color.primary.500}"
+    },
+    "interactive": {
+      "primary": "{color.primary.500}",
+      "primary-hover": "{color.primary.600}",
+      "primary-active": "{color.primary.700}",
+      "secondary": "{color.accent 또는 #6C757D}",
+      "danger": "{color.status.error}",
+      "danger-hover": "{darken(color.status.error, 15%)}"
+    },
+    "feedback": {
+      "success": "{color.status.success}",
+      "warning": "{color.status.warning}",
+      "error": "{color.status.error}",
+      "info": "{color.status.info}"
+    }
+  }
+}
+```
+
+> **다크/라이트 분기**: `config.theme == "system"` 시 semantic 값이 테마별로 다르게 매핑됩니다. CSS Variables 출력 시 `:root` (light)와 `[data-theme="dark"]` 각각 생성합니다.
+
+#### Animations (`animations` in scope)
+
+> 값 정의: defs/tokens.md § 6 참조
+> 참조: `defs/styles.md`의 **Animation** 필드 + 커스텀 애니메이션 키프레임 레퍼런스
+
+`config.style`에 해당하는 스타일의 커스텀 키프레임을 생성합니다.
+
+**스타일별 키프레임 매핑:**
+
+| 스타일 계열 | 포함 키프레임 |
+|------------|-------------|
+| A, R, V, Z (다크/글로우) | `neon-flicker`, `neon-blink`, `twinkle`, `glitch` |
+| E, G, S, W (부유/자연) | `float`, `float-gentle`, `sway`, `breathe` |
+| B, H, O (그라데이션) | `gradient-flow`, `shimmer` |
+| F, L, N (인터랙티브) | `bounce-in`, `wiggle`, `shake` |
+| T (파이어) | `flame-flicker` |
+| X (아트데코) | `gold-sweep` |
+| D, I, J, K, M, Q, U (미니멀/기능) | 공통 키프레임만 |
+
+#### Interactions (`interactions` in scope)
+
+> 값 정의: defs/tokens.md § 6b 참조
+> 참조: `defs/styles.md`의 **Hover / Shadow / Border / BG Pattern / Decoration / Gradient** 필드
+
+#### Backgrounds (`backgrounds` in scope)
+
+> 값 정의: defs/tokens.md § 8 참조
+> 참조: `defs/styles.md`의 **BG_Pattern / Gradient / Image_Interaction** 필드
+
+#### Icons (`icons` in scope)
+
+> 값 정의: defs/tokens.md § 9 참조
+> 참조: `defs/icon-usage.md`
+
+#### Visual Interactions (`visual_interactions` in scope)
+
+> 값 정의: defs/tokens.md § 10 참조
+> 참조: `defs/styles.md`의 **Image_Interaction** 필드
+
+#### Dividers (`dividers` in scope)
+
+> 값 정의: defs/tokens.md § 11 참조
+> 참조: `defs/styles.md`의 **Section_Divider** 필드
+
+#### Illustrations (`illustrations` in scope)
+
+> 값 정의: defs/tokens.md § 12 참조
+> 참조: `defs/illustration-guide.md`
+
+#### 나머지 범위
+
+`defs/tokens.md`의 정의에 따라 생성합니다.
+
+### 3. 테마 적용
+
+#### `config.theme == "dark"`
+- background → 어두운 톤 사용
+- text.primary → 밝은 색상
+
+#### `config.theme == "light"`
+- background → 밝은 톤 사용
+- text.primary → 어두운 색상
+
+#### `config.theme == "system"`
+- light/dark 두 세트 모두 생성
+- CSS Variables 사용 시 `[data-theme]` 분기
+
+### 4. 형식별 출력
+
+> 기본 형식 예시: defs/tokens.md § 토큰 형식 참조
+
+#### Tailwind Config (`tailwind`)
+
+생성 위치: `design/tokens/tailwind.config.js`
+→ 생성된 토큰 데이터를 `theme.extend` 하위에 매핑
+
+#### JSON + CSS Variables (`css_variables`)
+
+생성 위치: `design/tokens/base.json` + `design/tokens/variables.css`
+→ `config.theme == "system"` 시 `:root` (light) + `[data-theme="dark"]` 분기 생성
+
+#### Style Dictionary + W3C DTCG (`style_dictionary`)
+
+**W3C DTCG 표준 포맷** (2025.10 안정 버전)을 사용합니다. `$value`, `$type`, `$description` 프리픽스, 파일 확장자 `.tokens.json`.
+
+> 기본 DTCG 구조: defs/tokens.md § 4 (Style Dictionary) 참조
+
+**gen 고유 로직 — DTCG 변환:**
+- 각 토큰을 `{ "$value": ..., "$type": ..., "$description": ... }` 구조로 래핑
+- primitive 토큰과 semantic 토큰을 별도 `.tokens.json` 파일로 분리
+- `sd.config.mjs`: Style Dictionary 4.0 ESM 설정 자동 생성 (source + platforms)
+
+> **⚠️ 모바일 앱 프로젝트 (config.project_type == "app"):**
+> `config.frontend`가 `react_native`인 경우 `reactNative` 플랫폼을 추가합니다.
+> `config.frontend`가 `flutter`인 경우 `flutter` 플랫폼을 추가합니다.
+
+```json
+// config.frontend == "react_native" 시 추가되는 플랫폼:
+{
+  "platforms": {
+    "css": { "transformGroup": "css", "buildPath": "build/css/" },
+    "ios": { "transformGroup": "ios-swift", "buildPath": "build/ios/" },
+    "android": { "transformGroup": "android", "buildPath": "build/android/" },
+    "reactNative": {
+      "transformGroup": "react-native",
+      "buildPath": "build/rn/",
+      "files": [
+        {
+          "destination": "tokens.ts",
+          "format": "javascript/es6"
+        }
+      ]
+    }
+  }
+}
+```
+
+```json
+// config.frontend == "flutter" 시 추가되는 플랫폼:
+{
+  "platforms": {
+    "css": { "transformGroup": "css", "buildPath": "build/css/" },
+    "ios": { "transformGroup": "ios-swift", "buildPath": "build/ios/" },
+    "android": { "transformGroup": "android", "buildPath": "build/android/" },
+    "flutter": {
+      "transformGroup": "flutter",
+      "buildPath": "build/flutter/",
+      "files": [
+        {
+          "destination": "tokens.dart",
+          "format": "flutter/class.dart"
+        }
+      ]
+    }
+  }
+}
+```
+
+#### JSON Only (`json`)
+
+생성 위치: `design/tokens/base.json`
+→ 전체 토큰을 단일 JSON으로 출력
+
+#### 비디오용 JS 토큰 내보내기 (project_type == "video")
+
+> 조건: `config.project_type == "video"`
+
+비디오 프로젝트는 CSS가 아닌 JS/TS에서 직접 토큰을 참조합니다.
+`design/tokens/base.json` 외에 `src/lib/colors.ts`로 JS 토큰을 내보냅니다.
+
+```typescript
+// src/lib/colors.ts (자동 생성)
+// 디자인 토큰 - 비디오 프로젝트용 JS 내보내기
+// design/tokens/base.json 기반 자동 생성
+
+export const colors = {
+  primary: "{style.primary}",
+  primaryHover: "{darken(primary, 15%)}",
+  secondary: "{style.accent}",
+  background: "{style.background}",
+  text: {
+    primary: "{contrast(background)}",
+    secondary: "{opacity(contrast(background), 0.7)}",
+    disabled: "{opacity(contrast(background), 0.4)}",
+  },
+  status: {
+    success: "#10b981",
+    warning: "#f59e0b",
+    error: "#ef4444",
+    info: "#3b82f6",
+  },
+} as const;
+
+export const typography = {
+  fontFamily: {
+    sans: "Inter, system-ui, sans-serif",
+    mono: "JetBrains Mono, monospace",
+  },
+  fontSize: {
+    display: 64,
+    h1: 48,
+    h2: 36,
+    h3: 28,
+    body: 20,
+    caption: 16,
+  },
+  fontWeight: {
+    regular: "400",
+    medium: "500",
+    semibold: "600",
+    bold: "700",
+  },
+} as const;
+
+export const animations = {
+  duration: {
+    fast: 10,   // 프레임 단위
+    normal: 20,
+    slow: 30,
+    slower: 45,
+  },
+} as const;
+```
+
+**생성 규칙:**
+- `config.style`에서 색상값 추출 → `colors` 객체 생성
+- 비디오에서는 `rem` 대신 `px` 사용 (고정 캔버스)
+- 애니메이션 duration은 프레임 단위 (초가 아님)
+- `as const`로 타입 안전성 확보
+

package/skills/web-design/claude-code/gen/gen-tokens/02-structure-output-file.md

@@ -0,0 +1,31 @@
+# 출력 파일 구조
+
+
+```
+design/tokens/
+├── base.json               # 항상 생성 (primitive + semantic 토큰)
+│
+│ [tailwind]
+├── tailwind.config.js      # Tailwind 설정 (semantic 토큰 포함)
+│
+│ [css_variables]
+├── variables.css            # CSS 커스텀 속성 (semantic 변수 포함)
+├── visual.css               # 비주얼 토큰 (backgrounds, icons, interactions, dividers)
+│
+│ [style_dictionary]
+└── style-dictionary/
+    ├── color.tokens.json    # DTCG 포맷 ($value, $type)
+    ├── typography.tokens.json
+    ├── spacing.tokens.json
+    ├── semantic.tokens.json # 시맨틱 토큰 (별도 파일)
+    ├── visual.tokens.json   # 비주얼 토큰 (backgrounds, icons, interactions, dividers, illustrations)
+    ├── sd.config.mjs        # Style Dictionary 4.0 ESM 설정
+    └── build/
+        ├── css/variables.css
+        ├── ios/StyleDictionary.swift
+        ├── android/colors.xml
+        ├── rn/tokens.ts          # [react_native 시]
+        └── flutter/tokens.dart   # [flutter 시]
+```
+
+> **DTCG 호환성**: `.tokens.json` 확장자는 W3C DTCG 표준 (2025.10)을 따릅니다. Style Dictionary 4.0, Tokens Studio, Figma Variables 등과 즉시 호환됩니다.

package/skills/web-design/claude-code/gen/gen-tokens/03-connect-frontend.md

@@ -0,0 +1,150 @@
+# 프론트엔드 토큰 연결 (Token Wiring)
+
+> 입력: `config.frontend`, `config.token_format`, `config.architecture`, `config.project_name`
+> 참조: `gen/gen-tokens/01-generate-process.md`, `gen/gen-tokens/02-structure-output-file.md`
+> 실행 시점: **gen-tokens 완료 직후** (design/tokens/ 파일이 모두 생성된 후)
+> 출력: 프론트엔드의 globals.css, tailwind.config 수정
+
+## 목적
+
+`design/tokens/` 파일 생성만으로는 프론트엔드에 반영되지 않는다.
+이 모듈은 생성된 토큰을 **프론트엔드 빌드 파이프라인에 실제로 연결**한다.
+
+## 실행 조건
+
+```
+if config.token_format includes "tailwind" OR "css_variables":
+  → 프론트엔드 연결 실행
+else:
+  → 건너뜀 (json-only, style_dictionary는 빌드 도구가 별도 처리)
+```
+
+## 연결 프로세스
+
+### Step 1: globals.css에 토큰 CSS import 삽입
+
+**대상 파일 탐색 (우선순위):**
+
+```
+1. {frontend_dir}/src/app/globals.css          (Next.js App Router)
+2. {frontend_dir}/src/styles/globals.css        (Next.js Pages)
+3. {frontend_dir}/src/index.css                 (React/Vite)
+4. {frontend_dir}/src/assets/main.css           (Vue)
+```
+
+**삽입 위치:** `@tailwind base;` 직전 또는 파일 최상단
+
+```css
+/* === 3DS Design Tokens === */
+@import '../../design/tokens/variables.css';
+@import '../../design/tokens/visual.css';
+/* === End 3DS Design Tokens === */
+```
+
+> import 경로는 globals.css 위치 기준 상대 경로로 계산한다.
+> 이미 `3DS Design Tokens` 주석 블록이 존재하면 덮어쓰기한다.
+
+**shadcn/ui 충돌 해소:**
+
+globals.css에 shadcn의 `@layer base { :root { ... } }` 블록이 있으면:
+1. shadcn HSL 변수는 유지 (shadcn 컴포넌트가 참조)
+2. 3DS variables.css의 시맨틱 변수는 **추가** (충돌 없음 — 네이밍이 다름)
+3. shadcn `--background` 값을 3DS `--bg-primary` 값으로 동기화
+
+```css
+/* shadcn 기본 → 3DS 토큰으로 오버라이드 */
+:root {
+  --background: {3ds_bg_primary를 HSL로 변환};
+  --primary: {3ds_primary_500을 HSL로 변환};
+  --accent: {3ds_accent_500을 HSL로 변환};
+}
+
+.dark {
+  --background: {3ds_dark_bg_primary를 HSL로 변환};
+  --primary: {3ds_dark_primary를 HSL로 변환};
+}
+```
+
+### Step 2: tailwind.config에 디자인 토큰 머지
+
+**대상 파일 탐색 (우선순위):**
+
+```
+1. {frontend_dir}/tailwind.config.ts
+2. {frontend_dir}/tailwind.config.js
+3. {frontend_dir}/tailwind.config.mjs
+```
+
+**머지 항목 (design/tokens/tailwind.config.js → frontend/tailwind.config.ts):**
+
+| 항목 | 동작 |
+|------|------|
+| `colors.primary` | 기존 유지 또는 덮어쓰기 (3DS 값 우선) |
+| `colors.secondary` | 3DS 값으로 설정 |
+| `colors.accent` | 3DS 값으로 설정 |
+| `boxShadow` | 3DS warm/warm-lg/card/card-hover/toast 추가 |
+| `backgroundImage` | 3DS hero-warm/warm-sky 등 추가 |
+| `animation` | 3DS 전용 키프레임 추가 (기존 유지) |
+| `keyframes` | 3DS 전용 키프레임 추가 (기존 유지) |
+| `borderRadius` | xl/2xl 누락 시 추가 |
+| `zIndex` | 3DS 스케일로 통일 |
+
+**머지 규칙:**
+- `theme.extend` 하위에만 추가 (기존 값 덮어쓰지 않음)
+- shadcn이 추가한 `borderRadius`의 CSS 변수 참조(`var(--radius)`)는 유지
+- 이미 동일 키가 있으면 3DS 값으로 교체 (3DS가 source of truth)
+
+### Step 3: reduced-motion 미디어쿼리 추가
+
+globals.css 하단에 추가 (없으면):
+
+```css
+/* === Accessibility: Reduced Motion === */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+```
+
+### Step 4: Pretendard 폰트 로드 확인 (Next.js 전용)
+
+```
+if config.frontend == "nextjs":
+  layout.tsx에서 fontFamily 설정 확인:
+    - `next/font/local` 또는 `next/font/google` 사용 시 → OK
+    - inline style만 있으면 → 경고 로그:
+      "⚠️ Pretendard 폰트가 inline style로만 설정됨. next/font/local 사용 권장."
+```
+
+> 자동 수정은 하지 않는다 (폰트 파일 유무에 따라 방법이 달라지므로 경고만).
+
+## 검증 체크리스트
+
+연결 완료 후 아래를 확인:
+
+```
+✅ globals.css에 variables.css import 존재
+✅ globals.css에 visual.css import 존재
+✅ tailwind.config의 boxShadow에 warm/card 토큰 존재
+✅ tailwind.config의 animation에 3DS 키프레임 존재
+✅ tailwind.config의 colors.secondary가 amber 계열 (red 아님)
+✅ globals.css에 reduced-motion 미디어쿼리 존재
+✅ shadcn --background 값이 3DS bg-primary와 동기화됨
+```
+
+## 로그 출력
+
+```
+🔗 디자인 토큰 프론트엔드 연결:
+   ├── globals.css ← variables.css + visual.css import 추가
+   ├── tailwind.config ← boxShadow, animation, backgroundImage 머지
+   ├── shadcn 토큰 동기화 (--background, --primary)
+   ├── reduced-motion 미디어쿼리 추가
+   └── ✅ 연결 완료 (7/7 체크 통과)
+```

package/skills/web-design/claude-code/gen/gen-tokens.md

@@ -0,0 +1,54 @@
+# 디자인 토큰 생성
+
+> 입력: `config.style`, `config.theme`, `config.token_format`, `config.token_scope`
+> 참조: `defs/styles.md`, `defs/tokens.md`
+> 출력: `design/tokens/` 디렉토리 + **프론트엔드 연결**
+> Dependencies: `defs/styles.md`, `defs/tokens.md`, `defs/icon-usage.md`, `defs/illustration-guide.md`
+>
+> **v3.1**: 시맨틱 토큰 레이어 + W3C DTCG 포맷 지원 추가
+> **v3.8.2**: 프론트엔드 토큰 연결(Token Wiring) 단계 추가
+
+## 사전 확인 (web-design 독립 실행 시)
+
+```
+if config.frontend is undefined:
+  AskUserQuestion:
+    "프론트엔드 프레임워크를 선택해주세요:
+     [1] Next.js (App Router)
+     [2] Next.js (Pages Router)
+     [3] React + Vite
+     [4] Vue (Nuxt)
+     [5] Svelte (SvelteKit)
+     [6] 기타 (직접 입력)"
+  → config.frontend = 선택값
+
+  AskUserQuestion:
+    "프론트엔드 루트 디렉토리 경로를 입력해주세요:
+     (기본: . 현재 디렉토리)"
+  → config.frontend_dir = 입력값 또는 "."
+```
+
+## 생성 프로세스
+
+> 상세: `gen/gen-tokens/01-generate-process.md` 참조
+
+`config.style`로 `defs/styles.md`에서 해당 스타일의 색상 정의를 가져옵니다.
+## 출력 파일 구조
+
+> 상세: `gen/gen-tokens/02-structure-output-file.md` 참조
+
+design/tokens/
+
+## 프론트엔드 연결 (Token Wiring) — 필수!
+
+> 상세: `gen/gen-tokens/03-connect-frontend.md` 참조
+
+**토큰 파일 생성 직후 반드시 실행한다.** 생성만 하고 연결하지 않으면 프론트엔드에서 토큰이 동작하지 않는다.
+
+```
+1. globals.css에 variables.css + visual.css import 삽입
+2. tailwind.config에 boxShadow/animation/backgroundImage 머지
+3. shadcn 토큰(--background, --primary)과 3DS 토큰 동기화
+4. reduced-motion 미디어쿼리 추가
+5. 검증 체크리스트 실행 (7항목)
+```

package/skills/web-design/claude-code/gen/gen-video.md

@@ -0,0 +1,73 @@
+# Remotion 비디오 프로젝트 스캐폴딩 생성
+
+> 입력: `config.project_name`, `config.type_detail.video_type`, `config.type_detail.video_resolution`, `config.type_detail.video_fps`, `config.type_detail.video_features[]`, `config.type_detail.render_target`, `config.type_detail.composition_structure`
+> 참조: `defs/video-compositions.md`, `defs/video-motions.md`
+> 출력: Remotion 프로젝트 디렉토리 구조 + 설정 파일
+> Dependencies: `defs/video-compositions.md`
+>
+> **참고**: Remotion 컨벤션 파일(`defs/conventions/remotion.md`)은 web-design 스킬에 포함되지 않음.
+> 필요 시 `~/.claude/skills/3ds/defs/conventions/remotion.md`를 참조하세요.
+
+## 실행 조건
+
+`config.confirmed == true` && `config.project_type == "video"` 시 자동 실행
+
+## 생성 프로세스
+
+> 상세: `gen/gen-video/02-generate-process.md` 참조
+
+{project_name}/
+## Tech Stack
+
+- **Framework**: Remotion {version}
+- **Resolution**: {width}x{height} @ {fps}fps
+- **Features**: {features 목록}
+
+## Getting Started
+
+### Installation
+npm install
+
+### Development (Studio)
+npm run dev
+
+### Render
+npm run build
+
+### Render Still Image
+npm run build:still
+
+## Project Structure
+
+{실제 생성된 구조 트리}
+
+## License
+MIT
+```
+
+## CLAUDE.md 명령어 매핑 (Remotion)
+
+gen-video.md에서 생성된 프로젝트의 CLAUDE.md에 포함할 명령어:
+
+| 카테고리 | 명령어 |
+|---------|--------|
+| 개발 | `npm run dev` (Remotion Studio) |
+| 빌드 | `npm run build` (MP4 렌더링) |
+| 스틸 | `npm run build:still` (썸네일) |
+| 업그레이드 | `npm run upgrade` (Remotion 버전) |
+
+## 완료 메시지
+
+```
+✅ Remotion 프로젝트 생성 완료!
+
+📁 위치: ~/{config.project_name}
+🎬 해상도: {width}×{height} @ {fps}fps
+🎞️ 컴포지션: {composition_structure}
+🔧 기능: {features 목록}
+
+🎯 시작하기:
+  cd {config.project_name}
+  npm install
+  npm run dev    # Remotion Studio 실행
+```

package/skills/web-design/claude-code/verify/verify-components.md

@@ -0,0 +1,52 @@
+# 컴포넌트 스펙 적용 검증
+
+> 트리거: /wd verify (자동) 또는 /wd verify components
+> 입력: docs/design/web-design-guide.md Section 3 (컴포넌트 디자인 스펙)
+> 방법: 코드베이스 자동 스캔
+
+## 검증 프로세스
+
+### 1단계: 컴포넌트 목록 추출
+
+디자인 가이드 Section 3에서 정의된 컴포넌트 목록을 파싱합니다.
+
+추출:
+- 컴포넌트 이름 (Button, Card, Input, Modal 등)
+- 필수 변형 (Primary, Secondary, Outline 등)
+- 상태별 스타일 (hover, disabled, error, loading)
+
+### 2단계: 코드베이스 스캔
+
+#### 컴포넌트 존재 확인
+- Glob: src/components/**/*.{tsx,jsx,vue,svelte}
+- 각 정의된 컴포넌트와 파일명/export 매칭
+
+#### 디자인 토큰 참조 확인
+- 각 컴포넌트 파일 내에서 Grep:
+  - CSS 변수 사용: var(--color-*, --spacing-*, --radius-*)
+  - Tailwind 토큰 클래스: bg-primary, text-heading 등
+- 하드코딩된 값 감지 (#fff, 16px 등)
+
+#### 상태별 스타일 확인
+- 각 컴포넌트에서 Grep:
+  - hover, focus, active, disabled, loading, error 상태
+  - aria-disabled, aria-invalid 등 접근성 속성
+
+### 3단계: 판정
+
+| 상태 | 판정 |
+|------|------|
+| 컴포넌트 존재 + 토큰 사용 + 상태 처리 | ✅ 완전 적용 |
+| 컴포넌트 존재 + 부분 토큰/상태 | ⚠️ 부분 적용 |
+| 컴포넌트 미존재 | ❌ 미적용 |
+
+## 출력 형식
+
+```
+■ 컴포넌트 적용 현황: 12/15 (80.0%)
+  ✅ Button — 토큰 참조 ✓, 상태(hover/disabled/loading) ✓
+  ✅ Card — 토큰 참조 ✓, 상태(hover) ✓
+  ⚠️ Input — 존재하지만 error 상태 미구현
+  ❌ Modal — 컴포넌트 미구현
+  ...
+```