timelabs 0.1.0 → 0.1.1

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

@@ -0,0 +1,258 @@
+# 앱 상세 설정
+
+> 조건: `config.project_type == "app"`
+> 수집 대상: `config.type_detail.*`, `config.token_format`
+> Dependencies: defs/app-layouts.md, defs/app-motions.md
+
+---
+
+## Q2-1. 타겟 플랫폼
+
+```
+📱 타겟 플랫폼:
+
+[1] 🍎 iOS Only
+[2] 🤖 Android Only
+[3] 📱 크로스플랫폼 (iOS+Android)
+```
+
+→ `config.type_detail.platform`
+
+| 선택 | 값 |
+|------|-----|
+| 1 | `ios` |
+| 2 | `android` |
+| 3 | `cross` |
+
+---
+
+## Q2-2. 앱 유형
+
+```
+앱 유형:
+
+[1] 📊 유틸리티  [2] 💬 소셜
+[3] 🎮 게임     [4] 💰 핀테크
+[5] 🏥 헬스케어 [6] 🛒 이커머스
+[7] 📚 교육     [8] 🎨 크리에이티브
+```
+
+→ `config.type_detail.app_type`
+
+## 분기 로직
+
+```
+app_type = config.type_detail.app_type
+
+switch(app_type):
+    "utility"    → show_utility_layouts()
+    "social"     → show_social_layouts()
+    "game"       → show_game_layouts()
+    "fintech"    → show_fintech_layouts()
+    "healthcare" → show_healthcare_layouts()
+    "ecommerce"  → show_ecommerce_layouts()
+    "education"  → show_education_layouts()
+    "creative"   → show_creative_layouts()
+```
+
+---
+
+## Q2-L. 레이아웃 패턴 선택
+
+> 참조: `defs/app-layouts.md`
+
+```
+1. Read defs/app-layouts.md
+2. 앱 유형(app_type)에 따라 해당 레이아웃 옵션 표시
+3. 핵심 화면 구성 질문
+→ config.type_detail.layout_pattern
+→ config.type_detail.layout_screens[]
+```
+
+### Q2-L1. 레이아웃 패턴 선택 (앱 유형별 분기)
+
+📐 앱 레이아웃 패턴을 선택해주세요:
+
+> `defs/app-layouts.md`에서 app_type에 해당하는 레이아웃 옵션 목록을 표시
+
+→ `config.type_detail.layout_pattern`
+
+### Q2-L2. 핵심 화면 구성 (선택 사항)
+
+레이아웃 패턴 선택 후, 해당 패턴에 포함할 핵심 화면을 확인합니다.
+
+→ `config.type_detail.layout_screens[]`
+
+---
+
+## Q2-M. 모션/인터랙션 패턴 선택
+
+> 참조: `defs/app-motions.md`
+
+```
+1. Read defs/app-motions.md
+2. 앱 유형(app_type)에 따라 해당 모션 옵션 표시
+3. 모션 강도 질문 (모션 선택 시)
+→ config.type_detail.motion_pattern
+→ config.type_detail.motion_intensity
+```
+
+### Q2-M1. 모션/인터랙션 패턴 선택 (앱 유형별 분기)
+
+🎬 모션/인터랙션 패턴을 선택해주세요:
+
+> `defs/app-motions.md`에서 app_type에 해당하는 모션 옵션 목록을 표시
+
+→ `config.type_detail.motion_pattern`
+
+### Q2-M2. 모션 강도 설정
+
+> 조건: `config.type_detail.motion_pattern != "none"`
+
+```
+🎚️ 모션 강도를 선택해주세요:
+
+[1] 🌿 Subtle - 빠르고 정확 (150-300ms, stiff spring)
+    비즈니스, 유틸리티에 적합
+
+[2] ⚖️ Moderate - 균형 잡힌 (300-500ms, default spring) (권장)
+    범용, 대부분 앱에 적합
+
+[3] 🎭 Dramatic - 임팩트 (500-800ms, bouncy spring)
+    게임, 소셜, 크리에이티브에 적합
+```
+
+→ `config.type_detail.motion_intensity`
+
+| 선택 | 값 |
+|------|-----|
+| 1 | `subtle` |
+| 2 | `moderate` |
+| 3 | `dramatic` |
+
+> 참고: `AccessibilityInfo.isReduceMotionEnabled()` 체크 자동 적용
+
+---
+
+## Q2-3. 네비게이션 패턴
+
+```
+네비게이션 패턴:
+
+[1] 📑 탭 바
+[2] 📋 사이드 드로어
+[3] 📚 스택만
+[4] 🔀 혼합
+```
+
+→ `config.type_detail.navigation`
+
+| 선택 | 값 |
+|------|-----|
+| 1 | `tab` |
+| 2 | `drawer` |
+| 3 | `stack` |
+| 4 | `mixed` |
+
+---
+
+## Q2-4. 네이티브 기능 (다중 선택)
+
+```
+필요한 네이티브 기능 (쉼표로 구분):
+
+[1] 📷 카메라    [2] 📍 위치
+[3] 🔔 푸시알림  [4] 💾 오프라인
+[5] 🔐 생체인증  [6] 💳 인앱결제
+[7] 📤 공유
+
+예: 1,2,3
+```
+
+→ `config.type_detail.native_features[]`
+
+---
+
+## Q2-5. 디자인 토큰 형식
+
+```
+🎨 디자인 토큰 형식을 선택해주세요:
+
+[1] 🌐 Style Dictionary (권장)
+    iOS/Android/웹 자동 변환, 멀티플랫폼 지원
+    style-dictionary/ 구조로 생성
+
+[2] 📄 JSON Only
+    플랫폼별 수동 변환, 커스텀 파이프라인
+    tokens.json만 생성
+
+[3] 📦 JSON + 플랫폼별 Config
+    각 플랫폼 설정 파일 함께 생성
+    tokens.json + ios/colors.swift + android/colors.xml
+```
+
+→ `config.token_format`
+
+| 선택 | 값 |
+|------|-----|
+| 1 | `style_dictionary` |
+| 2 | `json` |
+| 3 | `platform_config` |
+
+---
+
+## 타입별 제외 질문
+
+> 아래 질문은 **Web 전용**이므로 App 타입에서는 표시하지 않습니다.
+
+| Web 전용 질문 | 제외 사유 |
+|--------------|----------|
+| Q2-I (이미지 전략) | 앱은 플랫폼 가이드라인(HIG/Material)에 따라 이미지 처리가 결정됨 |
+| Q2-5 (SEO 설정) | 네이티브 앱은 ASO(App Store Optimization)가 SEO를 대체하며, ASO는 빌드 단계에서 처리 |
+| Q2-2 (랜딩 섹션) | 랜딩페이지는 Web 전용 개념 |
+| Q2-3 (반응형 설정) | 앱은 디바이스별 적응형(Adaptive) 레이아웃을 사용하며 Q2-L에서 처리 |
+
+---
+
+## 완료
+
+모든 앱 상세 설정 질문 완료 후:
+
+```
+앱 상세 설정이 완료되었습니다.
+
+플랫폼: {config.type_detail.platform}
+유형: {config.type_detail.app_type}
+레이아웃: {config.type_detail.layout_pattern}
+모션: {config.type_detail.motion_pattern} ({config.type_detail.motion_intensity})
+네비게이션: {config.type_detail.navigation}
+토큰 형식: {config.token_format}
+```
+
+→ collect-style.md로 자동 진행
+
+---
+
+## 실행 순서
+
+```
+collect-app.md 전체 실행 흐름:
+
+Q2-1. 타겟 플랫폼 (ios/android/cross)
+  ↓
+Q2-2. 앱 유형 (utility/social/game/fintech/healthcare/ecommerce/education/creative)
+  ↓
+Q2-L. 레이아웃 패턴              → defs/app-layouts.md
+  ├─ Q2-L1. 레이아웃 패턴 (앱 유형별 분기)
+  └─ Q2-L2. 핵심 화면 구성
+  ↓
+Q2-M. 모션/인터랙션 패턴          → defs/app-motions.md
+  ├─ Q2-M1. 모션 패턴 (앱 유형별 분기)
+  └─ Q2-M2. 모션 강도 (모션 선택 시)
+  ↓
+Q2-3. 네비게이션 패턴
+  ↓
+Q2-4. 네이티브 기능 (다중 선택)
+  ↓
+Q2-5. 디자인 토큰 형식
+```

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

