timelabs 0.1.0 → 0.1.1

package/skills/web-design/claude-code/collect/collect-style.md

@@ -0,0 +1,155 @@
+# 디자인 스타일 수집
+
+> 수집 대상: `config.style`, `config.theme`, `config.token_scope`, `config.design_guide_scope`
+> Dependencies: defs/styles.md, defs/tokens.md, defs/ai-recommend.md
+
+---
+
+## Q3-0. 벤치마킹 결과 반영 (조건부)
+
+```
+if docs/benchmarking/recommended-tokens.json exists
+   OR .design/*/analysis.json exists:
+
+    "이전 분석 결과가 감지되었습니다."
+    → 감지된 스타일/색상을 기본값으로 제안
+    → [Y] 반영 / [N] 수동 선택
+```
+
+> 벤치마킹 결과가 없으면 이 질문을 건너뜁니다.
+
+---
+
+## Q3-1. 디자인 스타일
+
+프로젝트의 톤/분위기를 알려주세요:
+
+```
+프로젝트의 톤/분위기를 입력해주세요:
+(예: 전문적, 친근한, 고급, 혁신적, 자연, 깔끔한 등)
+
+자유 입력:
+```
+
+→ 사용자 응답을 `defs/ai-recommend.md`의 톤→스타일 매핑으로 AI 추천
+
+```
+입력하신 톤에 기반한 추천 스타일:
+  → {추천_스타일} ({추천_설명})
+
+[Y] 적용 / [N] 전체 목록에서 선택
+```
+
+### 전체 목록 (N 선택 시)
+
+> 참조: `defs/styles.md`
+
+A-Z 26종 + AI 자동 생성 스타일 중 선택
+
+```
+디자인 스타일을 선택해주세요:
+
+[A] Aurora         [B] Brutalist      [C] Corporate
+[D] Dark Luxury    [E] Eco/Nature     [F] Flat/Minimal
+[G] Glassmorphism  [H] Hand-drawn     [I] Industrial
+[J] Japanese       [K] Kinetic        [L] Luxury
+[M] Material       [N] Neomorphism    [O] Organic
+[P] Playful        [Q] Quiet/Calm     [R] Retro
+[S] Skeuomorphism  [T] Tech/Futuristic [U] Urban
+[V] Vibrant        [W] Warm/Cozy      [X] Experimental
+[Y] Y2K            [Z] Zen
+[AI] AI 자동 추천 (톤 기반)
+
+코드로 선택:
+```
+
+→ `config.style`
+
+---
+
+## Q3-2. 테마 모드
+
+```
+테마 모드:
+
+[1] 🌙 다크만
+[2] ☀️ 라이트만
+[3] 🔄 전환 (시스템 설정)
+```
+
+→ `config.theme`
+
+| 선택 | 값 |
+|------|-----|
+| 1 | `dark` |
+| 2 | `light` |
+| 3 | `system` |
+
+---
+
+## Q3-3. 토큰 범위
+
+```
+토큰에 포함할 항목을 선택해주세요 (쉼표로 구분, ALL=전체):
+
+[1]  colors              [2]  typography
+[3]  spacing             [4]  radius
+[5]  shadows             [6]  animations
+[7]  breakpoints         [8]  backgrounds
+[9]  icons               [10] visual_interactions
+[11] dividers            [12] illustrations
+
+예: 1,2,3,4,5,6 또는 ALL
+```
+
+→ `config.token_scope`
+
+> 참조: `defs/tokens.md`
+
+### 비디오 프로젝트 권장 범위
+
+```
+if config.project_type == "video":
+    권장 범위: Colors(1), Typography(2), Animations(6)
+    순수 비디오는 최소 범위로도 충분합니다.
+
+    if config.type_detail.video_type == "video_saas":
+        웹앱 포함이므로 전체 범위 선택 가능
+```
+
+---
+
+## Q3-4. 디자인 가이드 생성
+
+```
+디자인 가이드 문서 생성 범위:
+
+[1] 전체 (8개 섹션 모두 — IA, 컴포넌트 스펙, 상태 패턴, 기능 흐름 포함) (권장)
+[2] 스타일만 (프로젝트 개요 + 스타일 가이드 + 컴포넌트 스펙만)
+[3] 생성하지 않음
+```
+
+→ `config.design_guide_scope`
+
+| 선택 | 값 |
+|------|-----|
+| 1 | `full` |
+| 2 | `style_only` |
+| 3 | `none` |
+
+---
+
+## 완료
+
+모든 디자인 설정 질문(Q3-0 ~ Q3-4) 완료 후:
+
+```
+디자인 설정이 완료되었습니다.
+
+스타일: {config.style}
+테마: {config.theme}
+토큰 범위: {config.token_scope}
+디자인 가이드: {config.design_guide_scope}
+```
+
+→ gen/ 모듈로 자동 진행

