timelabs 0.1.0 → 0.1.1

package/skills/web-design/claude-code/gen/gen-design-guide/01-project-overview.md

@@ -0,0 +1,304 @@
+# 1. 프로젝트 개요 (Project Overview)
+
+
+| 항목 | 내용 |
+|---|---|
+| **서비스 명칭** | {config.project_name} |
+| **서비스 유형** | {config.project_desc} |
+| **핵심 타겟 사용자** | {project_type별 기본값 또는 사용자 입력} |
+| **톤 앤 매너** | {config.style에서 추론} |
+| **지원 브라우저** | Chrome 최신, Edge 최신, Safari 최신 |
+| **접근성 목표** | WCAG 2.1 AA 기준 준수 |
+
+### 디자인 원칙
+1. **명확성** — 데이터와 상태를 한눈에 파악할 수 있어야 한다.
+2. **일관성** — 동일한 기능은 동일한 패턴으로 표현한다.
+3. **효율성** — 최소 클릭으로 핵심 작업을 완료할 수 있어야 한다.
+4. **피드백** — 모든 사용자 행동에 즉각적인 시각적 응답을 제공한다.
+5. **안전성** — 위험한 동작은 반드시 확인 절차를 거친다.
+```
+
+### 2. 섹션 2 — 정보 구조 (IA)
+
+`defs/design-guide-sections.md`의 **project_type별 IA 템플릿**을 적용합니다.
+
+| project_type | IA 패턴 |
+|---|---|
+| `web` (SaaS/대시보드) | 사이드바 + 대시보드 + CRUD 테이블 (8개 메뉴) |
+| `web` (랜딩/마케팅) | GNB 상단바 + 섹션 스크롤 (5개 메뉴) |
+| `app` | 탭바 (4~5개) + 스택 네비게이션 |
+| `desktop` | 좌측 트리 네비게이션 + 우측 에디터 패널 |
+| `hybrid` | 플랫폼별 분기 (web→사이드바, app→탭바) |
+
+**반응형 네비게이션 규칙 (web 유형만):**
+
+| Breakpoint | 네비게이션 형태 |
+|---|---|
+| Desktop (>=1440px) | 좌측 사이드바 확장 (아이콘+텍스트, 240px) |
+| Tablet (768px~1439px) | 좌측 사이드바 축소 (아이콘만, 64px) |
+| Mobile (<=767px) | 하단 탭 바 (주요 4개) + 햄버거 메뉴 |
+
+### 3. 섹션 3 — 스타일 가이드 (핵심)
+
+config.style의 색상 정보를 **시맨틱 토큰**으로 변환합니다.
+
+#### 3a. 시맨틱 컬러 토큰 생성
+
+`defs/styles.md`에서 가져온 `primary`, `background`, `accent` 색상을 시맨틱 변수로 매핑합니다.
+
+**다크 테마 기준 (config.theme == 'dark' 또는 'system'):**
+
+| 토큰명 | 생성 규칙 | 용도 |
+|---|---|---|
+| `--bg-primary` | `background` 색상 그대로 | 메인 배경 |
+| `--bg-secondary` | `lighten(background, 8%)` | 카드, 패널 배경 |
+| `--bg-tertiary` | `lighten(background, 15%)` | 입력 필드, 테이블 헤더 |
+| `--text-primary` | `contrast(background)` | 본문 텍스트 |
+| `--text-secondary` | `opacity(contrast(background), 0.65)` | 보조 텍스트 |
+| `--text-disabled` | `opacity(contrast(background), 0.35)` | 비활성 텍스트 |
+| `--border-default` | `opacity(contrast(background), 0.15)` | 기본 테두리 |
+| `--border-focus` | `primary` 색상 | 포커스 테두리 |
+
+**라이트 테마 기준 (config.theme == 'light' 또는 'system'):**
+
+| 토큰명 | 생성 규칙 | 용도 |
+|---|---|---|
+| `--bg-primary` | `#FFFFFF` (고정) | 메인 배경 |
+| `--bg-secondary` | `#F5F7FA` (고정) | 카드, 패널 배경 |
+| `--bg-tertiary` | `#E8ECF1` (고정) | 입력 필드, 테이블 헤더 |
+| `--text-primary` | `#111827` (고정) | 본문 텍스트 |
+| `--text-secondary` | `#6B7280` (고정) | 보조 텍스트 |
+| `--text-disabled` | `#D1D5DB` (고정) | 비활성 텍스트 |
+| `--border-default` | `#E5E7EB` (고정) | 기본 테두리 |
+| `--border-focus` | `primary` 색상 | 포커스 테두리 |
+
+**브랜드 & 기능 색상 (테마 무관):**
+
+| 색상 | 값 | 용도 |
+|---|---|---|
+| `--color-primary` | `{style.primary}` | 브랜드 컬러, 주요 버튼 |
+| `--color-primary-hover` | `darken(primary, 15%)` | Primary 호버 |
+| `--color-secondary` | `{style.accent 또는 #6C757D}` | 보조 버튼 |
+| `--color-success` | `#28A745` | 성공 상태 |
+| `--color-warning` | `#FFC107` | 경고 상태 |
+| `--color-error` | `#DC3545` | 에러 상태 |
+| `--color-info` | `#17A2B8` | 정보 알림 |
+
+**접근성 규칙**: 텍스트-배경 대비 최소 4.5:1 (WCAG AA)
+
+#### 3b. 타이포그래피 스케일
+
+```
+| 토큰 | 크기 | 굵기 | 행간 | 용도 |
+|---|---|---|---|---|
+| --font-display | 32px | Bold (700) | 40px | 페이지 타이틀 |
+| --font-h1 | 24px | SemiBold (600) | 32px | 섹션 제목 |
+| --font-h2 | 20px | SemiBold (600) | 28px | 카드/모달 제목 |
+| --font-h3 | 16px | Medium (500) | 24px | 소제목, 테이블 헤더 |
+| --font-body | 14px | Regular (400) | 22px | 본문 텍스트 |
+| --font-small | 13px | Regular (400) | 20px | 보조 텍스트 |
+| --font-caption | 12px | Regular (400) | 16px | 캡션, 타임스탬프 |
+| --font-label | 12px | Medium (500) | 16px | 폼 라벨 |
+```
+
+**Font Family**: `'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif`
+**Monospace**: `'JetBrains Mono', 'Fira Code', monospace` — 14px
+
+#### 3c. 스페이싱 스케일 (4px 기반)
+
+```
+| 토큰 | 값 | 용도 |
+|---|---|---|
+| --space-1 | 4px | 아이콘-텍스트 간격 |
+| --space-2 | 8px | 인라인 요소 간격 |
+| --space-3 | 12px | 리스트 아이템 간격 |
+| --space-4 | 16px | 카드 내부 패딩 |
+| --space-5 | 20px | 섹션 내 그룹 간격 |
+| --space-6 | 24px | 카드 큰 패딩 |
+| --space-8 | 32px | 섹션 간 간격 |
+| --space-10 | 40px | 페이지 상단 여백 |
+| --space-12 | 48px | 대형 섹션 구분 |
+| --space-16 | 64px | 페이지 영역 구분 |
+```
+
+#### 3d. 그리드, 엘리베이션, Z-index, 보더 라디우스
+
+고정값으로 항상 동일하게 생성합니다.
+
+**그리드**: 12 columns, Gutter 24px, 최대 1280px
+**엘리베이션**: Level 0~4 (none → 16px 48px shadow)
+**Z-index**: Base(0), Sticky(100), Dropdown(200), Sidebar(300), Modal Backdrop(400), Modal(500), Toast(600), Tooltip(700)
+**Border Radius**: sm(4px), md(8px), lg(12px), full(9999px)
+
+#### 3e. 이미지 전략 (Image Strategy)
+
+> 조건: `config.project_type == "web"` && `config.type_detail.image_strategy != "none"`
+> 참조: `defs/image-strategies.md`
+
+생성 항목:
+- 전략명 + 포함 기법 목록
+- 반응형 이미지 breakpoint 가이드 (Mobile/Tablet/Desktop srcset)
+- 포맷 가이드 (WebP/AVIF + `<picture>` 폴백)
+- Lazy Loading 정책 (above-fold: eager, below-fold: lazy)
+- Placeholder 패턴 (blur-up/skeleton/dominant-color)
+- 접근성 규칙 (alt 텍스트, 장식 이미지)
+- Favicon & OG 이미지 스펙
+
+### 4. 섹션 4 — 컴포넌트 스펙
+
+#### 4a. 버튼
+
+5종(Primary, Secondary, Danger, Ghost, Icon) x 6상태(Default, Hover, Active, Focus, Disabled, Loading) x 3사이즈(Small 32px, Medium 40px, Large 48px) 매트릭스를 생성합니다.
+
+#### 4b. 입력 필드
+
+6상태(Default, Hover, Focus, Error, Success, Disabled) 매트릭스. 높이 40px, 패딩 12px.
+
+#### 4c. 카드
+
+구조: Header(16px padding) + Body(16px~24px padding) + Footer(선택, 12px 16px padding). 배경 `--bg-secondary`, 테두리 `--border-default`, 그림자 Level 1.
+
+#### 4d. 데이터 테이블
+
+행 높이 48px, 호버 배경 `--bg-tertiary`, 선택 배경 `rgba(primary, 0.08)`. 페이지네이션, 정렬, 벌크 액션 규칙 포함.
+
+#### 4e. 아이콘
+
+**아이콘 라이브러리**: Lucide Icons (1순위), Stroke Width 2px. 기본 크기 20x20px(인라인), 24x24px(버튼/메뉴). 색상 `currentColor`.
+
+config.project_type에 따라 **메뉴별 아이콘 매핑** 테이블을 동적 생성합니다 (`defs/design-guide-sections.md` 참조).
+
+> 상세 규칙: `defs/icon-usage.md` 참조 — 컴포넌트별 크기/gap/정렬, 색상 규칙, 접근성, 호버 패턴
+
+#### 4f. 아이콘 상세 사용 규칙
+
+> 참조: `defs/icon-usage.md`
+
+**생성 항목:**
+
+1. **컴포넌트별 아이콘 크기 매트릭스**: 네비게이션(24px), 버튼(16~20px), 카드(32~48px), 인풋(20px), 리스트(20px), 뱃지(14px), 토스트(20~24px), Empty State(48~64px) 등 30+ 위치별 size/gap/정렬 규칙
+2. **아이콘 색상 체계**: 기본(currentColor, --text-secondary), 시맨틱(success/warning/error/info), 호버 색상 전환
+3. **프레임워크별 import 패턴**: config.frontend에 따라 React(lucide-react), Vue(lucide-vue-next), Svelte(lucide-svelte), Vanilla(CDN) 중 해당 패턴만 출력
+4. **아이콘 접근성**: 단독 아이콘(aria-label), 텍스트 동반(aria-hidden), 상태 표시(role=img)
+5. **호버/인터랙션 패턴**: morph, bounce, spin, pulse, color-shift, fill-stroke 토글 등
+
+#### 4g. 일러스트 가이드
+
+> 참조: `defs/illustration-guide.md`
+
+**생성 항목:**
+
+1. **스타일별 일러스트 톤**: `config.style`에 매칭되는 일러스트 톤, 추천 라이브러리, 키워드 출력
+2. **사용 위치별 크기 규칙**: Empty State(200~300px), 온보딩(250~350px), 에러(300~400px), Hero(300~500px) 등 9개 위치 매핑
+3. **색상 동기화**: SVG에 CSS 변수 바인딩 (`--illust-primary: var(--color-primary)`)
+4. **반응형 크기**: Desktop(100%), Tablet(80%), Mobile(60%, 최소 80px)
+5. **다크모드 대응**: `prefers-color-scheme: dark` 시 brightness/saturate 필터
+6. **일러스트 vs 아이콘 판단 기준**: 상황별 선택 가이드
+
+#### 4h. 배경 이미지 & 오버레이
+
+> 참조: `defs/styles.md`의 **BG_Pattern** 필드, `defs/component-specs.md` 비주얼 variant, `defs/tokens.md` § 8
+
+**생성 항목:**
+
+```
+style = defs/styles.md[config.style]
+bg_pattern = style.BG_Pattern
+image_interaction = style.Image_Interaction  # v3.3 신규
+```
+
+1. **Hero 배경**: 그라데이션 오버레이 + 이미지 blend-mode, 반응형 srcset
+2. **카드 배경 이미지**: object-fit, overlay opacity(기본 0.7 → 호버 0.5), 호버 zoom/reveal 패턴
+3. **섹션 배경 패턴**: CSS/SVG 반복 패턴 (`style.BG_Pattern`), opacity 0.03~0.1
+4. **CTA 배경**: 그라데이션(`style.Gradient`) + 장식 요소
+5. **다크모드 오버레이**: 배경 이미지 위 다크 오버레이 자동 적용
+
+#### 4i. 섹션 디바이더 & 장식 요소
+
+> 참조: `defs/styles.md`의 **Section Divider / Decoration** 필드, `defs/tokens.md` § 11
+
+**생성 항목:**
+
+```
+style = defs/styles.md[config.style]
+divider = style.Section_Divider   # v3.3 신규
+decoration = style.Decoration
+```
+
+1. **섹션 구분선**: 스타일별 디바이더 유형 (line, gradient-line, wave-svg, angle, dots)
+2. **장식 요소**: 코너 장식, 뱃지, 구분선 — `style.Decoration` 기반 HTML/CSS
+3. **배경 전환**: 섹션 간 배경색 교대 패턴 (primary ↔ secondary)
+
+#### 4j. SEO 메타 컴포넌트
+
+> 조건: `config.project_type == "web"` && `config.type_detail.seo_level != "none"`
+> 참조: `defs/seo-guide.md`
+
+**생성 항목:**
+
+1. **Head 컴포넌트 패턴**: `config.frontend`에 따라 해당 패턴만 출력
+
+| config.frontend | 패턴 | API |
+|-----------------|------|-----|
+| `nextjs` | Next.js Metadata API | `export const metadata: Metadata` / `generateMetadata()` |
+| `nuxt` | Nuxt `useHead` + `useSeoMeta` | `useHead()`, `useSeoMeta()` |
+| `react_vite` | react-helmet-async | `<Helmet>` 컴포넌트 |
+| `vue3_vite` | `@unhead/vue` | `useHead()` |
+
+2. **OG 이미지 템플릿**: `config.style`의 `primary`, `background` 색상을 적용한 OG 이미지 디자인 가이드
+   - 크기: 1200x630px
+   - 배경: `style.background` 또는 `style.Gradient`
+   - 텍스트: 흰색 또는 `contrast(background)`
+   - 로고 위치: 좌하단
+   - 폰트: 본문과 동일 계열 (Pretendard 등)
+
+3. **JSON-LD 스니펫** (seo_level: advanced): `config.type_detail.web_type`에 따른 Schema.org 타입별 기본 구조화 데이터 템플릿
+
+4. **검색엔진별 meta 태그**:
+   - Google: `robots`, `canonical`, `description`
+   - Naver: `naver-site-verification`, `og:locale` ko_KR
+   - Daum/Kakao: `og:image` 비율 1.91:1 권장
+
+### 5. 섹션 5 — 상태 & 피드백
+
+**모든 데이터 화면 4가지 필수 상태:**
+
+| 상태 | 구성 요소 |
+|---|---|
+| Loading | Skeleton UI + shimmer 애니메이션 (1.5초 주기) |
+| Empty | 일러스트(스타일별 톤, `defs/illustration-guide.md`) + 설명 + CTA 버튼 |
+| Error | 에러 일러스트 + 메시지 + [다시 시도] 버튼 |
+| No Permission | 잠금 아이콘 + 안내 + [권한 요청] 버튼 |
+
+**토스트 알림**: 우측 상단, 최대 3개 쌓임. Success/Info 4초 자동닫힘, Warning 6초, Error 수동닫기.
+**모달**: Confirm(400px), Form(560px), Detail(720px), Full(960px). 위험 동작은 이름 재입력 필수.
+**뱃지**: 높이 24px, 패딩 4px 8px, radius 4px. 상태별 배경/텍스트 색상.
+**툴팁**: 최대 240px, 표시 딜레이 300ms, 화살표 포함.
+
+### 6. 섹션 6 — 기능 흐름
+
+`defs/design-guide-sections.md`의 **project_type별 기능 흐름 세트**를 적용합니다.
+
+| 기능 흐름 | web (SaaS) | web (랜딩) | app | desktop |
+|---|---|---|---|---|
+| 로그인 | O | X | O | O |
+| 데이터 테이블 | O | X | O (리스트) | O |
+| 생성/수정 폼 | O | O (문의 폼) | O | O |
+| 삭제 동작 | O | X | O | O |
+| RBAC | O | X | O (간소화) | O |
+
+각 기능 흐름은 **완전한 에러 케이스 + API 응답 분기**를 포함합니다.
+
+### 7~8. 인터랙션 & 모션 + 비디오 전용
+
+> **상세**: `gen/gen-design-guide-interaction.md` 참조
+> 섹션 7 (전역 트랜지션, 스타일별 오버라이드, 이미지/비주얼, 마이크로 인터랙션)
+> 섹션 8 (참조 & 벤치마킹), 비디오 프로젝트 전용 (V1~V6), 출력 구조
+
+```
+1. Read gen/gen-design-guide-interaction.md
+2. 섹션 7: 모션 강도 적용, 전역 트랜지션, 스타일별 오버라이드, 이미지/비주얼, 마이크로 인터랙션
+3. 섹션 8: 프레임워크별 참조 디자인 시스템
+4. 비디오 전용: V1~V6 (project_type == "video")
+→ docs/design/web-design-guide.md 또는 video-design-guide.md
+```

