timelabs 0.1.0 → 0.1.1

package/skills/web-design/claude-code/defs/desktop-motions/05-game.md

@@ -0,0 +1,55 @@
+# 5. 게임 (`game`)
+
+
+### DG-M1. Immersive Desktop (몰입형 데스크톱)
+
+```
+기법: 풀스크린 전환, 파티클, 셰이더 이펙트
+포함: fullscreen-transition | particle-system | shader-effect | camera-shake
+
+  Fullscreen:
+  [windowed] ──F11→ [fullscreen] (zoom + fade, 500ms)
+
+  Impact: 💥 particle burst + screen shake
+  Ambient: ✨ floating particles (continuous)
+
+강도: dramatic
+적합: PC 게임, 인터랙티브 시뮬레이션
+특징: GPU 가속 필수, WebGL/Canvas 활용
+```
+
+### DG-M2. Menu & HUD (메뉴 & HUD)
+
+```
+기법: 게임 메뉴 애니메이션, HUD 전환
+포함: menu-cascade | hud-fade | health-bar | minimap-pulse
+
+  Main Menu:
+  [New Game]  ─── 0ms ───→ slide-in
+  [Continue]  ─── 80ms ──→ slide-in
+  [Settings]  ─── 160ms ─→ slide-in
+  [Exit]      ─── 240ms ─→ slide-in
+
+  HUD: fade-in on game start (500ms)
+  Health: smooth bar decrease (300ms)
+
+강도: moderate ~ dramatic
+적합: 모든 데스크톱 게임
+```
+
+### DG-M3. Casual & Light (캐주얼 경량)
+
+```
+기법: 가벼운 애니메이션, 보상 이펙트
+포함: bounce-tap | reward-confetti | score-popup | combo-flash
+
+  Score: +100 ← float up + fade (400ms)
+  Reward: 🎉 confetti burst (800ms)
+  Combo: x5! ← scale punch + glow (300ms)
+
+강도: moderate
+적합: 퍼즐, 캐주얼 게임, 교육용 게임
+```
+
+---
+

package/skills/web-design/claude-code/defs/desktop-motions/06-business.md

@@ -0,0 +1,52 @@
+# 6. 비즈니스 (`business`)
+
+
+### DB-M1. Professional Polish (프로페셔널)
+
+```
+기법: 절제된 전환, 명확한 피드백
+포함: page-crossfade | form-validation | button-feedback | modal-scale
+
+  Page transition: crossfade (200ms, ease)
+  Modal: scale(0.95→1.0) + fade (250ms)
+  Form error: shake input (200ms) + red border
+
+강도: subtle
+적합: ERP, CRM, 회계 소프트웨어
+특징: 빈번한 조작에 방해 없는 수준
+```
+
+### DB-M2. Dashboard Live (대시보드 라이브)
+
+```
+기법: 실시간 데이터 업데이트, KPI 카운트
+포함: kpi-count-up | chart-update | status-badge | refresh-spin
+
+  KPI: $0 → $45,230 (count-up, 1.2s)
+  Chart: smooth data point transition (400ms)
+  Status: [Active] green pulse (infinite, subtle)
+  Refresh: ↻ spin (500ms)
+
+강도: moderate
+적합: 비즈니스 대시보드, 리포트 도구
+```
+
+### DB-M3. Workflow & Process (워크플로우)
+
+```
+기법: 단계별 프로세스 전환, 승인/반려 피드백
+포함: step-progress | approval-check | reject-shake | pipeline-flow
+
+  Workflow:
+  ①━━●━━②━━○━━③━━○━━④━━○
+  ████████████░░░░░░░░░░░░░░░
+
+  Approve: ✅ green flash + confetti (subtle)
+  Reject:  ❌ red shake + return animation
+
+강도: subtle ~ moderate
+적합: 결재 시스템, 프로젝트 관리, 파이프라인
+```
+
+---
+

package/skills/web-design/claude-code/defs/desktop-motions.md

@@ -0,0 +1,75 @@
+# PC앱 모션/인터랙션 패턴 정의
+
+> 참조 위치: `stages/stage2-desktop-motion.md`에서 분기 사용
+> app_type별 추천 모션 패턴 정의 (Electron / Tauri / Native)
+> Dependencies: 없음 (독립 참조 데이터)
+
+---
+
+## 공통 모션 카테고리
+
+| 카테고리 | 설명 |
+|----------|------|
+| **Window Transition** | 윈도우 열기/닫기, 최소화, 최대화 전환 |
+| **Panel & Layout** | 사이드바, 탭, 분할 패널 전환 |
+| **System Integration** | 트레이, 알림, 글로벌 단축키 피드백 |
+| **Data & Content** | 데이터 로딩, 업데이트, 리스트 전환 |
+| **Micro-interaction** | 버튼, 입력, 토글 등 소규모 피드백 |
+
+---
+
+## 1. 유틸리티/도구 (`utility`)
+
+> 상세: `defs/desktop-motions/01-utility.md` 참조
+
+기법: 즉각적 피드백, 최소 딜레이
+## 2. 데이터 관리 (`data`)
+
+> 상세: `defs/desktop-motions/02-data.md` 참조
+
+기법: 테이블 행/열 추가·삭제·정렬 애니메이션
+## 3. 크리에이티브 (`creative`)
+
+> 상세: `defs/desktop-motions/03-creative.md` 참조
+
+기법: 캔버스 줌/팬, 레이어 전환, 도구 선택 피드백
+## 4. 커뮤니케이션 (`communication`)
+
+> 상세: `defs/desktop-motions/04-communication.md` 참조
+
+기법: 메시지 등장, 타이핑 상태, 읽음 표시
+## 5. 게임 (`game`)
+
+> 상세: `defs/desktop-motions/05-game.md` 참조
+
+기법: 풀스크린 전환, 파티클, 셰이더 이펙트
+## 6. 비즈니스 (`business`)
+
+> 상세: `defs/desktop-motions/06-business.md` 참조
+
+기법: 절제된 전환, 명확한 피드백
+## 데스크톱 전용 시스템 모션
+
+모든 앱 유형에 공통 적용 가능:
+
+| 모션 | 설명 | 구현 |
+|------|------|------|
+| **Window Open** | 창 열기 (scale 0.95→1.0 + fade) | CSS + Electron BrowserWindow |
+| **Tray Animation** | 트레이 아이콘 펄스/뱃지 | Electron tray.setImage sequence |
+| **Minimize to Tray** | 창 축소 → 트레이 (scale down) | BrowserWindow animate |
+| **Splash Screen** | 스플래시 로딩 → 메인 전환 | Overlay fade-out |
+| **Global Shortcut** | 단축키 호출 시 윈도우 등장 | slide-down or fade-in |
+
+---
+
+## 모션 강도 프리셋 (데스크톱)
+
+| 프리셋 | `motion_intensity` | duration | easing | 설명 |
+|--------|-------------------|----------|--------|------|
+| **Subtle** | `subtle` | 100-250ms | ease-out | 빠르고 정확, 비즈니스/유틸 |
+| **Moderate** | `moderate` | 250-500ms | ease-in-out | 균형, 범용 |
+| **Dramatic** | `dramatic` | 500-1000ms | cubic-bezier | 임팩트, 게임/크리에이티브 |
+| **None** | `none` | 0ms | - | 모션 없음, 성능 우선 |
+
+> `prefers-reduced-motion` 자동 대응
+> Electron: `systemPreferences.getAnimationSettings()` 활용

package/skills/web-design/claude-code/defs/hybrid-layouts/01-web_mobile.md