package/skills/web-design/claude-code/collect/collect-type.md

@@ -0,0 +1,42 @@
+# 프로젝트 유형 선택
+
+> 수집 대상: `config.project_type`
+
+## Q1. 프로젝트 유형
+
+프로젝트 유형을 선택해주세요:
+
+```
+[1] 🌐 웹 (Web) - 웹사이트, 웹앱
+[2] 📱 앱 (App) - 모바일 앱 (iOS/Android)
+[3] 🖥️ PC앱 (Desktop) - 데스크톱 애플리케이션
+[4] 🔀 혼합 (Hybrid) - 멀티플랫폼
+[5] 🎬 비디오 (Video) - Remotion 비디오
+
+번호로 선택:
+```
+
+→ `config.project_type`
+
+| 선택 | config.project_type | 다음 모듈 |
+|------|---------------------|-----------|
+| 1 | `web` | `collect-web.md` |
+| 2 | `app` | `collect-app.md` |
+| 3 | `desktop` | `collect-desktop.md` |
+| 4 | `hybrid` | `collect-hybrid.md` |
+| 5 | `video` | `collect-video.md` |
+
+## 분기 로직
+
+```
+if project_type == "web":
+    load collect/collect-web.md
+elif project_type == "app":
+    load collect/collect-app.md
+elif project_type == "desktop":
+    load collect/collect-desktop.md
+elif project_type == "hybrid":
+    load collect/collect-hybrid.md
+elif project_type == "video":
+    load collect/collect-video.md
+```

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