package/skills/web-design/claude-code/gen/gen-design-guide-interaction/01-interaction-motion.md

@@ -0,0 +1,129 @@
+# 섹션 7 — 인터랙션 & 모션
+
+
+> 참조: `defs/styles.md`의 **Hover / Shadow / Border / BG Pattern / Decoration / Animation / Gradient** 필드
+
+**스타일별 인터랙션 패턴**을 `defs/styles.md`에서 가져와 적용합니다. 아래 전역 규칙 + 스타일별 오버라이드로 구성됩니다.
+
+### 모션 강도 적용
+
+> 참조: `defs/{project_type}-motions.md` § 모션 강도 프리셋
+
+```
+intensity = config.type_detail.motion_intensity  # subtle | moderate | dramatic | none
+
+if intensity == "none":
+    모든 duration → 0ms, transform → none
+    prefers-reduced-motion 강제 적용
+    섹션 7c, 7d의 인터랙션 생략
+```
+
+**플랫폼별 강도 스케일:**
+
+| 플랫폼 | subtle | moderate | dramatic |
+|--------|--------|----------|----------|
+| **Web** | 200-400ms · ease-out | 400-700ms · ease-in-out | 700-1200ms · cubic-bezier |
+| **App** | 150-300ms · stiff spring | 300-500ms · default spring | 500-800ms · bouncy spring |
+| **Desktop** | 100-250ms · ease-out | 250-500ms · ease-in-out | 500-1000ms · cubic-bezier |
+| **Hybrid** | 플랫폼별 상이 (defs/hybrid-motions.md 참조) | | |
+
+아래 7a~7d의 모든 duration/easing 값은 `intensity`에 따라 위 범위 내에서 스케일링합니다.
+
+### 7a. 전역 트랜지션 (모든 스타일 공통)
+
+> `config.type_detail.motion_intensity`에 따라 duration/easing 분기
+
+| 카테고리 | 속성 | subtle | moderate | dramatic |
+|---------|------|--------|----------|----------|
+| 색상 변화 | `transition-colors` | `0.15s ease-out` | `0.3s ease-in-out` | `0.5s cubic-bezier` |
+| 확장/축소 | `transition-all` | `0.2s ease-out` | `0.4s ease-in-out` | `0.8s cubic-bezier` |
+| 등장 | `opacity + transform` | `0.15s ease-out` | `0.3s ease-in-out` | `0.6s cubic-bezier` |
+| 포커스 링 | `ring-2 ring-offset-2` | 즉시 | 즉시 | 즉시 |
+| 모달 | `scale(0.95→1) + opacity` | `0.15s ease-out` | `0.25s ease-out` | `0.5s cubic-bezier` |
+| 토스트 | `translateX(100%→0)` | `0.2s ease-out` | `0.35s ease-out` | `0.7s cubic-bezier` |
+| 드롭다운 | `scale(0.95→1) + opacity` | `0.1s ease-out` | `0.2s ease` | `0.4s cubic-bezier` |
+
+> 위 값은 Web 기준. App/Desktop은 플랫폼별 강도 스케일 범위 내에서 비례 적용.
+
+### 7b. 스타일별 인터랙션 오버라이드
+
+`config.style`로 `defs/styles.md`에서 해당 스타일의 인터랙션 패턴을 가져옵니다:
+
+```
+style = defs/styles.md[config.style]
+hover_pattern = style.Hover       # 카드·버튼·링크 호버 효과
+shadow_system = style.Shadow      # 엘리베이션 패턴
+border_style = style.Border       # 테두리 스타일
+bg_pattern = style.BG_Pattern     # 배경 장식 패턴
+decoration = style.Decoration     # 장식 요소
+animation = style.Animation       # 핵심 애니메이션 키프레임
+gradient = style.Gradient         # 그라데이션 활용 패턴
+```
+
+**생성 항목:**
+
+1. **Hover 매트릭스**: 카드 호버, 버튼 호버, 링크 호버, 행 호버 — 스타일별 Tailwind 클래스 포함
+2. **Shadow 시스템**: Level 0~4 + 호버 확장 — 스타일별 `box-shadow` 값
+3. **Border 규칙**: 기본 두께, 호버 변화, 액센트 위치 — 스타일별 `border-*` 클래스
+4. **Background Pattern**: 섹션 배경, 히어로 배경, 카드 배경 — CSS/SVG 패턴 코드
+5. **Decoration 요소**: 구분선, 뱃지, 코너 장식 — HTML/CSS 스니펫
+6. **Animation 키프레임**: 등장/반복/상태 전환 — `@keyframes` 정의 (styles.md 하단 레퍼런스 참조)
+7. **Gradient 패턴**: 히어로/CTA/텍스트/오버레이 — Tailwind gradient 클래스
+
+### 7c. 이미지 & 비주얼 인터랙션
+
+> 참조: `defs/styles.md`의 **Image Interaction** 필드, `defs/component-specs.md` 비주얼 variant, `defs/tokens.md` § 10
+
+```
+style = defs/styles.md[config.style]
+image_interaction = style.Image_Interaction
+intensity = config.type_detail.motion_intensity
+```
+
+**생성 항목** (duration은 `intensity` 기준):
+
+1. **이미지 인터랙션**: 카드/Hero/섹션 이미지에 적용되는 호버 효과
+
+   | 효과 | 동작 | subtle | moderate | dramatic |
+   |------|------|--------|----------|----------|
+   | image-zoom | `scale(1.05)` | 0.25s ease-out | 0.4s ease-out | 0.8s cubic-bezier |
+   | image-reveal | `opacity 0.3→1` | 0.3s | 0.5s | 1.0s |
+   | overlay-fade | 오버레이 `opacity 0.7→0.4` | 0.2s | 0.3s | 0.6s |
+   | parallax | 스크롤 연동 이미지 이동 | 미미한 오프셋 | 중간 오프셋 | 큰 오프셋 |
+   | ken-burns | 이미지 느린 확대 | 8s | 15s | 25s |
+   | blur-to-clear | `blur(8px)→clear` | 0.3s | 0.6s | 1.0s |
+
+2. **요소 인터랙션**:
+
+   | 효과 | 동작 | subtle | moderate | dramatic |
+   |------|------|--------|----------|----------|
+   | tilt-3d | 마우스 기반 3D 기울기 | max 4deg | max 8deg | max 15deg |
+   | float | 부유 애니메이션 | 5px, 2s | 10px, 3s | 15px, 4s |
+   | morph | 호버 변형 (scale+rotate) | scale(1.02) | scale(1.05) rotate(2deg) | scale(1.1) rotate(5deg) |
+
+3. **텍스트 인터랙션**:
+   - gradient-text: 그라데이션 텍스트 (`background-clip: text`)
+   - typewriter: 타자기 효과 (subtle: 빠른 타이핑, dramatic: 느린 타이핑)
+   - count-up: 숫자 카운트업 (subtle: 0.5s, moderate: 1s, dramatic: 2s)
+
+4. **스크롤 인터랙션**:
+
+   | 효과 | 동작 | subtle | moderate | dramatic |
+   |------|------|--------|----------|----------|
+   | fade-up | IntersectionObserver 등장 | 0.2s | 0.4s | 0.8s |
+   | stagger | 순차 등장 딜레이 | 0.05s | 0.1s | 0.2s |
+   | reveal | 스크롤 위치 기반 노출 | 간결한 등장 | 중간 등장 | 풀 씬 전환 |
+
+### 7d. 마이크로 인터랙션 (모든 스타일 공통)
+
+> duration은 `config.type_detail.motion_intensity` 기준
+
+| 인터랙션 | 동작 | subtle | moderate | dramatic |
+|---------|------|--------|----------|----------|
+| 복사 완료 | 아이콘 Check 전환 | 1.5초 후 복원 | 2초 후 복원 | 3초 후 복원 |
+| 알림 | shake 애니메이션 | 0.2s | 0.3s | 0.5s |
+| 업로드 | 프로그레스 바 + 퍼센트 | 실시간 | 실시간 | 실시간 |
+| 토글 | 슬라이드 + 색상 전환 | 0.1s | 0.2s | 0.35s |
+| 스켈레톤 | 시머 애니메이션 | 1s infinite | 1.5s infinite | 2.5s infinite |
+| 스크롤 등장 | fade-up (IntersectionObserver) | 0.2s stagger | 0.4s stagger | 0.8s stagger |
+