@@ -0,0 +1,81 @@
+# 1. 웹 + 모바일 (`web_mobile`)
+
+
+### hybrid_wm_responsive — 반응형 적응 (Responsive Adaptive)
+
+```
+Desktop (≥1024px)          Tablet (768-1023px)       Mobile (<768px)
+┌──────┬──────────┐       ┌──────────────────┐      ┌──────────────┐
+│      │          │       │ [≡]  Title  [🔍] │      │ [≡] Title [🔍]│
+│ Side │  Main    │       ├──────────────────┤      ├──────────────┤
+│ bar  │  Content │       │                  │      │              │
+│      │          │       │   Main Content   │      │ Main Content │
+│      │          │       │                  │      │ (풀 와이드)   │
+│      │          │       │                  │      │              │
+└──────┴──────────┘       └──────────────────┘      ├──────────────┤
+                                                    │ [🏠][🔍][👤][⚙️]│
+                                                    └──────────────┘
+
+웹: sidebar navigation       태블릿: hamburger menu      모바일: bottom tab
+```
+
+- **특징**: 단일 코드베이스, 브레이크포인트별 레이아웃 전환
+- **적합**: 콘텐츠 앱, 뉴스, 블로그, SaaS 대시보드
+- **네비**: Desktop=sidebar → Tablet=hamburger → Mobile=bottom tab
+- **구현**: CSS Grid/Flexbox + @media, React Responsive
+
+### hybrid_wm_shell — 공유 앱 셸 (Shared App Shell)
+
+```
+Web                              Mobile (PWA/Native)
+┌─────────────────────────┐      ┌──────────────┐
+│ [Logo] [Nav] [Nav] [👤] │      │ [←]  Title   │
+├─────────────────────────┤      ├──────────────┤
+│                         │      │              │
+│    App Shell (공유)      │      │  App Shell   │
+│    ┌───────────────┐    │      │  (공유 로직)  │
+│    │  Page Content  │   │      │              │
+│    │  (라우터 기반)  │   │      │              │
+│    └───────────────┘    │      │              │
+│                         │      ├──────────────┤
+└─────────────────────────┘      │ [🏠][📋][💬][👤]│
+                                 └──────────────┘
+
+공유: Router, State, API Layer
+분리: Navigation Shell, Native Features
+```
+
+- **특징**: 앱 셸 구조 공유, 네비게이션 셸만 플랫폼별 분리
+- **적합**: PWA + 네이티브 앱, SaaS 멀티플랫폼
+- **네비**: Web=top nav → Mobile=bottom tab + stack
+- **구현**: Next.js + React Native / Capacitor / Expo
+
+### hybrid_wm_split — 플랫폼 특화 (Platform-Specific)
+
+```
+Web (전용 레이아웃)                Mobile (전용 레이아웃)
+┌─────────────────────────┐      ┌──────────────┐
+│ [Top Navigation Bar   ] │      │ [← Back]  ≡  │
+├──────┬──────────────────┤      ├──────────────┤
+│      │ Hero Section     │      │ ┌──────────┐ │
+│ Side │ ─────────────    │      │ │ Card 1   │ │
+│ bar  │ Feature Grid     │      │ └──────────┘ │
+│ /    │ ─────────────    │      │ ┌──────────┐ │
+│ TOC  │ Content Area     │      │ │ Card 2   │ │
+│      │ ─────────────    │      │ └──────────┘ │
+│      │ Footer           │      │ pull-refresh │
+├──────┴──────────────────┤      ├──────────────┤
+│ [Footer]                │      │ [🏠][🔍][+][💬][👤]│
+└─────────────────────────┘      └──────────────┘
+
+공유: API, 데이터 모델, 비즈니스 로직
+분리: 레이아웃, 네비게이션, 인터랙션 전부
+```
+
+- **특징**: 각 플랫폼 완전 독립 레이아웃, 데이터/API만 공유
+- **적합**: 웹=정보 풍부, 모바일=핵심 기능 집중
+- **네비**: 완전 독립 (각 플랫폼 최적)
+- **구현**: Web(Next.js) + Mobile(React Native) 별도
+
+---
+

package/skills/web-design/claude-code/defs/hybrid-layouts/02-web_desktop.md

