timelabs 0.1.0 → 0.1.1

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

@@ -0,0 +1,38 @@
+# 3DS 웹 디자인 레이아웃 패턴 정의
+
+> 참조: `stages/stage2-web-layout.md`에서 사용
+> 웹 유형(`config.type_detail.web_type`)에 따라 분기
+> Dependencies: 없음 (독립 참조 데이터)
+
+---
+
+## 랜딩페이지 (`landing`) 전용 레이아웃
+
+> 상세: `defs/web-layouts/01-landing.md` 참조
+
+- **구조**: Hero → 섹션 순차 스크롤
+## 대시보드 (`dashboard`) 전용 레이아웃
+
+> 상세: `defs/web-layouts/02-dashboard.md` 참조
+
+- **구조**: 좌측 고정 사이드바 + 우측 메인 영역
+## 이커머스 (`ecommerce`) 전용 레이아웃
+
+> 상세: `defs/web-layouts/03-ecommerce.md` 참조
+
+- **구조**: 좌측 필터 사이드바 + 상품 그리드
+## 블로그/콘텐츠 (`blog`) 전용 레이아웃
+
+> 상세: `defs/web-layouts/04-blog.md` 참조
+
+- **구조**: 메인 콘텐츠 + 우측 사이드바
+## SaaS/웹앱 (`saas`) 전용 레이아웃
+
+> 상세: `defs/web-layouts/05-saas.md` 참조
+
+- **구조**: 좌측 사이드바 네비 + 메인 콘텐츠 영역
+## 포트폴리오 (`portfolio`) 전용 레이아웃
+
+> 상세: `defs/web-layouts/06-portfolio.md` 참조
+
+- **구조**: 프로젝트 썸네일 그리드 + 라이트박스

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

@@ -0,0 +1,91 @@
+# 1. 랜딩페이지 (`landing`)
+
+
+### L-M1. Parallax Scroll (패럴랙스 스크롤)
+
+```
+기법: 레이어별 스크롤 속도 차이로 깊이감 표현
+강도: subtle(미묘) | moderate(중간) | dramatic(극적)
+
+┌─────────────────────────────┐
+│  ☁️ 배경 (느리게)    ← 0.3x │
+│     🏔️ 중경 (보통)  ← 0.6x │
+│        📱 전경 (빠름) ← 1.0x │
+└─────────────────────────────┘
+         ↕ scroll
+
+적합: 프로모션, 브랜드 스토리텔링
+CSS: transform: translateY(calc(var(--scroll) * speed))
+```
+
+### L-M2. Fullscreen Snap Scroll (풀스크린 스냅)
+
+```
+기법: 섹션 단위 스냅 + 진입 애니메이션
+방향: vertical(수직) | horizontal(수평)
+
+┌───────────┐   snap    ┌───────────┐
+│           │  ──────→  │           │
+│  Section1 │  scroll   │  Section2 │
+│           │           │  ↑ fade   │
+└───────────┘           └───────────┘
+
+적합: 제품 런칭, 포트폴리오, 스토리
+CSS: scroll-snap-type: y mandatory
+```
+
+### L-M3. Scroll Reveal (스크롤 리빌)
+
+```
+기법: 뷰포트 진입 시 요소 등장 애니메이션
+방식: fade-up | fade-in | slide-left | slide-right | zoom-in | flip
+
+Before Viewport    │    After Viewport
+                   │
+   [opacity: 0]    │    [opacity: 1]
+   [translateY:    │    [translateY: 0]
+    30px]          │
+                   │
+
+적합: 범용 (모든 랜딩 레이아웃)
+라이브러리: Intersection Observer API, AOS, Framer Motion
+```
+
+### L-M4. Kinetic Typography (키네틱 타이포)
+
+```
+기법: 텍스트에 모션 적용 (글자별, 단어별, 라인별)
+방식: typewriter | split-char | wave | glitch | scramble
+
+H  e  l  l  o     W  o  r  l  d
+↑  ↑  ↑  ↑  ↑     ↑  ↑  ↑  ↑  ↑
+0ms 50 100 150 200  300 350 400 450 500
+    stagger delay
+
+적합: Hero 섹션, CTA 강조
+라이브러리: GSAP SplitText, Framer Motion
+```
+
+### L-M5. Video Background Motion (비디오 배경)
+
+```
+기법: Hero 배경 비디오 + 오버레이 + 텍스트 모션
+방식: autoplay-loop | scroll-scrub | hover-play
+
+┌─────────────────────────────┐
+│  ▶ VIDEO (autoplay, muted)  │
+│  ┌───────────────────────┐  │
+│  │  Overlay (gradient)   │  │
+│  │   ┌─────────────┐    │  │
+│  │   │  Hero Text   │   │  │
+│  │   │  (animated)  │   │  │
+│  │   └─────────────┘    │  │
+│  └───────────────────────┘  │
+└─────────────────────────────┘
+
+적합: SaaS 데모, 크리에이티브 브랜드
+주의: 성능 최적화 필수 (lazy load, compressed)
+```
+
+---
+

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