@@ -0,0 +1,231 @@
+# PC앱 상세 설정
+
+> 조건: `config.project_type == "desktop"`
+> 수집 대상: `config.type_detail.*`, `config.token_format`
+> Dependencies: defs/desktop-layouts.md, defs/desktop-motions.md
+
+---
+
+## Q2-1. 타겟 OS
+
+```
+🖥️ 타겟 OS:
+
+[1] 🪟 Windows Only
+[2] 🍎 macOS Only
+[3] 🐧 Linux Only
+[4] 🌐 크로스플랫폼
+```
+
+→ `config.type_detail.target_os`
+
+| 선택 | 값 |
+|------|-----|
+| 1 | `windows` |
+| 2 | `macos` |
+| 3 | `linux` |
+| 4 | `cross` |
+
+---
+
+## Q2-2. 앱 유형
+
+```
+앱 유형:
+
+[1] 🛠️ 유틸리티/도구
+[2] 📊 데이터 관리
+[3] 🎨 크리에이티브
+[4] 💬 커뮤니케이션
+[5] 🎮 게임
+[6] 💼 비즈니스
+```
+
+→ `config.type_detail.app_type`
+
+## 분기 로직
+
+```
+app_type = config.type_detail.app_type
+
+switch(app_type):
+    "utility"       → show_utility_layouts()
+    "data"          → show_data_layouts()
+    "creative"      → show_creative_layouts()
+    "communication" → show_communication_layouts()
+    "game"          → show_game_layouts()
+    "business"      → show_business_layouts()
+```
+
+---
+
+## Q2-L. 레이아웃 패턴 선택
+
+> 참조: `defs/desktop-layouts.md`
+
+```
+1. Read defs/desktop-layouts.md
+2. 앱 유형(app_type)에 따라 해당 레이아웃 옵션 표시
+3. 핵심 화면 구성 질문
+→ config.type_detail.layout_pattern
+→ config.type_detail.layout_screens[]
+```
+
+### Q2-L1. 레이아웃 패턴 선택 (앱 유형별 분기)
+
+📐 레이아웃을 선택해주세요:
+
+> `defs/desktop-layouts.md`에서 app_type에 해당하는 레이아웃 옵션 목록을 표시
+
+→ `config.type_detail.layout_pattern`
+
+### Q2-L2. 핵심 화면 구성
+
+핵심 화면을 선택해주세요 (쉼표로 구분, ALL=전체):
+
+> `defs/desktop-layouts.md`에서 app_type에 해당하는 핵심 화면 옵션을 표시
+
+→ `config.type_detail.layout_screens[]`
+
+---
+
+## Q2-M. 모션/인터랙션 패턴 선택
+
+> 참조: `defs/desktop-motions.md`
+
+```
+1. Read defs/desktop-motions.md
+2. 앱 유형(app_type)에 따라 해당 모션 옵션 표시
+3. 모션 강도 질문 (모션 선택 시)
+→ config.type_detail.motion_pattern
+→ config.type_detail.motion_intensity
+```
+
+### Q2-M1. 모션/인터랙션 패턴 선택 (앱 유형별 분기)
+
+🎬 모션/인터랙션 패턴을 선택해주세요:
+
+> `defs/desktop-motions.md`에서 app_type에 해당하는 모션 옵션 목록을 표시
+
+→ `config.type_detail.motion_pattern`
+
+### Q2-M2. 모션 강도 설정
+
+> 조건: `config.type_detail.motion_pattern != "none"`
+
+```
+🎚️ 모션 강도를 선택해주세요:
+
+[1] 🌿 Subtle - 빠르고 정확 (100-250ms)
+    유틸리티, 비즈니스에 적합
+
+[2] ⚖️ Moderate - 균형 잡힌 (250-500ms) (권장)
+    범용, 대부분 데스크톱 앱에 적합
+
+[3] 🎭 Dramatic - 임팩트 (500-1000ms)
+    게임, 크리에이티브에 적합
+```
+
+→ `config.type_detail.motion_intensity`
+
+| 선택 | 값 |
+|------|-----|
+| 1 | `subtle` |
+| 2 | `moderate` |
+| 3 | `dramatic` |
+
+> 참고: `prefers-reduced-motion` + Electron `systemPreferences` 자동 대응
+
+---
+
+## Q2-3. 시스템 연동 (다중 선택)
+
+```
+시스템 연동 기능 (쉼표로 구분):
+
+[1] 📁 파일시스템  [2] ⌨️ 글로벌단축키
+[3] 🔔 시스템트레이 [4] 🔄 자동업데이트
+[5] 🗄️ 로컬DB      [6] 🔌 시스템API
+
+예: 1,3,4
+```
+
+→ `config.type_detail.system_features[]`
+
+---
+
+## Q2-4. 디자인 토큰 형식
+
+```
+🎨 디자인 토큰 형식을 선택해주세요:
+
+[1] 🎨 JSON + CSS Variables (권장)
+    Electron/Tauri 호환, 웹 기술 기반 앱에 적합
+    tokens.json + variables.css 생성
+
+[2] 📄 JSON Only
+    프레임워크별 변환, 커스텀 스타일링
+    tokens.json만 생성
+```
+
+→ `config.token_format`
+
+| 선택 | 값 |
+|------|-----|
+| 1 | `css_variables` |
+| 2 | `json` |
+
+---
+
+## 타입별 제외 질문
+
+> 아래 질문은 **Web 전용**이므로 Desktop 타입에서는 표시하지 않습니다.
+
+| Web 전용 질문 | 제외 사유 |
+|--------------|----------|
+| Q2-I (이미지 전략) | 데스크톱 앱은 로컬 에셋 번들링 사용, 웹 이미지 최적화 전략 불필요 |
+| Q2-5 (SEO 설정) | 데스크톱 앱은 웹 검색엔진 최적화 대상 아님 |
+| Q2-2 (랜딩 섹션) | 랜딩페이지는 Web 전용 개념 |
+| Q2-3 (반응형 설정) | 데스크톱은 윈도우 리사이징 처리이며 Q2-L에서 패널 레이아웃으로 처리 |
+
+---
+
+## 완료
+
+모든 PC앱 상세 설정 질문 완료 후:
+
+```
+PC앱 상세 설정이 완료되었습니다.
+
+타겟 OS: {config.type_detail.target_os}
+유형: {config.type_detail.app_type}
+레이아웃: {config.type_detail.layout_pattern}
+모션: {config.type_detail.motion_pattern} ({config.type_detail.motion_intensity})
+토큰 형식: {config.token_format}
+```
+
+→ collect-style.md로 자동 진행
+
+---
+
+## 실행 순서
+
+```
+collect-desktop.md 전체 실행 흐름:
+
+Q2-1. 타겟 OS (windows/macos/linux/cross)
+  ↓
+Q2-2. 앱 유형 (utility/data/creative/communication/game/business)
+  ↓
+Q2-L. 레이아웃 패턴              → defs/desktop-layouts.md
+  ├─ Q2-L1. 레이아웃 패턴 선택 (앱 유형별 분기)
+  └─ Q2-L2. 핵심 화면 구성 (앱 유형별 옵션)
+  ↓
+Q2-M. 모션/인터랙션 패턴          → defs/desktop-motions.md
+  ├─ Q2-M1. 모션 패턴 선택 (앱 유형별 분기)
+  └─ Q2-M2. 모션 강도 설정 (모션 선택 시)
+  ↓
+Q2-3. 시스템 연동 기능 (다중 선택)
+  ↓
+Q2-4. 디자인 토큰 형식 (css_variables/json)
+```

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