package/skills/web-design/claude-code/gen/gen-design-guide-interaction/04-project-video.md

@@ -0,0 +1,69 @@
+# 비디오 프로젝트 전용 섹션
+
+
+> 조건: `config.project_type == "video"`
+
+비디오 프로젝트 시 웹 디자인 가이드 대신 **비디오 디자인 가이드**를 생성합니다.
+
+### 출력 파일
+
+```
+docs/design/video-design-guide.md    # 비디오 프로젝트 맞춤 디자인 가이드
+```
+
+### 비디오 전용 섹션
+
+#### V1. 프로젝트 개요
+
+| 항목 | 내용 |
+|------|------|
+| **서비스 명칭** | {config.project_name} |
+| **비디오 유형** | {config.type_detail.video_type} |
+| **해상도** | {width}×{height} @ {fps}fps |
+| **렌더 타겟** | {config.type_detail.render_target} |
+| **컴포지션 구조** | {config.type_detail.composition_structure} |
+
+#### V2. 컬러 & 타이포그래피
+
+- `src/lib/colors.ts` 기반 색상 팔레트
+- 비디오용 타이포그래피 스케일 (px 단위, 고정 캔버스)
+- 배경-텍스트 대비 확인 (4.5:1 이상)
+
+#### V3. 모션 가이드
+
+- `defs/video-motions.md` 기반 애니메이션 패턴
+- 프레임 기반 타이밍 규칙 (fps별 프레임 수)
+- Easing/Spring 프리셋 참조
+- **금지 사항**: CSS transition/animation 사용 불가
+
+#### V4. 컴포지션 구조 가이드
+
+- `defs/video-compositions.md` 기반 구조 패턴
+- Sequence 배치 및 타이밍 가이드
+- 장면 전환 패턴 (config.type_detail.video_features에 `transitions` 포함 시)
+
+#### V5. 미디어 처리 가이드
+
+- `defs/conventions/remotion.md` §4 기반
+- 이미지/비디오/오디오/폰트 사용 규칙
+- 에셋 파일 구성 (`public/` 디렉토리)
+
+#### V6. 렌더링 가이드
+
+- 로컬 렌더링 명령어 및 옵션
+- Lambda 설정 (render_target에 lambda 포함 시)
+- 코덱/품질 설정 가이드
+
+### video_saas 시
+
+```
+if video_type == "video_saas":
+    → 비디오 디자인 가이드 (V1~V6) + 웹 디자인 가이드 (섹션 1~8)
+    → 두 가이드 모두 생성
+    출력:
+      docs/design/video-design-guide.md   # Remotion 엔진
+      docs/design/web-design-guide.md     # 웹앱 (기존 로직)
+```
+
+---
+