@@ -0,0 +1,78 @@
+# 2. 웹 + PC (`web_desktop`)
+
+
+### hybrid_wd_unified — 통합 (Unified Web-Desktop)
+
+```
+Web (브라우저)                    Desktop (Electron/Tauri)
+┌─────────────────────────┐      ┌─────────────────────────┐
+│ [Tab] [Tab] [Tab]  [+]  │      │ [Custom Titlebar] ─ □ ✕ │
+├─────────────────────────┤      ├─────────────────────────┤
+│ [Logo] [Nav] [Nav] [👤] │      │ [Logo] [Nav] [Nav] [👤] │
+├─────────────────────────┤      ├─────────────────────────┤
+│                         │      │                         │
+│    동일한 레이아웃        │      │    동일한 레이아웃        │
+│    (웹 기술 기반)         │      │    + 네이티브 윈도우      │
+│                         │      │    + 트레이 아이콘         │
+│                         │      │    + 파일시스템 접근       │
+└─────────────────────────┘      └─────────────────────────┘
+
+차이점: Titlebar, System Tray, File Access, Global Shortcuts
+```
+
+- **특징**: 동일 웹 UI를 데스크톱 래퍼로 감싸는 구조
+- **적합**: Notion, Slack, Figma 스타일 (웹=데스크톱 동일)
+- **네비**: 완전 동일 (데스크톱에서 커스텀 타이틀바만 추가)
+- **구현**: Web + Electron/Tauri wrap
+
+### hybrid_wd_enhanced — 데스크톱 확장 (Desktop Enhanced)
+
+```
+Web (기본 기능)                    Desktop (확장 기능)
+┌─────────────────────────┐      ┌─────────────────────────┐
+│ [Nav Bar]               │      │ [Custom Titlebar] ─ □ ✕ │
+├─────────────────────────┤      ├──────┬──────────────────┤
+│                         │      │      │                  │
+│    Core Features        │      │ Ext  │  Core Features   │
+│    (핵심 기능만)          │      │ Side │  + Extended      │
+│                         │      │ bar  │  Features        │
+│                         │      │      │  (파일 연동 등)    │
+└─────────────────────────┘      └──────┴──────────────────┘
+
+웹: 핵심 기능 (브라우저 제한 내)
+데스크톱: 핵심 + 파일시스템 + 플러그인 + 오프라인
+```
+
+- **특징**: 웹 기본 기능 + 데스크톱에서 네이티브 기능 확장
+- **적합**: 코드 에디터(VS Code), 디자인 도구, 문서 편집기
+- **네비**: Web=간소화 → Desktop=확장 사이드바
+- **구현**: Web Core + Electron/Tauri extension API
+
+### hybrid_wd_companion — 웹 대시보드 + 데스크톱 에이전트 (Dashboard & Agent)
+
+```
+Web (대시보드/관리)                Desktop (백그라운드 에이전트)
+┌─────────────────────────┐      ┌───────────────────┐
+│ [Dashboard]             │      │ [≡] Agent   [─][✕]│
+├──────┬──────────────────┤      ├───────────────────┤
+│      │ ┌──────┐┌──────┐ │      │  Status: Running  │
+│ Nav  │ │ KPI  ││ KPI  │ │      │  ── ── ── ── ──   │
+│      │ └──────┘└──────┘ │      │  [Start] [Stop]   │
+│      │ ┌──────────────┐ │      │  ── ── ── ── ──   │
+│      │ │    Chart     │ │      │  Log:             │
+│      │ └──────────────┘ │      │  > Task running...│
+└──────┴──────────────────┘      │  > Complete       │
+                                 └───────────────────┘
+                                   + System Tray Icon
+
+웹: 설정, 모니터링, 리포트
+데스크톱: 백그라운드 실행, 트레이 상주
+```
+
+- **특징**: 웹=관리/모니터링, 데스크톱=에이전트/백그라운드 작업
+- **적합**: 백업 도구, 동기화, CI/CD 모니터, 시스템 관리
+- **네비**: Web=풀 대시보드 / Desktop=미니 UI + 트레이
+- **구현**: Web Dashboard + Electron/Tauri background service
+
+---
+

package/skills/web-design/claude-code/defs/hybrid-layouts/03-mobile_desktop.md