@@ -0,0 +1,222 @@
+# 혼합(멀티플랫폼) 상세 설정
+
+> 조건: `config.project_type == "hybrid"`
+> 수집 대상: `config.type_detail.*`, `config.token_format`
+> Dependencies: defs/hybrid-layouts.md, defs/hybrid-motions.md
+
+---
+
+## Q2-1. 플랫폼 조합
+
+```
+🔀 플랫폼 조합:
+
+[1] 🌐📱 웹 + 모바일
+[2] 🌐🖥️ 웹 + PC
+[3] 📱🖥️ 모바일 + PC
+[4] 🌐📱🖥️ 전체
+```
+
+→ `config.type_detail.platform_combo`
+
+| 선택 | 값 |
+|------|-----|
+| 1 | `web_mobile` |
+| 2 | `web_desktop` |
+| 3 | `mobile_desktop` |
+| 4 | `all` |
+
+---
+
+## Q2-2. 코드 공유 전략
+
+```
+코드 공유 전략:
+
+[1] 🔄 모노레포 (공유 코어)
+[2] 📦 공유 패키지 (npm)
+[3] 🎯 독립 (API만 공유)
+```
+
+→ `config.type_detail.code_sharing`
+
+| 선택 | 값 |
+|------|-----|
+| 1 | `monorepo` |
+| 2 | `shared_package` |
+| 3 | `independent` |
+
+## 분기 로직
+
+```
+platform_combo = config.type_detail.platform_combo
+
+switch(platform_combo):
+    "web_mobile"      → show_web_mobile_layouts()
+    "web_desktop"     → show_web_desktop_layouts()
+    "mobile_desktop"  → show_mobile_desktop_layouts()
+    "all"             → show_all_platform_layouts()
+```
+
+---
+
+## Q2-L. 레이아웃 패턴 선택
+
+> 참조: `defs/hybrid-layouts.md`
+
+```
+1. Read defs/hybrid-layouts.md
+2. 플랫폼 조합(platform_combo)에 따라 해당 레이아웃 옵션 표시
+3. 핵심 화면 구성 질문
+→ config.type_detail.layout_pattern
+→ config.type_detail.layout_screens[]
+```
+
+### Q2-L1. 레이아웃 패턴 선택 (플랫폼 조합별 분기)
+
+📐 크로스플랫폼 레이아웃 전략을 선택해주세요:
+
+> `defs/hybrid-layouts.md`에서 platform_combo에 해당하는 레이아웃 옵션 목록을 표시
+
+→ `config.type_detail.layout_pattern`
+
+### Q2-L2. 핵심 화면/페이지 구성 (선택 사항)
+
+레이아웃 패턴 선택 후, 해당 패턴에 포함할 핵심 화면을 확인합니다.
+
+→ `config.type_detail.layout_screens[]`
+
+---
+
+## Q2-M. 모션/인터랙션 패턴 선택
+
+> 참조: `defs/hybrid-motions.md`
+
+```
+1. Read defs/hybrid-motions.md
+2. 플랫폼 조합(platform_combo)에 따라 해당 모션 옵션 표시
+3. 모션 강도 질문 (모션 선택 시)
+→ config.type_detail.motion_pattern
+→ config.type_detail.motion_intensity
+```
+
+### Q2-M1. 모션/인터랙션 패턴 선택 (플랫폼 조합별 분기)
+
+🎬 크로스플랫폼 모션 전략을 선택해주세요:
+
+> `defs/hybrid-motions.md`에서 platform_combo에 해당하는 모션 옵션 목록을 표시
+
+→ `config.type_detail.motion_pattern`
+
+### Q2-M2. 모션 강도 설정
+
+> 조건: `config.type_detail.motion_pattern != "none"`
+
+```
+🎚️ 모션 강도를 선택해주세요:
+
+[1] 🌿 Subtle - 빠르고 정확 (150-250ms)
+    생산성, 비즈니스에 적합
+
+[2] ⚖️ Moderate - 균형 잡힌 (300-500ms) (권장)
+    범용, 대부분 크로스플랫폼에 적합
+
+[3] 🎭 Dramatic - 임팩트 (500-1000ms)
+    크리에이티브, 브랜드 강조에 적합
+
+[4] 🔄 Adaptive - 기기별 자동 조정
+    기기 성능/설정에 따라 자동 최적화
+    대규모 사용자 기반에 적합
+```
+
+→ `config.type_detail.motion_intensity`
+
+| 선택 | 값 |
+|------|-----|
+| 1 | `subtle` |
+| 2 | `moderate` |
+| 3 | `dramatic` |
+| 4 | `adaptive` |
+
+> 참고: Adaptive는 각 플랫폼의 접근성 설정을 자동 감지하여 모션 레벨을 조정합니다.
+
+---
+
+## Q2-3. 디자인 토큰 형식
+
+```
+🎨 디자인 토큰 형식을 선택해주세요:
+
+[1] 🌐 Style Dictionary (권장)
+    모든 플랫폼 자동 변환, 단일 소스로 멀티 타겟
+    웹: CSS Variables / iOS: Swift / Android: XML
+
+[2] 📄 JSON + 개별 Config
+    플랫폼별 설정 파일 개별 생성
+    tokens.json + tailwind.config.js + ios/ + android/
+
+[3] 📄 JSON Only
+    플랫폼별 수동 변환, 완전한 커스텀 제어
+    tokens.json만 생성
+```
+
+→ `config.token_format`
+
+| 선택 | 값 |
+|------|-----|
+| 1 | `style_dictionary` |
+| 2 | `platform_config` |
+| 3 | `json` |
+
+---
+
+## 타입별 제외 질문
+
+> 아래 질문은 **Web 전용**이므로 Hybrid 타입에서는 표시하지 않습니다.
+
+| Web 전용 질문 | 제외 사유 |
+|--------------|----------|
+| Q2-I (이미지 전략) | Hybrid는 플랫폼별 에셋 파이프라인 사용, 웹 이미지 전략은 web 컴포넌트에만 해당하며 Q2-L에서 처리 |
+| Q2-5 (SEO 설정) | Hybrid의 웹 부분 SEO는 프레임워크 선택에 따라 자동 결정 |
+| Q2-2 (랜딩 섹션) | 랜딩페이지는 Web 전용 개념 |
+| Q2-3 (반응형 설정) | Hybrid는 플랫폼별 적응형 레이아웃 사용, Q2-L1에서 크로스플랫폼 전략으로 대체 |
+
+---
+
+## 완료
+
+모든 혼합 상세 설정 질문 완료 후:
+
+```
+혼합(멀티플랫폼) 상세 설정이 완료되었습니다.
+
+플랫폼 조합: {config.type_detail.platform_combo}
+코드 공유: {config.type_detail.code_sharing}
+레이아웃: {config.type_detail.layout_pattern}
+모션: {config.type_detail.motion_pattern} ({config.type_detail.motion_intensity})
+토큰 형식: {config.token_format}
+```
+
+→ collect-style.md로 자동 진행
+
+---
+
+## 실행 순서
+
+```
+collect-hybrid.md 전체 실행 흐름:
+
+Q2-1. 플랫폼 조합 (web_mobile/web_desktop/mobile_desktop/all)
+  ↓
+Q2-2. 코드 공유 전략 (monorepo/shared_package/independent)
+  ↓
+Q2-L. 레이아웃 패턴              → defs/hybrid-layouts.md
+  ├─ Q2-L1. 레이아웃 패턴 (플랫폼 조합별 분기)
+  └─ Q2-L2. 핵심 화면 구성 (선택)
+  ↓
+Q2-M. 모션/인터랙션 패턴          → defs/hybrid-motions.md
+  ├─ Q2-M1. 모션 패턴 (플랫폼 조합별 분기)
+  └─ Q2-M2. 모션 강도 (모션 선택 시)
+  ↓
+Q2-3. 디자인 토큰 형식
+```