package/skills/web-design/claude-code/gen/gen-design-guide-interaction.md

@@ -0,0 +1,45 @@
+# 디자인 가이드 — 인터랙션 & 모션 + 비디오
+
+> 입력: `config.style`, `config.theme`, `config.project_type`, `config.type_detail.motion_intensity`, `config.frontend`
+> 참조: `gen/gen-design-guide.md` (메인 모듈)
+> 출력: `docs/design/web-design-guide.md` (섹션 7~8), `docs/design/video-design-guide.md` (비디오 시)
+> Dependencies: `gen/gen-design-guide.md`, `defs/styles.md`, `defs/web-motions.md`, `defs/app-motions.md`, `defs/desktop-motions.md`, `defs/hybrid-motions.md`, `defs/video-motions.md`, `defs/video-compositions.md`, `defs/conventions/remotion.md`
+
+## 섹션 7 — 인터랙션 & 모션
+
+> 상세: `gen/gen-design-guide-interaction/01-interaction-motion.md` 참조
+
+**스타일별 인터랙션 패턴**을 `defs/styles.md`에서 가져와 적용합니다. 아래 전역 규칙 + 스타일별 오버라이드로 구성됩니다.
+## 섹션 8 — 참조 & 벤치마킹
+
+config.frontend에 따라 권장 디자인 시스템 참조를 매핑합니다.
+
+| config.frontend | 1순위 참조 | 2순위 참조 |
+|---|---|---|
+| `nextjs`, `react_vite` | Shadcn/UI | Tailwind UI |
+| `vue3_vite`, `nuxt` | PrimeVue | Ant Design Vue |
+| `react_native` | React Native Paper | NativeBase |
+| `flutter` | Material Design 3 | Cupertino (iOS) |
+| `electron`, `tauri` | Shadcn/UI | Radix UI |
+
+## 출력 파일 구조
+
+```
+docs/design/
+└── web-design-guide.md    # 프로젝트 맞춤 디자인 가이드 (전체 또는 부분)
+```
+
+## 비디오 프로젝트 전용 섹션
+
+> 상세: `gen/gen-design-guide-interaction/04-project-video.md` 참조
+
+비디오 프로젝트 시 웹 디자인 가이드 대신 **비디오 디자인 가이드**를 생성합니다.
+## 생성 완료 후 반환
+
+```
+생성된 파일:
+- docs/design/web-design-guide.md ({config.design_guide_scope} 범위)
+  → 섹션 수: {생성된 섹션 수}/8
+  → 시맨틱 토큰: {theme}모드 기반 자동 생성
+  → IA 패턴: {project_type}용 적용
+```

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

@@ -0,0 +1,43 @@
+# 디자인 가이드 생성
+
+> 입력: `config.style`, `config.theme`, `config.project_type`, `config.design_guide_scope`, `config.frontend`
+> 참조: `defs/design-guide-sections.md`, `defs/styles.md`, `defs/tokens.md`
+> 출력: `docs/design/web-design-guide.md`
+> Dependencies: `defs/design-guide-sections.md`, `defs/ia-patterns.md`, `defs/component-specs.md`, `defs/icon-mappings.md`, `defs/image-strategies.md`, `defs/icon-usage.md`, `defs/illustration-guide.md`, `defs/seo-guide.md`, `gen/gen-design-guide-interaction.md`
+>
+> **참고**: `defs/domain-features.md`는 web-design 스킬에 포함되지 않음 (3ds 전용).
+> 도메인 전문 컴포넌트가 필요하면 `defs/component-specs/domains/` 하위 파일을 참조합니다.
+
+## 실행 조건
+
+collect/collect-style.md 완료 시 자동 실행
+
+**추가 조건**: `config.design_guide_scope != 'none'`
+
+| config.design_guide_scope | 생성 섹션 |
+|---------------------------|----------|
+| `full` | 섹션 1~8 전체 |
+| `style_only` | 섹션 1, 3, 4만 |
+| `none` | 생성하지 않음 |
+
+## 생성 프로세스
+
+### 0. 참조 데이터 준비
+
+```
+style = defs/styles.md[config.style]       # 선택된 스타일의 색상 정보
+sections = defs/design-guide-sections.md    # 유형별 섹션 분기 규칙
+theme = config.theme                        # dark | light | system
+project_type = config.project_type          # web | app | desktop | hybrid
+```
+
+### 1. 섹션 1 — 프로젝트 개요
+
+config 값을 직접 치환합니다.
+
+```markdown
+## 1. 프로젝트 개요 (Project Overview)
+
+> 상세: `gen/gen-design-guide/01-project-overview.md` 참조
+
+1. **명확성** — 데이터와 상태를 한눈에 파악할 수 있어야 한다.