@@ -0,0 +1,55 @@
+# 2. 대시보드 (`dashboard`)
+
+
+### D-M1. Micro-interactions (마이크로 인터랙션)
+
+```
+기법: 버튼/토글/카드 호버/클릭 피드백
+방식: scale | ripple | color-shift | icon-morph
+
+  [Button]          [Button]
+  ─hover─→     ┌──────────────┐
+               │  scale(1.02)  │
+               │  shadow: lg   │
+               └──────────────┘
+
+적합: 관리자 패널, 데이터 입력
+CSS: transition + :hover pseudo-class
+```
+
+### D-M2. Data Transition (데이터 전환)
+
+```
+기법: 숫자/차트 카운트업, 데이터 갱신 애니메이션
+방식: count-up | chart-morph | bar-grow | pie-animate
+
+  KPI Card
+  ┌──────────┐
+  │  $0      │  ──animate──→  │  $12,450  │
+  │  ████░░  │                │  ████████ │
+  └──────────┘                └──────────┘
+
+적합: 분석 대시보드, KPI 카드
+라이브러리: CountUp.js, Chart.js transitions
+```
+
+### D-M3. Skeleton Loading (스켈레톤 로딩)
+
+```
+기법: 콘텐츠 로딩 중 뼈대 플레이스홀더 애니메이션
+방식: pulse | shimmer | wave
+
+  Loading              Loaded
+  ┌──────────┐         ┌──────────┐
+  │ ░░░░░░░░ │ ──→     │ User Name│
+  │ ░░░░░    │         │ Details  │
+  │ ░░░░░░░  │         │ Content  │
+  └──────────┘         └──────────┘
+    shimmer →→→
+
+적합: 모든 대시보드 유형
+CSS: @keyframes shimmer + linear-gradient
+```
+
+---
+

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

@@ -0,0 +1,52 @@
+# 3. 이커머스 (`ecommerce`)
+
+
+### E-M1. Product Hover & Zoom (상품 호버 & 줌)
+
+```
+기법: 상품 카드 호버 효과 + 이미지 줌
+방식: image-zoom | quick-view | color-swap | add-to-cart
+
+  ┌─────────┐  hover   ┌─────────┐
+  │  📷     │  ────→   │  📷 🔍  │
+  │  상품명  │         │  상품명  │
+  │  ₩가격  │         │  [담기]  │
+  └─────────┘         └─────────┘
+
+적합: 상품 목록, 카탈로그 그리드
+CSS: transform: scale() + overlay transition
+```
+
+### E-M2. Cart & Checkout Animation (장바구니 애니메이션)
+
+```
+기법: 장바구니 담기/삭제, 결제 단계 전환
+방식: fly-to-cart | badge-bounce | step-progress | slide-panel
+
+  [상품] ──→ 🛒+1 (bounce)
+
+  Step1 ━━● Step2 ━━○ Step3 ━━○
+  ████████████░░░░░░░░░░░░░░░░
+
+적합: 장바구니, 결제 플로우
+라이브러리: Framer Motion layoutId, CSS transitions
+```
+
+### E-M3. Carousel & Gallery (캐러셀 & 갤러리)
+
+```
+기법: 배너/상품 슬라이드 전환 효과
+방식: slide | fade | coverflow | 3d-rotate
+
+  ┌───┬───────────┬───┐
+  │ ◀ │  Banner   │ ▶ │
+  │   │ ←slide→  │   │
+  └───┴───────────┴───┘
+      ● ○ ○ ○ ○
+
+적합: 홈 배너, 상품 갤러리
+라이브러리: Swiper.js, Embla Carousel
+```
+
+---
+

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