@@ -0,0 +1,239 @@
+# 비디오 프로젝트 상세 설정
+
+> 조건: `config.project_type == "video"`
+> 수집 대상: `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`, `config.token_format`
+> Dependencies: defs/video-compositions.md, defs/video-motions.md
+
+---
+
+## Q2-1. 비디오 유형
+
+> 참조: `defs/video-compositions.md`
+
+비디오 프로젝트 유형을 선택해주세요:
+
+```
+[1] 📱 숏폼 (Short-form) - 릴스, 쇼츠, TikTok
+[2] 🎬 롱폼 (Long-form) - 유튜브, 강의, 다큐
+[3] 📊 데이터 시각화 (Data Viz) - 차트, 인포그래픽 애니메이션
+[4] 📋 템플릿 (Template) - 재사용 가능한 비디오 템플릿
+[5] 🎮 인터랙티브 (Interactive) - 사용자 입력 반응형
+[6] 💼 비디오 SaaS - 비디오 생성 웹 서비스
+
+번호로 선택:
+```
+
+→ `config.type_detail.video_type`
+
+| 선택 | 값 |
+|------|-----|
+| 1 | `short_form` |
+| 2 | `long_form` |
+| 3 | `data_viz` |
+| 4 | `template` |
+| 5 | `interactive` |
+| 6 | `video_saas` |
+
+---
+
+## Q2-2. 출력 해상도 & 프레임
+
+```
+Q2-2. 출력 해상도를 선택해주세요:
+
+[1] 📱 1080×1920 (9:16 세로, 숏폼 기본)
+[2] 🖥️ 1920×1080 (16:9 가로, 유튜브 기본)
+[3] ⬛ 1080×1080 (1:1 정사각, 인스타그램)
+[4] 🎬 3840×2160 (4K UHD)
+[5] ✏️ 커스텀
+
+번호로 선택:
+```
+
+→ `config.type_detail.video_resolution`
+
+프레임 레이트:
+
+```
+FPS를 선택해주세요:
+
+[1] 24fps (영화)
+[2] 30fps (기본, 권장)
+[3] 60fps (부드러운 모션)
+
+번호로 선택:
+```
+
+→ `config.type_detail.video_fps`
+
+---
+
+## Q2-3. 미디어 기능 (복수 선택)
+
+```
+Q2-3. 사용할 미디어 기능을 선택해주세요 (쉼표 구분):
+
+[1] 🖼️ 이미지/사진
+[2] 🎵 오디오/BGM
+[3] 📝 자막/텍스트 오버레이
+[4] 🎬 비디오-인-비디오 (PiP)
+[5] 📊 차트/그래프 애니메이션
+[6] 🔤 커스텀 폰트
+[7] 🌐 외부 API 데이터
+
+예: 1,2,3,6
+```
+
+→ `config.type_detail.video_features[]`
+
+---
+
+## Q2-4. 렌더 타겟
+
+```
+Q2-4. 렌더링 대상을 선택해주세요:
+
+[1] 📁 로컬 파일 (MP4/WebM)
+[2] ☁️ Lambda 클라우드 (@remotion/lambda)
+[3] 🖥️ Player 컴포넌트 (브라우저 재생, @remotion/player)
+[4] 📁+🖥️ 로컬 파일 + Player
+
+번호로 선택:
+```
+
+→ `config.type_detail.render_target`
+
+| 선택 | 값 | 추가 의존성 |
+|------|-----|-----------|
+| 1 | `local` | - |
+| 2 | `lambda` | `@remotion/lambda` |
+| 3 | `player` | `@remotion/player` |
+| 4 | `local_player` | `@remotion/player` |
+
+---
+
+## Q2-5. 컴포지션 구조
+
+> 참조: `defs/video-compositions.md`
+
+```
+Q2-5. 컴포지션 구조를 선택해주세요:
+
+[1] 🎬 단일 (Single) - 하나의 메인 컴포지션
+[2] 📂 다중 (Multi) - 여러 독립 컴포지션
+[3] ⚙️ 파라메트릭 (Parametric) - InputProps 동적 생성
+
+번호로 선택:
+```
+
+→ `config.type_detail.composition_structure`
+
+| 선택 | 값 | 설명 |
+|------|-----|------|
+| 1 | `single` | Root.tsx에 하나의 Composition |
+| 2 | `multi` | Root.tsx에 여러 Composition 등록 |
+| 3 | `parametric` | calculateMetadata + InputProps 동적 |
+
+---
+
+## Q2-6. 디자인 토큰 형식
+
+```
+Q2-6. 디자인 토큰 형식을 선택해주세요:
+
+[1] 📦 JSON + CSS Variables (권장)
+[2] 📄 JSON Only
+```
+
+→ `config.token_format`
+
+| 선택 | 값 |
+|------|-----|
+| 1 | `css_variables` |
+| 2 | `json` |
+
+### video_saas 추가 옵션
+
+```
+if video_type == "video_saas":
+    토큰 형식 선택지에 추가:
+    [3] 🎨 Tailwind CSS (웹앱용)
+    → config.token_format = "tailwind"
+```
+
+---
+
+## Q2-7. 웹앱 프론트엔드 (video_saas 전용)
+
+> 조건: `config.type_detail.video_type == "video_saas"`
+
+```
+Q2-7. 비디오 SaaS의 웹앱 프론트엔드를 선택해주세요:
+
+[1] ⚛️ Next.js (권장)
+[2] ⚡ Vite + React
+[3] 🟢 Nuxt.js
+[4] 🔷 SvelteKit
+
+번호로 선택:
+```
+
+→ `config.type_detail.video_saas_frontend`
+
+---
+
+## 분기 로직 요약
+
+```
+video_type 분기:
+
+short_form | long_form | data_viz | template | interactive:
+    → 순수 비디오 프로젝트
+    → 토큰 범위 제한 (Colors, Typography, Animations 권장)
+
+video_saas:
+    → 이중 구조 (웹앱 + 비디오 엔진)
+    → 토큰 범위 전체 사용 가능
+    → 웹앱 프론트엔드 Q2-7에서 수집
+```
+
+---
+
+## 완료
+
+모든 비디오 상세 설정 질문 완료 후:
+
+```
+비디오 상세 설정이 완료되었습니다.
+
+유형: {config.type_detail.video_type}
+해상도: {config.type_detail.video_resolution.width}x{config.type_detail.video_resolution.height}
+FPS: {config.type_detail.video_fps}
+렌더 타겟: {config.type_detail.render_target}
+컴포지션: {config.type_detail.composition_structure}
+토큰 형식: {config.token_format}
+```
+
+→ collect-style.md로 자동 진행
+
+---
+
+## 실행 순서
+
+```
+collect-video.md 전체 실행 흐름:
+
+Q2-1. 비디오 유형 (short_form/long_form/data_viz/template/interactive/video_saas)
+  ↓
+Q2-2. 출력 해상도 & FPS
+  ↓
+Q2-3. 미디어 기능 (복수 선택)
+  ↓
+Q2-4. 렌더 타겟 (local/lambda/player/local_player)
+  ↓
+Q2-5. 컴포지션 구조 (single/multi/parametric)
+  ↓
+Q2-6. 디자인 토큰 형식
+  ↓
+Q2-7. 웹앱 프론트엔드 (video_saas 전용)
+```

package/skills/web-design/claude-code/collect/collect-web.md

@@ -0,0 +1,279 @@
+# 웹 상세 설정
+
+> 조건: `config.project_type == "web"`
+> 수집 대상: `config.type_detail.*`, `config.token_format`
+> Dependencies: defs/web-layouts.md, defs/web-motions.md, defs/image-strategies.md, defs/seo-guide.md
+
+---
+
+## Q2-1. 웹 유형
+
+```
+🌐 웹 유형을 선택해주세요:
+
+[1] 🏠 랜딩페이지 - 단일 페이지, 마케팅
+[2] 📊 대시보드 - 데이터 시각화, 관리자
+[3] 🛒 이커머스 - 쇼핑몰, 결제
+[4] 📝 블로그/콘텐츠 - CMS, SEO
+[5] 💬 SaaS/웹앱 - 복잡한 기능, 인증
+[6] 📄 포트폴리오 - 소개, 쇼케이스
+```
+
+→ `config.type_detail.web_type`
+
+## 분기 로직
+
+```
+web_type = config.type_detail.web_type
+
+switch(web_type):
+    "landing"    → show_landing_layouts()
+    "dashboard"  → show_dashboard_layouts()
+    "ecommerce"  → show_ecommerce_layouts()
+    "blog"       → show_blog_layouts()
+    "saas"       → show_saas_layouts()
+    "portfolio"  → show_portfolio_layouts()
+```
+
+---
+
+## Q2-L. 레이아웃 패턴 선택
+
+> 참조: `defs/web-layouts.md`
+
+```
+1. Read defs/web-layouts.md
+2. 웹 유형(web_type)에 따라 해당 레이아웃 옵션 표시
+3. 핵심 페이지/섹션 구성 질문 (랜딩 제외)
+→ config.type_detail.layout_pattern
+→ config.type_detail.layout_sections[]
+```
+
+### Q2-L1. 레이아웃 패턴 선택 (웹 유형별 분기)
+
+📐 웹 레이아웃 패턴을 선택해주세요:
+
+> `defs/web-layouts.md`에서 web_type에 해당하는 레이아웃 옵션 목록을 표시
+
+→ `config.type_detail.layout_pattern`
+
+### Q2-L2. 핵심 페이지/섹션 구성 (선택 사항)
+
+> 조건: `web_type != "landing"` (랜딩은 Q2-2에서 섹션 선택)
+
+레이아웃 패턴 선택 후, 포함할 핵심 페이지를 확인합니다.
+
+→ `config.type_detail.layout_sections[]`
+
+---
+
+## Q2-M. 모션/인터랙션 패턴 선택
+
+> 참조: `defs/web-motions.md`
+
+```
+1. Read defs/web-motions.md
+2. 웹 유형(web_type)에 따라 해당 모션 옵션 표시
+3. 모션 강도 질문 (모션 선택 시)
+→ config.type_detail.motion_pattern
+→ config.type_detail.motion_intensity
+```
+
+### Q2-M1. 모션/인터랙션 패턴 선택 (웹 유형별 분기)
+
+🎬 모션/인터랙션 패턴을 선택해주세요:
+
+> `defs/web-motions.md`에서 web_type에 해당하는 모션 옵션 목록을 표시
+
+→ `config.type_detail.motion_pattern`
+
+### Q2-M2. 모션 강도 설정
+
+> 조건: `config.type_detail.motion_pattern != "none"`
+
+```
+🎚️ 모션 강도를 선택해주세요:
+
+[1] 🌿 Subtle - 미묘하고 빠른 전환 (200-400ms)
+    비즈니스, 정보 중심에 적합
+
+[2] ⚖️ Moderate - 균형 잡힌 전환 (400-700ms) (권장)
+    범용, 대부분 프로젝트에 적합
+
+[3] 🎭 Dramatic - 임팩트 있는 전환 (700-1200ms)
+    크리에이티브, 브랜드 강조에 적합
+```
+
+→ `config.type_detail.motion_intensity`
+
+| 선택 | 값 |
+|------|-----|
+| 1 | `subtle` |
+| 2 | `moderate` |
+| 3 | `dramatic` |
+
+> 참고: `prefers-reduced-motion` 미디어 쿼리는 모든 강도에 자동 적용됩니다.
+
+---
+
+## Q2-I. 이미지 전략 선택
+
+> 참조: `defs/image-strategies.md`
+
+```
+1. Read defs/image-strategies.md
+2. 웹 유형(web_type)에 따라 해당 이미지 전략 옵션 표시
+→ config.type_detail.image_strategy
+```
+
+### Q2-I1. 이미지 전략 선택 (웹 유형별 분기)
+
+🖼️ 이미지 전략을 선택해주세요:
+
+> `defs/image-strategies.md`에서 web_type에 해당하는 이미지 전략 옵션 목록을 표시
+
+→ `config.type_detail.image_strategy`
+
+---
+
+## Q2-2. 섹션 선택 (랜딩페이지 선택 시)
+
+> 조건: `config.type_detail.web_type == "landing"`
+
+```
+랜딩페이지 섹션을 선택해주세요 (쉼표로 구분):
+
+[1] Hero    [2] Features  [3] Pricing
+[4] Reviews [5] Team      [6] CTA
+[7] FAQ     [8] Contact   [9] Footer
+
+예: 1,2,4,6,7,9
+```
+
+→ `config.type_detail.sections[]`
+
+---
+
+## Q2-3. 반응형 설정
+
+```
+반응형 설정:
+
+[1] 📱 모바일 퍼스트
+[2] 🖥️ 데스크톱 퍼스트
+[3] 📐 완전 반응형 (권장)
+```
+
+→ `config.type_detail.responsive`
+
+| 선택 | 값 |
+|------|-----|
+| 1 | `mobile_first` |
+| 2 | `desktop_first` |
+| 3 | `full` |
+
+---
+
+## Q2-4. 디자인 토큰 형식
+
+```
+🎨 디자인 토큰 형식을 선택해주세요:
+
+[1] 📦 Tailwind Config (권장)
+    Tailwind 프로젝트에 즉시 적용 가능
+    tailwind.config.js 형태로 생성
+
+[2] 🎨 JSON + CSS Variables
+    런타임 테마 전환 지원, 다크모드에 유리
+    tokens.json + variables.css 생성
+
+[3] 📄 JSON Only
+    빌드 도구에서 변환, 최대 유연성
+    tokens.json만 생성
+```
+
+→ `config.token_format`
+
+| 선택 | 값 |
+|------|-----|
+| 1 | `tailwind` |
+| 2 | `css_variables` |
+| 3 | `json` |
+
+---
+
+## Q2-5. SEO 설정
+
+> 참조: `defs/seo-guide.md`
+
+```
+🔍 SEO(검색엔진 최적화) 수준을 선택해주세요:
+
+[1] 📋 기본 SEO (권장)
+    meta 태그, robots.txt, sitemap.xml, OG 태그
+    Google/Naver 서치어드바이저 등록 가이드
+
+[2] 🚀 고급 SEO
+    + Schema.org/JSON-LD, OG 이미지 가이드, 자동 sitemap
+    + Naver 신디케이션, Daum 검색등록, Core Web Vitals
+
+[N] ❌ SEO 없음
+    대시보드 등 비공개 서비스
+```
+
+→ `config.type_detail.seo_level`
+
+| 선택 | 값 |
+|------|-----|
+| 1 | `basic` |
+| 2 | `advanced` |
+| N | `none` |
+
+---
+
+## 완료
+
+모든 웹 상세 설정 질문 완료 후:
+
+```
+웹 상세 설정이 완료되었습니다.
+
+유형: {config.type_detail.web_type}
+레이아웃: {config.type_detail.layout_pattern}
+모션: {config.type_detail.motion_pattern} ({config.type_detail.motion_intensity})
+이미지: {config.type_detail.image_strategy}
+반응형: {config.type_detail.responsive}
+SEO: {config.type_detail.seo_level}
+토큰 형식: {config.token_format}
+```
+
+→ collect-style.md로 자동 진행
+
+---
+
+## 실행 순서
+
+```
+collect-web.md 전체 실행 흐름:
+
+Q2-1. 웹 유형 (landing/dashboard/ecommerce/blog/saas/portfolio)
+  ↓
+Q2-L. 레이아웃 패턴         → defs/web-layouts.md
+  ├─ Q2-L1. 레이아웃 패턴 (웹 유형별 분기)
+  └─ Q2-L2. 핵심 페이지/섹션 구성 (랜딩 제외)
+  ↓
+Q2-M. 모션/인터랙션 패턴     → defs/web-motions.md
+  ├─ Q2-M1. 모션 패턴 (웹 유형별 분기)
+  └─ Q2-M2. 모션 강도 설정 (모션 선택 시)
+  ↓
+Q2-I. 이미지 전략 선택        → defs/image-strategies.md
+  └─ Q2-I1. 이미지 전략 (웹 유형별 분기)
+  ↓
+Q2-2. 섹션 선택 (랜딩만)
+  ↓
+Q2-3. 반응형 설정
+  ↓
+Q2-4. 디자인 토큰 형식
+  ↓
+Q2-5. SEO 설정 (basic/advanced/none)
+```