@@ -0,0 +1,79 @@
+# 3. 모바일 + PC (`mobile_desktop`)
+
+
+### hybrid_md_companion — 컴패니언 (Companion Pair)
+
+```
+Mobile (경량)                      Desktop (풀 기능)
+┌──────────────┐                  ┌─────────────────────────┐
+│ [Title]   ≡  │                  │ [Titlebar]    ─  □  ✕   │
+├──────────────┤                  ├──────┬──────────────────┤
+│              │                  │      │                  │
+│  Quick View  │     sync ↔      │ Full │   Full Feature   │
+│  (핵심만)     │                  │ Nav  │   View           │
+│              │                  │      │                  │
+│  [Quick Act] │                  │      │                  │
+├──────────────┤                  └──────┴──────────────────┘
+│ [🏠][📋][👤] │
+└──────────────┘
+
+모바일: 조회 + 빠른 액션 중심
+데스크톱: 편집 + 관리 + 분석 중심
+```
+
+- **특징**: 모바일=경량 조회/액션, 데스크톱=풀 기능/관리
+- **적합**: 메신저(모바일) + 관리자(PC), 필드 앱 + 오피스 앱
+- **네비**: Mobile=bottom tab / Desktop=sidebar
+- **구현**: React Native + Electron (공유 API layer)
+
+### hybrid_md_mirrored — 미러링 (Mirrored Experience)
+
+```
+Mobile                             Desktop
+┌──────────────┐                  ┌─────────────────────────┐
+│ [Title] [≡]  │                  │ [Nav Bar]        [👤]   │
+├──────────────┤                  ├─────────────────────────┤
+│ ┌──────────┐ │                  │ ┌──────────┐┌─────────┐ │
+│ │ Card A   │ │    동일 구조     │ │ Card A   ││ Card B  │ │
+│ └──────────┘ │      ↔          │ └──────────┘└─────────┘ │
+│ ┌──────────┐ │                  │ ┌──────────┐┌─────────┐ │
+│ │ Card B   │ │                  │ │ Card C   ││ Card D  │ │
+│ └──────────┘ │                  │ └──────────┘└─────────┘ │
+├──────────────┤                  └─────────────────────────┘
+│ [🏠][📋][💬][👤]│
+└──────────────┘
+모바일: 1열 스택              데스크톱: 2-3열 그리드
+```
+
+- **특징**: 동일 정보 구조, 화면 크기에 따라 그리드 재배치
+- **적합**: 소셜 앱, 게임, 쇼핑, 학습 플랫폼
+- **네비**: Mobile=bottom tab / Desktop=top nav (동일 구조)
+- **구현**: 공유 컴포넌트 + 반응형 레이아웃
+
+### hybrid_md_role — 역할 분리 (Role-Based)
+
+```
+Mobile (Consumer)                  Desktop (Producer)
+┌──────────────┐                  ┌─────────────────────────┐
+│ [Feed]       │                  │ [Menu]   [Toolbar]      │
+├──────────────┤                  ├──────┬──────────────────┤
+│ ┌──────────┐ │                  │      │                  │
+│ │ Content  │ │   다른 UX        │ Edit │  Editor /        │
+│ │ (소비)    │ │      ↔          │ Nav  │  Creator View    │
+│ └──────────┘ │                  │      │  (생산)           │
+│ ┌──────────┐ │                  │      │                  │
+│ │ Content  │ │                  │      │                  │
+│ └──────────┘ │                  └──────┴──────────────────┘
+├──────────────┤
+│ [🏠][🔍][+][💬]│
+└──────────────┘
+모바일: 소비/브라우징              데스크톱: 생산/편집
+```
+
+- **특징**: 플랫폼별 완전히 다른 UX 역할
+- **적합**: YouTube(시청 vs 스튜디오), 교육(학습 vs 제작)
+- **네비**: 완전 독립 (역할에 최적화)
+- **구현**: 공유 API/데이터 + 독립 UI 레이어
+
+---
+

package/skills/web-design/claude-code/defs/hybrid-layouts/04-all.md

@@ -0,0 +1,81 @@
+# 4. 전체 플랫폼 (`all` = 웹 + 모바일 + PC)
+
+
+### hybrid_all_atomic — 아토믹 디자인 (Atomic Design System)
+
+```
+Atoms → Molecules → Organisms → Templates → Pages
+
+[Button] [Input] [Icon]           ← Atoms (전 플랫폼 공유)
+  ↓
+[SearchBar] [Card] [NavItem]      ← Molecules (전 플랫폼 공유)
+  ↓
+[Header] [Sidebar] [ProductList]  ← Organisms (플랫폼별 조합)
+  ↓
+[DashboardTemplate]               ← Templates (플랫폼별 레이아웃)
+  ↓
+Web          Mobile        Desktop
+┌────────┐  ┌────────┐   ┌────────┐     ← Pages (플랫폼별)
+│Dashboard│  │Dashboard│  │Dashboard│
+└────────┘  └────────┘   └────────┘
+```
+
+- **특징**: 아토믹 디자인 시스템으로 컴포넌트 공유 극대화
+- **적합**: 대규모 서비스, 디자인 시스템 구축 우선
+- **네비**: 플랫폼별 네이티브 패턴
+- **구현**: Design System + 플랫폼별 Template/Page
+
+### hybrid_all_adaptive — 적응형 레이아웃 (Adaptive Layout)
+
+```
+Mobile (<768)        Tablet (768-1024)     Desktop (≥1024)
+┌──────────────┐    ┌──────────────────┐  ┌──────┬──────────┐
+│ [≡] Title    │    │ [≡] Title   [🔍] │  │ Side │ Main     │
+├──────────────┤    ├──────────────────┤  │ bar  │ Content  │
+│ Content      │    │ Content    │Extra│  │      │          │
+│ (1 column)   │    │ (2 columns)│     │  │      │          │
+├──────────────┤    └──────────────────┘  └──────┴──────────┘
+│ [Tab Bar]    │
+└──────────────┘    Desktop App (Electron/Tauri)
+                    ┌──────────────────────────────┐
+                    │ [Custom Titlebar]      ─ □ ✕ │
+                    │ = Desktop 레이아웃 + 네이티브  │
+                    └──────────────────────────────┘
+
+브레이크포인트로 전체 제어
+```
+
+- **특징**: 브레이크포인트 기반 단일 반응형 + 데스크톱 래핑
+- **적합**: 범용 서비스, MVP, 점진적 플랫폼 확장
+- **네비**: Mobile=bottom → Tablet=top → Desktop=sidebar
+- **구현**: Responsive Web + PWA + Electron/Tauri wrap
+
+### hybrid_all_optimized — 플랫폼 최적화 (Platform-Optimized)
+
+```
+각 플랫폼 완전 독립 최적화:
+
+Web                 Mobile              Desktop
+┌────────────┐     ┌──────────┐       ┌──────────────┐
+│ SEO 최적화  │     │ 터치 최적화│       │ 생산성 최적화 │
+│ 정보 풍부   │     │ 오프라인  │       │ 멀티 윈도우  │
+│ 반응형      │     │ 푸시알림  │       │ 키보드 중심  │
+└────────────┘     └──────────┘       └──────────────┘
+      │                 │                   │
+      └─────────────────┼───────────────────┘
+                        │
+              Shared API / Data Layer
+              Shared Business Logic
+              Shared Design Tokens
+
+공유: API, 비즈니스 로직, 디자인 토큰
+분리: UI 레이아웃, 네비게이션, 인터랙션
+```
+
+- **특징**: 각 플랫폼 최적 UX 제공, 데이터/로직만 공유
+- **적합**: 글로벌 서비스, 대기업 제품, 최상위 UX 요구
+- **네비**: 각 플랫폼 네이티브 최적
+- **구현**: Monorepo + 공유 패키지 + 플랫폼별 UI
+
+---
+

package/skills/web-design/claude-code/defs/hybrid-layouts.md

@@ -0,0 +1,49 @@
+# 혼합(멀티플랫폼) 레이아웃 패턴 정의
+
+> 참조 위치: `stages/stage2-hybrid-layout.md`에서 분기 사용
+> platform_combo별 크로스플랫폼 레이아웃 전략 정의
+> Dependencies: 없음 (독립 참조 데이터)
+
+---
+
+## 핵심 원칙
+
+멀티플랫폼 레이아웃은 **공유 구조**와 **플랫폼 최적화** 사이의 균형:
+
+| 원칙 | 설명 |
+|------|------|
+| **Shared Layout DNA** | 정보 구조(IA)는 공유, 구현은 플랫폼별 최적화 |
+| **Responsive Breakpoints** | 화면 크기별 레이아웃 자동 적응 |
+| **Component Mapping** | 동일 컴포넌트 → 플랫폼별 네이티브 위젯 매핑 |
+| **Navigation Adaptation** | 네비게이션 패턴을 플랫폼 관례에 맞게 변환 |
+
+---
+
+## 1. 웹 + 모바일 (`web_mobile`)
+
+> 상세: `defs/hybrid-layouts/01-web_mobile.md` 참조
+
+Desktop (≥1024px)          Tablet (768-1023px)       Mobile (<768px)
+## 2. 웹 + PC (`web_desktop`)
+
+> 상세: `defs/hybrid-layouts/02-web_desktop.md` 참조
+
+Web (브라우저)                    Desktop (Electron/Tauri)
+## 3. 모바일 + PC (`mobile_desktop`)
+
+> 상세: `defs/hybrid-layouts/03-mobile_desktop.md` 참조
+
+Mobile (경량)                      Desktop (풀 기능)
+## 4. 전체 플랫폼 (`all` = 웹 + 모바일 + PC)
+
+> 상세: `defs/hybrid-layouts/04-all.md` 참조
+
+Atoms → Molecules → Organisms → Templates → Pages
+## 핵심 화면 구성 참조
+
+| 플랫폼 조합 | 공유 화면 | 플랫폼 전용 화면 |
+|------------|----------|-----------------|
+| web_mobile | 홈, 목록, 상세, 프로필, 설정 | Web: 풀 대시보드 / Mobile: 바텀시트, 스와이프 |
+| web_desktop | 대시보드, 설정, 프로필 | Web: 반응형 / Desktop: 트레이, 멀티윈도우 |
+| mobile_desktop | 메인 기능, 동기화 | Mobile: 터치UI / Desktop: 키보드+마우스UI |
+| all | 인증, 프로필, 핵심 기능 | 각 플랫폼별 네비게이션 셸 |

package/skills/web-design/claude-code/defs/hybrid-motions/01-web_mobile.md

@@ -0,0 +1,69 @@
+# 1. 웹 + 모바일 (`web_mobile`)
+
+
+### WM-M1. Adaptive Responsive (적응형 반응)
+
+```
+기법: 뷰포트별 모션 자동 적응
+전략: 웹과 모바일에서 동일한 모션 의도, 구현만 차이
+
+  Web (마우스):                Mobile (터치):
+  ┌─────────────┐             ┌──────────┐
+  │ hover effect│             │ tap effect│
+  │ scroll anim │             │ swipe    │
+  │ cursor trail│             │ pull-    │
+  └─────────────┘             │ refresh  │
+                              └──────────┘
+
+  공유 토큰:
+  --motion-duration-fast: 200ms
+  --motion-duration-normal: 400ms
+  --motion-easing-default: cubic-bezier(0.4, 0, 0.2, 1)
+
+강도: moderate
+적합: 반응형 웹앱, PWA
+구현: CSS @media + JS matchMedia
+```
+
+### WM-M2. Shared Scroll & Touch (공유 스크롤 & 터치)
+
+```
+기법: 스크롤 기반 공유 + 터치 전용 제스처 확장
+전략: Scroll = 공통 / Touch Gesture = 모바일 전용
+
+  Common (Scroll):
+  - Scroll Reveal (fade-up on viewport enter)
+  - Parallax (layer speed difference)
+  - Reading Progress bar
+
+  Mobile Only (Touch):
+  - Pull to Refresh (↓ drag → refresh)
+  - Swipe Actions (← swipe → delete/archive)
+  - Pinch Zoom (two-finger zoom)
+
+강도: moderate
+적합: 콘텐츠 앱, 뉴스, 블로그
+구현: Intersection Observer (공통) + Touch Events (모바일)
+```
+
+### WM-M3. Platform Unified (플랫폼 통일)
+
+```
+기법: 모든 플랫폼에서 완전히 동일한 모션
+전략: 웹 기술 기반으로 통일 (React Native Web / Capacitor)
+
+  모든 플랫폼 동일:
+  - Page transition: slide-left (300ms)
+  - Modal: fade + scale (250ms)
+  - List: stagger fade-up (50ms delay)
+  - Button: scale(0.97) on press (100ms)
+
+  차이점 없음 (브랜드 일관성 최우선)
+
+강도: subtle ~ moderate
+적합: 브랜드 앱, 마케팅 앱
+구현: Framer Motion / React Native Reanimated 공유
+```
+
+---
+