@@ -0,0 +1,57 @@
+# 4. 블로그/콘텐츠 (`blog`)
+
+
+### B-M1. Reading Progress (읽기 진행률)
+
+```
+기법: 스크롤 기반 읽기 진행 바
+위치: top | bottom | side
+
+  ████████████████░░░░░░░░  68%
+  ┌─────────────────────────┐
+  │       Article Content    │
+  │       ...                │
+  └─────────────────────────┘
+
+적합: 긴 글, 기술 블로그
+CSS: position: fixed + scroll event
+```
+
+### B-M2. Content Fade & Stagger (콘텐츠 페이드)
+
+```
+기법: 글 목록/카드 순차 등장
+방식: fade-up-stagger | slide-in | scale-up
+
+  Card1 ─── 0ms ───→ [visible]
+  Card2 ─── 100ms ──→ [visible]
+  Card3 ─── 200ms ──→ [visible]
+  Card4 ─── 300ms ──→ [visible]
+
+적합: 글 목록, 카드 그리드
+CSS: animation-delay 또는 Framer Motion staggerChildren
+```
+
+### B-M3. Page Flip / Book Turn (페이지 플립)
+
+```
+기법: 책장 넘기는 3D 전환 효과
+방식: single-page | double-spread | soft-flip
+
+         ┌─────────┐
+         │         │╲
+         │  Page   │ ╲  ← 3D rotate
+         │   1     │  ╲
+         │         │   │
+         └─────────┘   │
+                  ╲    │
+                   ╲───┘
+                   Page 2
+
+적합: 매거진 스타일 블로그, 전자책, 포트폴리오
+CSS: perspective + rotateY + backface-visibility
+라이브러리: turn.js, StPageFlip
+```
+
+---
+

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

@@ -0,0 +1,49 @@
+# 5. SaaS/웹앱 (`saas`)
+
+
+### S-M1. Panel & Drawer Transition (패널 전환)
+
+```
+기법: 사이드 패널, 모달, 드로어 전환
+방식: slide-over | push-content | fade-scale | morph
+
+  ┌──────┬──────────┐        ┌──────┬───────┬──────┐
+  │ Nav  │ Content  │  ──→   │ Nav  │Content│Panel │
+  │      │          │        │      │ (push)│←slide│
+  └──────┴──────────┘        └──────┴───────┴──────┘
+
+적합: 설정, 상세 보기, 편집 모드
+CSS: transform: translateX() + transition
+```
+
+### S-M2. Drag & Drop Feedback (드래그 앤 드롭)
+
+```
+기법: 드래그 중 시각 피드백 + 드롭 전환
+방식: ghost | placeholder | snap-to-grid | reorder
+
+  [Card A]          [Card A] ← ghost
+  [Card B]  drag→   [  ···  ] ← placeholder
+  [Card C]          [Card C]
+
+적합: 칸반, 리스트 정렬, 파일 관리
+라이브러리: dnd-kit, react-beautiful-dnd
+```
+
+### S-M3. Toast & Notification (알림 애니메이션)
+
+```
+기법: 토스트/알림 팝업 전환
+방식: slide-in | stack | fade | progress-bar
+
+                    ┌──────────────────┐
+                    │ ✅ 저장 완료      │ ← slide-in
+                    │ ████████░░ 3s    │ ← auto-dismiss
+                    └──────────────────┘
+
+적합: 모든 SaaS 유형
+CSS: @keyframes slideIn + setTimeout
+```
+
+---
+

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

@@ -0,0 +1,73 @@
+# 6. 포트폴리오 (`portfolio`)
+
+
+### P-M1. 3D Card Tilt (3D 카드 틸트)
+
+```
+기법: 마우스 위치 기반 3D 기울기 + 광택 효과
+방식: tilt-hover | tilt-scroll | gyroscope(mobile)
+
+       마우스 좌측           마우스 우측
+  ┌──────────────┐     ╲──────────────╱
+  │╲             │      │             │
+  │ ╲  Project   │      │  Project   ╱│
+  │  ╲  Card     │      │  Card     ╱ │
+  │   ╲          │      │          ╱  │
+  └──────────────┘     ╱──────────────╲
+    rotateY(-15deg)     rotateY(15deg)
+
+적합: 프로젝트 카드, 쇼케이스
+CSS: perspective + rotateX/Y + mousemove event
+라이브러리: vanilla-tilt.js, react-tilt
+```
+
+### P-M2. Lightbox & Gallery Transition (라이트박스 전환)
+
+```
+기법: 이미지 확대/축소 전환 효과
+방식: zoom-morph | fade-scale | slide-gallery | masonry-expand
+
+  [thumb]  click→  ┌─────────────────────┐
+                   │                     │
+                   │   Expanded Image    │
+                   │   ← → navigate     │
+                   │                     │
+                   └─────────────────────┘
+
+적합: 갤러리 그리드, 사진 포트폴리오
+라이브러리: Framer Motion layoutId, GLightbox
+```
+
+### P-M3. Horizontal Scroll & Reveal (수평 스크롤 리빌)
+
+```
+기법: 수평 스크롤 시 프로젝트 순차 등장
+방식: scroll-horizontal | pin-and-slide | stack-cards
+
+  ← scroll direction ←
+
+  ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐
+  │Proj 1│ │Proj 2│ │Proj 3│ │Proj 4│
+  │ done │ │reveal│ │ wait │ │ wait │
+  └──────┘ └──────┘ └──────┘ └──────┘
+
+적합: 크리에이티브 포트폴리오
+라이브러리: GSAP ScrollTrigger, Locomotive Scroll
+```
+
+### P-M4. Cursor Trail & Custom Cursor (커스텀 커서)
+
+```
+기법: 커스텀 커서 + 마우스 트레일 효과
+방식: dot-follow | magnetic | text-cursor | trail-particles
+
+      ●──── cursor (magnetic to links)
+     ╱
+    ○ ← trail (delayed follow)
+
+적합: 크리에이티브 에이전시, 아티스트
+CSS: cursor: none + JS mousemove tracking
+```
+
+---
+

package/skills/web-design/claude-code/defs/web-motions/08-intensity-preset-motion.md

@@ -0,0 +1,14 @@
+# 모션 강도 프리셋
+
+
+모든 패턴에 공통 적용 가능한 강도 설정:
+
+| 프리셋 | `motion_intensity` | duration | easing | 설명 |
+|--------|-------------------|----------|--------|------|
+| **Subtle** | `subtle` | 200-400ms | ease-out | 미묘한 전환, 비즈니스 |
+| **Moderate** | `moderate` | 400-700ms | ease-in-out | 균형 잡힌, 범용 |
+| **Dramatic** | `dramatic` | 700-1200ms | cubic-bezier | 임팩트, 크리에이티브 |
+| **None** | `none` | 0ms | - | 모션 없음, 접근성 우선 |
+
+> `prefers-reduced-motion` 미디어 쿼리 자동 적용:
+> `@media (prefers-reduced-motion: reduce)` → duration: 0, transform: none

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

@@ -0,0 +1,55 @@
+# 웹 모션/인터랙션 패턴 정의
+
+> 참조 위치: `stages/stage2-web-motion.md`에서 분기 사용
+> web_type별 추천 모션 패턴 정의
+> Dependencies: 없음 (독립 참조 데이터)
+
+---
+
+## 공통 모션 카테고리
+
+| 카테고리 | 설명 |
+|----------|------|
+| **Scroll Motion** | 스크롤 기반 애니메이션 (Parallax, Reveal, Snap) |
+| **3D Transform** | CSS 3D 변환 (Flip, Tilt, Perspective) |
+| **Page Transition** | 페이지/섹션 간 전환 효과 |
+| **Micro-interaction** | 호버, 클릭, 토글 등 소규모 피드백 |
+| **Loading & Skeleton** | 콘텐츠 로딩 상태 애니메이션 |
+
+---
+
+## 1. 랜딩페이지 (`landing`)
+
+> 상세: `defs/web-motions/01-landing.md` 참조
+
+기법: 레이어별 스크롤 속도 차이로 깊이감 표현
+## 2. 대시보드 (`dashboard`)
+
+> 상세: `defs/web-motions/02-dashboard.md` 참조
+
+기법: 버튼/토글/카드 호버/클릭 피드백
+## 3. 이커머스 (`ecommerce`)
+
+> 상세: `defs/web-motions/03-ecommerce.md` 참조
+
+기법: 상품 카드 호버 효과 + 이미지 줌
+## 4. 블로그/콘텐츠 (`blog`)
+
+> 상세: `defs/web-motions/04-blog.md` 참조
+
+기법: 스크롤 기반 읽기 진행 바
+## 5. SaaS/웹앱 (`saas`)
+
+> 상세: `defs/web-motions/05-saas.md` 참조
+
+기법: 사이드 패널, 모달, 드로어 전환
+## 6. 포트폴리오 (`portfolio`)
+
+> 상세: `defs/web-motions/06-portfolio.md` 참조
+
+기법: 마우스 위치 기반 3D 기울기 + 광택 효과
+## 모션 강도 프리셋
+
+> 상세: `defs/web-motions/08-intensity-preset-motion.md` 참조
+
+모든 패턴에 공통 적용 가능한 강도 설정: