timelabs 0.1.0 → 0.1.1

package/skills/web-design/claude-code/defs/component-specs/03-system-visual.md

@@ -0,0 +1,193 @@
+# 비주얼 Variant 시스템 (121종)
+
+
+각 컴포넌트의 비주얼 variant를 정의합니다. gen-design-guide.md에서 스타일별로 CSS/HTML 코드를 생성할 때 이 정의를 참조합니다.
+
+### Card (18종)
+
+| # | Variant | 배경 | 이미지/아이콘 | 호버 인터랙션 |
+|---|---------|------|-------------|-------------|
+| 1 | `plain` | solid color | 없음 | shadow 강화 |
+| 2 | `media-top` | 이미지 | `<img>` 상단 (aspect-ratio 16/9) | image zoom 1→1.05 |
+| 3 | `media-left` | 이미지 | `<img>` 좌측 40% | image zoom 1→1.05 |
+| 4 | `media-bg` | `background-image` cover | 전체 커버 + dark overlay 60% | overlay 60%→40%, 이미지 scale 1→1.08 |
+| 5 | `media-bg-bottom` | `background-image` cover | 전체 커버 + 하단 gradient overlay | gradient 투명→불투명 비율 변화 |
+| 6 | `icon-top` | solid 또는 pattern | 아이콘 48px 중앙 정렬 | icon bounce (-translate-y-1) |
+| 7 | `icon-left` | solid | 아이콘 40px 좌측 | icon morph (scale 1.1 + rotate 5deg) |
+| 8 | `icon-circle` | solid | 아이콘 32px in 원형 배경 56px | circle scale 1→1.1 + 색상 shift |
+| 9 | `stat` | solid | 트렌드 아이콘 16px + 변화량 | counter-up 애니메이션 (숫자) |
+| 10 | `testimonial` | solid 또는 subtle | 아바타 48px 원형 | 미묘한 shadow 변화 |
+| 11 | `pricing` | solid 또는 gradient (추천 플랜) | 체크 아이콘 16px 리스트 | border 색상 강조, 추천 플랜 scale 1.02 |
+| 12 | `profile` | solid | 아바타 80px + 소셜 아이콘 20px | 이미지 opacity 0.8→1 + 소셜 아이콘 color shift |
+| 13 | `product` | 이미지 | `<img>` 상단 (aspect-ratio 1/1 or 4/3) | image zoom 1→1.08 + shadow 강화 |
+| 14 | `gradient-border` | transparent 내부 | 선택적 | glow 강화 (box-shadow spread) |
+| 15 | `glass` | backdrop-blur + 반투명 | 선택적 | blur 12→16px, opacity 변화 |
+| 16 | `pattern-bg` | SVG pattern repeat | 선택적 | pattern opacity 0.05→0.1 |
+| 17 | `split-color` | 2-tone (상/하 또는 좌/우) | 선택적 | 분할선 위치 이동 (50%→55%) |
+| 18 | `stacked` | solid + ::before/::after 겹침 | 선택적 | 위로 -translate-y-2 + 뒤 카드 노출 |
+
+### Hero Section (12종)
+
+| # | Variant | 배경 | 주요 요소 | 스크롤/호버 인터랙션 |
+|---|---------|------|----------|-------------------|
+| 1 | `fullbleed-image` | `background-image` cover + overlay | 중앙 텍스트 + CTA | parallax (background-attachment: fixed) |
+| 2 | `fullbleed-video` | `<video>` autoplay muted loop + overlay | 중앙 텍스트 + CTA | 없음 (prefers-reduced-motion: 정지 이미지 대체) |
+| 3 | `split-image-right` | 좌 solid + 우 이미지 50% | 좌측 텍스트 + CTA | 이미지 float-up (translate-y -10px) |
+| 4 | `split-image-left` | 좌 이미지 50% + 우 solid | 우측 텍스트 + CTA | 이미지 float-up (translate-y -10px) |
+| 5 | `gradient-only` | gradient | 중앙 텍스트 + CTA | gradient position shift (background-position animate) |
+| 6 | `pattern` | SVG/CSS pattern repeat | 텍스트 + CTA | pattern subtle animate (background-position) |
+| 7 | `particle` | CSS particle 또는 canvas | 텍스트 + CTA | interactive particle (마우스 추적) |
+| 8 | `illustration` | solid + 일러스트 (우측/하단) | 텍스트 좌측, 일러스트 우측 | 일러스트 bounce (translate-y 반복) |
+| 9 | `carousel` | 이미지 슬라이더 + overlay | 텍스트 + 네비게이션 dot/arrow | auto slide (fade or slide 전환) |
+| 10 | `mosaic` | 다중 이미지 그리드 + overlay | 중앙 텍스트 | 개별 이미지 hover zoom |
+| 11 | `text-only` | solid 또는 subtle gradient | 대형 타이포 중심 | text gradient animate (background-clip: text) |
+| 12 | `3d-object` | solid 또는 gradient | 3D 요소 + 텍스트 | rotate on scroll (transform: perspective) |
+
+### Navigation (8종)
+
+| # | Variant | 배경 | 아이콘 | 인터랙션 |
+|---|---------|------|--------|---------|
+| 1 | `solid` | 불투명 solid color | 메뉴 아이콘 24px | 메뉴 hover: bg subtle |
+| 2 | `transparent` | transparent → 스크롤 시 solid | 흰색→기본 전환 | scroll trigger (backdrop 추가) |
+| 3 | `glass` | backdrop-blur + 반투명 | currentColor | hover: blur 강화 |
+| 4 | `gradient` | gradient | 흰색 아이콘 | 없음 |
+| 5 | `bordered` | transparent + border-bottom | 기본 색상 | hover: border-primary |
+| 6 | `floating` | solid + shadow + rounded + margin | 아이콘 + 알림 뱃지 | scroll: 떠오름 + shadow 강화 |
+| 7 | `sidebar-fixed` | solid 또는 pattern + border-right | 아이콘 24px + 라벨 | hover: bg highlight, 축소 모드: 아이콘만 |
+| 8 | `bottom-tab` | solid + top-shadow | 아이콘 24px + 라벨 | 활성: icon 색상 + indicator bar/dot |
+
+### Button (14종)
+
+| # | Variant | 배경 | 아이콘 | 호버 인터랙션 |
+|---|---------|------|--------|-------------|
+| 1 | `solid` | solid primary | 선택적 | darken 15%, shadow 추가 |
+| 2 | `outline` | transparent + border | 선택적 | bg 채움 전환 (transparent → primary) |
+| 3 | `ghost` | transparent | 선택적 | subtle bg (primary/5%) |
+| 4 | `gradient` | gradient | 선택적 | gradient position shift |
+| 5 | `glass` | backdrop-blur + 반투명 | 선택적 | blur 강화 + border 밝아짐 |
+| 6 | `icon-only` | solid 또는 transparent | 아이콘 20px | bg scale 또는 circle ripple |
+| 7 | `icon-left` | solid | 좌 아이콘 16~20px | icon 정지, 전체 버튼 효과 |
+| 8 | `icon-right` | solid | 우 아이콘 (arrow) 16~20px | arrow translateX +4px |
+| 9 | `loading` | solid (disabled opacity) | spinner 애니메이션 20px | 없음 (disabled 상태) |
+| 10 | `pill` | solid + rounded-full | 선택적 | shadow lift (-translate-y-0.5) |
+| 11 | `neon-glow` | transparent + neon border | 선택적 | glow spread 확장 (box-shadow) |
+| 12 | `3d-push` | solid + bottom shadow | 선택적 | active: translateY +2px, shadow 줄임 |
+| 13 | `sweep-fill` | transparent → solid (left→right) | 선택적 | ::before width 0→100% 채우기 |
+| 14 | `split` | 2-tone (텍스트 영역 + 아이콘 영역) | 우측 분리 아이콘 | 아이콘 영역 색상 darken |
+
+### Section / Content Block (15종)
+
+| # | Variant | 배경 | 구분선 | 인터랙션 |
+|---|---------|------|--------|---------|
+| 1 | `solid` | 단색 배경 | 없음 | 없음 |
+| 2 | `gradient` | gradient | 없음 | 없음 |
+| 3 | `image-bg` | `background-image` cover + overlay | 없음 | parallax 가능 |
+| 4 | `image-bg-fixed` | `background-attachment: fixed` + overlay | 없음 | 스크롤 시 이미지 고정 |
+| 5 | `pattern` | SVG/CSS pattern repeat | 없음 | 없음 |
+| 6 | `texture` | 미세 텍스처 (노이즈/린넨/종이) | 없음 | 없음 |
+| 7 | `wave-top` | solid | 상단 wave SVG | 없음 |
+| 8 | `wave-both` | solid | 상하 wave SVG | 없음 |
+| 9 | `diagonal` | solid | 대각선 clip-path | 없음 |
+| 10 | `curved` | solid | 곡선 border-radius 대형 | 없음 |
+| 11 | `split-2col` | 좌 이미지 50% + 우 solid 50% | 없음 | 이미지 hover zoom |
+| 12 | `split-offset` | 이미지가 섹션 경계 넘어 걸침 (negative margin) | 없음 | 이미지 float up |
+| 13 | `floating-cards` | gradient 또는 pattern | 없음 | 카드별 개별 호버 |
+| 14 | `glass-panel` | backdrop-blur 패널 | 없음 | hover: blur 강화 |
+| 15 | `dark-light-toggle` | 교차 색상 (짝수: light, 홀수: dark) | 없음 | 없음 |
+
+### Input / Form (10종)
+
+| # | Variant | 배경/보더 | 아이콘 | Focus 인터랙션 |
+|---|---------|----------|--------|--------------|
+| 1 | `outline` | transparent + border | 없음 | border-color → primary |
+| 2 | `filled` | 채움 bg + border 없음 | 없음 | bg 밝아짐 |
+| 3 | `underline` | transparent + border-bottom만 | 없음 | underline 색상 primary + width 확장 |
+| 4 | `icon-prefix` | outline/filled + 좌측 아이콘 | 아이콘 20px 좌측 | icon 색상 → primary |
+| 5 | `icon-suffix` | outline/filled + 우측 아이콘 | 아이콘 20px 우측 (검색/clear) | icon click action |
+| 6 | `icon-both` | outline/filled + 양쪽 아이콘 | 좌 20px + 우 20px | 양쪽 icon 색상 → primary |
+| 7 | `floating-label` | outline/filled + 라벨 이동 | 선택적 | label translateY (-100%) + scale(0.85) |
+| 8 | `glass` | backdrop-blur + 반투명 border | 선택적 | blur 강화 + border 밝아짐 |
+| 9 | `pill` | rounded-full + outline/filled | 선택적 | shadow glow (box-shadow primary/20%) |
+| 10 | `search-expand` | 아이콘만 표시 → 클릭 시 확장 | 검색 아이콘 20px | width 40px→240px + input 표시 |
+
+### List / Table (8종)
+
+| # | Variant | 배경/구분 | 아이콘/이미지 | 호버 인터랙션 |
+|---|---------|----------|-------------|-------------|
+| 1 | `simple` | divider (border-bottom) | 없음 | bg highlight (primary/5%) |
+| 2 | `icon-list` | divider | 좌 아이콘 20px | icon color shift → primary |
+| 3 | `avatar-list` | divider | 아바타 40px 원형 | row highlight |
+| 4 | `thumbnail-list` | divider | 좌 썸네일 60×60 rounded | image zoom 1→1.05 |
+| 5 | `status-list` | divider | 우측 상태 뱃지/아이콘 16px | 없음 |
+| 6 | `striped-table` | 교차 행 배경색 (짝수 행 bg-alt) | 선택적 | row highlight |
+| 7 | `bordered-table` | 셀 border + 헤더 bg-alt | 정렬 아이콘 14px | row highlight |
+| 8 | `card-list` | 각 행이 카드 (shadow + rounded) | 선택적 | card lift (-translate-y-1 + shadow 강화) |
+
+### Modal / Dialog (6종)
+
+| # | Variant | 오버레이 | 컨테이너 | 진입 애니메이션 |
+|---|---------|---------|----------|--------------|
+| 1 | `center` | bg-black/50 | 중앙 고정 rounded | scale 0.95→1 + opacity 0→1 (0.2s ease-out) |
+| 2 | `glass` | backdrop-blur-sm | 중앙 backdrop-blur rounded | scale 0.95→1 + blur-in (0.2s) |
+| 3 | `fullscreen` | 없음 | 전체 화면 | slide-up (translateY 100%→0) (0.3s ease-out) |
+| 4 | `drawer-right` | bg-black/30 | 우측 고정 h-full | slide-left (translateX 100%→0) (0.3s ease-out) |
+| 5 | `drawer-bottom` | bg-black/30 | 하단 고정 w-full rounded-t | slide-up (translateY 100%→0) (0.3s ease-out) |
+| 6 | `image-header` | bg-black/50 | 상단 이미지 + 하단 콘텐츠 | scale 0.95→1 + opacity (0.2s) |
+
+### Toast / Alert (6종)
+
+| # | Variant | 배경 | 아이콘 | 애니메이션 |
+|---|---------|------|--------|-----------|
+| 1 | `solid` | 시맨틱 색상 (success/warning/error/info) | 상태 아이콘 20px | slide-in-right + fade-out (0.3s) |
+| 2 | `outline` | transparent + 시맨틱 border | 상태 아이콘 20px | slide-in-right (0.3s) |
+| 3 | `glass` | backdrop-blur + 반투명 | 상태 아이콘 20px | slide-in-right + blur-in (0.3s) |
+| 4 | `left-accent` | white/surface + 좌측 시맨틱 border-4 | 상태 아이콘 20px | slide-in-right (0.3s) |
+| 5 | `icon-circle` | white/surface | 아이콘 24px in 시맨틱 원형 bg 36px | scale-in (0.2s) |
+| 6 | `progress` | white/surface + 하단 progress bar | 상태 아이콘 20px | slide-in + progress width 100%→0% |
+
+### Badge / Tag (6종)
+
+| # | Variant | 배경 | 아이콘 | 인터랙션 |
+|---|---------|------|--------|---------|
+| 1 | `solid` | 시맨틱/accent 배경 | 없음 | 없음 |
+| 2 | `outline` | transparent + border | 없음 | 없음 |
+| 3 | `dot` | transparent/subtle | 좌측 dot 8px (시맨틱 색상) | 없음 |
+| 4 | `icon-badge` | solid/subtle | 좌측 아이콘 14px | 없음 |
+| 5 | `pill-dismiss` | solid + 우측 X 버튼 | close 아이콘 14px | X hover: bg darken |
+| 6 | `gradient` | gradient 배경 | 없음 | 없음 |
+
+### Footer (8종)
+
+| # | Variant | 배경 | 구분선 | 특수 요소 |
+|---|---------|------|--------|----------|
+| 1 | `simple` | solid dark | 상단 border-top | 카피라이트 + 링크 1줄 |
+| 2 | `multi-column` | solid dark | 상단 border-top | 3~4 컬럼 링크 + 하단 카피라이트 |
+| 3 | `wave-top` | solid dark | 상단 wave SVG | 멀티 컬럼 + wave |
+| 4 | `gradient` | gradient | 없음 | 링크 + 카피라이트 |
+| 5 | `cta-footer` | 2-tone (상단 CTA 배경 + 하단 dark) | CTA/footer 구분 | 상단 CTA 배너 + 하단 링크 |
+| 6 | `image-bg` | `background-image` + dark overlay | 없음 | 링크 (white 텍스트) |
+| 7 | `social-icons` | solid dark | 없음 | 소셜 아이콘 20px 중심 + 최소 텍스트 |
+| 8 | `newsletter` | solid 또는 gradient | 없음 | 이메일 인풋 + 구독 CTA + 링크 |
+
+### Skeleton / Loading (5종)
+
+| # | Variant | 형태 | 애니메이션 |
+|---|---------|------|-----------|
+| 1 | `pulse` | 컨텐츠 형태 회색 블록 (rounded) | opacity 0.5↔1 반복 (1.5s infinite) |
+| 2 | `shimmer` | 컨텐츠 형태 회색 블록 | 좌→우 gradient sweep (1.5s infinite) |
+| 3 | `blur-up` | LQIP 블러 이미지 → 원본 | blur 20px→0 (0.5s ease-out, 로드 완료 시) |
+| 4 | `dominant-color` | 이미지 대표색 배경 → 원본 | color→image cross-fade (0.3s) |
+| 5 | `content-placeholder` | 텍스트 줄/이미지/아바타 형태 유지 | shimmer 또는 pulse 선택 |
+
+### Empty State (5종)
+
+| # | Variant | 비주얼 | 일러스트/아이콘 | 크기 |
+|---|---------|--------|----------------|------|
+| 1 | `illustration` | 일러스트 + 제목 + 설명 + CTA | SVG 일러스트 200~300px | 페이지 레벨 |
+| 2 | `icon-large` | 대형 아이콘 + 제목 + 설명 | 아이콘 64px (muted color) | 페이지/섹션 |
+| 3 | `minimal` | 텍스트 + 링크만 | 없음 | 카드 내부 |
+| 4 | `action-card` | 카드 형태 + 아이콘 + 설명 + CTA | 아이콘 48px | 섹션 내부 |
+| 5 | `animated` | 애니메이션 일러스트 + 텍스트 | Lottie/CSS animation | 페이지 레벨 |
+
+---
+

package/skills/web-design/claude-code/defs/component-specs/04-interaction-pattern-visual.md

@@ -0,0 +1,61 @@
+# 비주얼 인터랙션 패턴 사전
+
+
+컴포넌트 variant에서 참조하는 인터랙션 패턴의 CSS 구현 가이드입니다.
+
+### 이미지 인터랙션
+
+| 패턴명 | 기본 상태 | 호버 상태 | CSS transition |
+|--------|----------|----------|---------------|
+| `image-zoom` | `transform: scale(1)` | `transform: scale(1.05~1.1)` | `transform 0.4s ease` |
+| `image-reveal` | `opacity: 0.2; filter: blur(2px)` | `opacity: 0.6; filter: blur(0)` | `opacity 0.4s, filter 0.4s ease` |
+| `overlay-fade` | `::after opacity: 0.6~0.8` | `::after opacity: 0.3~0.4` | `opacity 0.3s ease-out` |
+| `image-grayscale` | `filter: grayscale(100%)` | `filter: grayscale(0)` | `filter 0.5s ease` |
+| `image-float` | `transform: translateY(0)` | `transform: translateY(-10px)` | `transform 0.4s ease` |
+| `parallax` | `background-attachment: fixed` | 스크롤 속도 차이 | CSS only 또는 JS (GSAP) |
+| `ken-burns` | `transform: scale(1)` | `transform: scale(1.1) translate(-2%, -1%)` | `transform 20s ease infinite` |
+
+### 요소 인터랙션
+
+| 패턴명 | 기본 상태 | 호버 상태 | CSS transition |
+|--------|----------|----------|---------------|
+| `lift` | `transform: none; shadow: sm` | `translateY(-2~4px); shadow: lg` | `transform 0.2s, box-shadow 0.2s ease` |
+| `tilt-3d` | `perspective(1000px)` | `rotateY(5deg) rotateX(3deg)` | JS (마우스 트래킹) |
+| `glow-expand` | `box-shadow: 0 0 0 rgba(...)` | `box-shadow: 0 0 20~30px rgba(...)` | `box-shadow 0.3s ease` |
+| `border-glow` | `border-color: subtle` | `border-color: primary + box-shadow` | `border-color 0.2s, box-shadow 0.3s` |
+| `stacked-reveal` | `::before translateY(0)` | `::before translateY(8px) rotate(2deg)` | `transform 0.3s ease` |
+| `split-shift` | 분할 위치 50% | 분할 위치 45%~55% | `background-size 0.4s ease` |
+
+### 텍스트/아이콘 인터랙션
+
+| 패턴명 | 기본 상태 | 호버 상태 | CSS transition |
+|--------|----------|----------|---------------|
+| `icon-morph` | `transform: none` | `scale(1.2) rotate(15deg)` | `transform 0.2s ease` |
+| `icon-bounce` | `transform: none` | `translateY(-2px)` | `transform 0.2s ease` |
+| `icon-shift` | `transform: none` | `translateX(4px)` | `transform 0.2s ease` |
+| `icon-color` | `color: secondary` | `color: primary` | `color 0.2s ease` |
+| `text-underline-grow` | `::after width: 0` | `::after width: 100%` | `width 0.3s ease` |
+| `text-gradient-animate` | `background-position: 0%` | `background-position: 100%` | `background-position 3s ease infinite` |
+| `counter-up` | `display: 0` | 목표 숫자까지 카운트 | JS (IntersectionObserver + requestAnimationFrame) |
+| `text-slide-up` | `translateY(10px); opacity: 0` | `translateY(0); opacity: 1` | `transform 0.3s, opacity 0.3s ease` |
+
+### 진입 애니메이션 (스크롤 트리거)
+
+| 패턴명 | 초기 상태 | 진입 상태 | 트리거 |
+|--------|----------|----------|--------|
+| `fade-in` | `opacity: 0` | `opacity: 1` | IntersectionObserver |
+| `fade-up` | `opacity: 0; translateY(20px)` | `opacity: 1; translateY(0)` | IntersectionObserver |
+| `fade-left` | `opacity: 0; translateX(-20px)` | `opacity: 1; translateX(0)` | IntersectionObserver |
+| `fade-right` | `opacity: 0; translateX(20px)` | `opacity: 1; translateX(0)` | IntersectionObserver |
+| `scale-in` | `opacity: 0; scale(0.95)` | `opacity: 1; scale(1)` | IntersectionObserver |
+| `stagger` | 자식 요소 순차 delay (50~100ms) | 각 요소 fade-up | IntersectionObserver + delay |
+
+### 전환 애니메이션 (모달/드로어)
+
+| 패턴명 | 닫힘 | 열림 | duration |
+|--------|------|------|----------|
+| `modal-scale` | `scale(0.95); opacity: 0` | `scale(1); opacity: 1` | 0.2s ease-out |
+| `slide-up` | `translateY(100%)` | `translateY(0)` | 0.3s ease-out |
+| `slide-right` | `translateX(100%)` | `translateX(0)` | 0.3s ease-out |
+| `slide-left` | `translateX(-100%)` | `translateX(0)` | 0.3s ease-out |
+| `blur-in` | `backdrop-filter: blur(0)` | `backdrop-filter: blur(8px)` | 0.2s ease |

package/skills/web-design/claude-code/defs/component-specs/domains/admin.md

@@ -0,0 +1,55 @@
+# Admin/CMS 도메인 컴포넌트 스펙
+
+> 참조: defs/component-specs.md (기본 컴포넌트)
+> 용도: 관리자 패널, CMS, 백오피스
+
+## 컴포넌트 목록
+
+### CRUD Table
+- DataTable 기반 + 생성/수정/삭제 인라인
+- 벌크 액션 (다중 선택 → 일괄 처리)
+- 소프트 삭제 (휴지통)
+- 감사 로그 (누가 언제 수정)
+- CSV/Excel 내보내기
+
+### ContentEditor
+- 리치 텍스트 에디터 (WYSIWYG)
+- 마크다운 모드 전환
+- 이미지/동영상 임베드
+- 코드 블록 (syntax highlighting)
+- 테이블 삽입
+- 자동 저장 + 버전 관리
+- SEO 메타데이터 편집 패널
+
+### UserManager
+- 사용자 목록 (검색/필터/정렬)
+- 역할(Role) 관리 (RBAC)
+- 권한(Permission) 매트릭스
+- 사용자 초대 (이메일)
+- 활동 로그
+
+### FileManager
+- 폴더/파일 트리 뷰
+- 드래그 앤 드롭 업로드
+- 이미지 미리보기/썸네일
+- 파일 검색
+- 용량 표시
+
+### NotificationCenter
+- 알림 드롭다운
+- 읽음/안읽음 상태
+- 알림 유형별 아이콘
+- 시간순 정렬
+- 알림 설정 패널
+
+### ActivityLog
+- 타임라인 형식
+- 필터 (사용자/액션/날짜)
+- 상세 diff 보기
+- 실시간 업데이트 (WebSocket)
+
+### SettingsForm
+- 카테고리별 탭/사이드바
+- 토글 스위치 그룹
+- 저장/취소/되돌리기
+- 변경 사항 표시 (dirty state)

package/skills/web-design/claude-code/defs/component-specs/domains/dashboard.md

@@ -0,0 +1,60 @@
+# Dashboard 도메인 컴포넌트 스펙
+
+> 참조: defs/component-specs.md (기본 컴포넌트)
+> 용도: 데이터 대시보드, 모니터링, 분석 도구
+
+## 컴포넌트 목록
+
+### StatCard
+- 주요 지표 (KPI) 숫자
+- 증감 표시 (↑↓, 퍼센트, 색상)
+- 미니 차트 (sparkline)
+- 기간 선택 (일/주/월/연)
+- 아이콘 + 라벨
+- 로딩 스켈레톤
+
+### ChartWidget
+- 차트 타입: Line, Bar, Pie, Doughnut, Area, Scatter
+- 반응형 리사이즈
+- 툴팁 (hover)
+- 범례 (토글 가능)
+- 줌/팬
+- 데이터 라벨
+- 실시간 업데이트
+
+### DataGrid
+- 정렬/필터/검색
+- 컬럼 커스터마이징
+- 행 클릭 → 상세 드릴다운
+- 페이지네이션/무한 스크롤
+- 내보내기 (CSV/PDF)
+
+### DateRangePicker
+- 캘린더 UI (듀얼 패널)
+- 프리셋 (오늘, 7일, 30일, 분기, 연간)
+- 커스텀 범위 입력
+- 비교 기간 선택
+
+### KPIBoard
+- 그리드 배치 (드래그 앤 드롭)
+- 위젯 추가/제거
+- 레이아웃 저장 (사용자별)
+- 전체화면 모드
+
+### Heatmap
+- 시간×카테고리 매트릭스
+- 색상 범례
+- 셀 클릭 → 상세
+- 툴팁
+
+### FunnelChart
+- 단계별 전환률
+- 절대 수/비율 표시
+- 이탈률 표시
+- 호버 상세
+
+### AlertBanner
+- 심각도별 색상 (info/warning/error/critical)
+- 닫기/스누즈
+- 액션 버튼
+- 실시간 알림 연동

package/skills/web-design/claude-code/defs/component-specs/domains/erp.md

@@ -0,0 +1,68 @@
+# ERP 도메인 컴포넌트 스펙
+
+> 참조: defs/component-specs.md (기본 컴포넌트)
+> 용도: ERP, 재고/물류 관리, 생산 관리, 회계 시스템
+
+## 컴포넌트 목록
+
+### DataTable 고급
+- 정렬 (다중 컬럼)
+- 필터링 (컬럼별 + 글로벌)
+- 페이지네이션 (서버사이드)
+- 행 선택 (단일/다중/전체)
+- 인라인 편집
+- 컬럼 리사이즈/리오더
+- 고정 헤더/컬럼 (sticky)
+- 행 확장 (nested data)
+- 가상 스크롤링 (10,000+ 행)
+- 컬럼 그룹핑
+- 요약 행 (합계, 평균)
+- 셀 병합
+
+### FormBuilder
+- 동적 폼 생성 (JSON 스키마 기반)
+- 다단계 폼 (wizard)
+- 조건부 필드 표시/숨김
+- 폼 유효성 검사 (실시간)
+- 자동 저장 (debounce)
+- 폼 히스토리/되돌리기
+
+### TreeView
+- 계층 데이터 표시 (무제한 depth)
+- 드래그 앤 드롭 (노드 이동)
+- 체크박스 선택 (부모-자식 연동)
+- 지연 로딩 (가상화)
+- 검색/필터
+- 컨텍스트 메뉴
+
+### MasterDetail
+- 좌측 목록 + 우측 상세
+- 목록/상세 비율 조절 (드래그)
+- 상세 패널 탭 구성
+- 인라인 편집 모드
+
+### Gantt Chart
+- 타임라인 뷰 (일/주/월)
+- 태스크 바 드래그
+- 의존성 화살표
+- 마일스톤 마커
+- 리소스 할당 뷰
+
+### ApprovalFlow
+- 결재 라인 시각화 (세로/가로)
+- 상태 표시 (대기/승인/반려/참조)
+- 결재 코멘트
+- 위임/대결 표시
+
+### NumberInput
+- 통화 포맷 (₩, $, €)
+- 천 단위 콤마
+- 소수점 자릿수 제한
+- 범위 검증 (min/max)
+- 증감 버튼 (stepper)
+
+### StatusTimeline
+- 프로세스 단계 시각화
+- 현재 단계 하이라이트
+- 과거 이력 목록
+- 담당자/시간 표시

package/skills/web-design/claude-code/defs/component-specs/domains/saas.md

@@ -0,0 +1,65 @@
+# SaaS 도메인 컴포넌트 스펙
+
+> 참조: defs/component-specs.md (기본 컴포넌트)
+> 용도: SaaS, 구독형 서비스, 멀티테넌트
+
+## 컴포넌트 목록
+
+### PricingTable
+- 플랜 비교 (2~4열)
+- 기능 체크리스트 (✓/✗/부분)
+- 월간/연간 토글 (할인율 표시)
+- 추천 플랜 하이라이트
+- CTA 버튼 (플랜별)
+- 기업용 "문의하기" 옵션
+- 반응형 (모바일: 스와이프 카드)
+
+### OnboardingWizard
+- 단계 프로그레스 바
+- 스텝별 콘텐츠 (설명 + 입력)
+- 건너뛰기/되돌아가기
+- 완료 축하 화면 (confetti)
+- 체크리스트 (남은 설정)
+
+### SettingsPanel
+- 카테고리 사이드바
+- 프로필 설정
+- 팀/조직 설정
+- 알림 설정 (채널별 토글)
+- 통합(Integration) 설정
+- API 키 관리
+- 빌링/구독 관리
+
+### UsageMeter
+- 사용량 바 (% 표시)
+- 한도 경고 (80%, 90%, 100%)
+- 업그레이드 CTA
+- 사용 내역 차트 (일별)
+- 리소스별 분류
+
+### TeamManagement
+- 멤버 목록 (아바타, 역할, 상태)
+- 초대 (이메일/링크)
+- 역할 변경 드롭다운
+- 제거 확인 모달
+- 팀 활동 요약
+
+### BillingDashboard
+- 현재 플랜 정보
+- 다음 결제일/금액
+- 결제 수단 관리
+- 인보이스 목록/다운로드
+- 플랜 변경/취소
+
+### FeatureGate
+- 플랜별 기능 잠금 UI
+- 업그레이드 프롬프트 (인라인)
+- "Pro" 배지 표시
+- 미리보기 모드 (블러 + CTA)
+
+### IntegrationCard
+- 앱 아이콘 + 이름 + 설명
+- 연결/해제 토글
+- 설정 드롭다운
+- 상태 표시 (연결됨/오류/미설정)
+- 카테고리 필터

package/skills/web-design/claude-code/defs/component-specs.md

@@ -0,0 +1,24 @@
+# project_type별 컴포넌트 & 기능 흐름
+
+> 참조: `gen/gen-design-guide.md` 섹션 4, 6에서 사용
+> Dependencies: 없음 (독립 참조 데이터)
+
+## project_type별 컴포넌트 세트 (섹션 4)
+
+> 상세: `defs/component-specs/01-set-component.md` 참조
+
+## project_type별 기능 흐름 (섹션 6)
+
+> 상세: `defs/component-specs/02-features-flow.md` 참조
+
+1. **로그인**: 이메일+비밀번호, 5회 실패 잠금, 중복 로그인 감지, 세션 만료 30분
+## 비주얼 Variant 시스템 (121종)
+
+> 상세: `defs/component-specs/03-system-visual.md` 참조
+
+각 컴포넌트의 비주얼 variant를 정의합니다. gen-design-guide.md에서 스타일별로 CSS/HTML 코드를 생성할 때 이 정의를 참조합니다.
+## 비주얼 인터랙션 패턴 사전
+
+> 상세: `defs/component-specs/04-interaction-pattern-visual.md` 참조
+
+컴포넌트 variant에서 참조하는 인터랙션 패턴의 CSS 구현 가이드입니다.

package/skills/web-design/claude-code/defs/design-guide-sections.md

@@ -0,0 +1,37 @@
+# 디자인 가이드 섹션 정의
+
+> 참조: `gen/gen-design-guide.md`에서 사용
+> Dependencies: `defs/ia-patterns.md`, `defs/component-specs.md`, `defs/icon-mappings.md`, `defs/image-strategies.md`
+
+## 섹션 구성 (8개)
+
+| 번호 | 섹션명 | full | style_only | 참조 파일 |
+|------|--------|------|------------|----------|
+| 1 | 프로젝트 개요 | O | O | (인라인) |
+| 2 | 정보 구조 (IA) | O | X | `defs/ia-patterns.md` |
+| 3 | 스타일 가이드 | O | O | (인라인) |
+| 3e | 이미지 전략 | O | X | `defs/image-strategies.md` |
+| 4 | 컴포넌트 스펙 | O | O | `defs/component-specs.md` |
+| 5 | 상태 & 피드백 | O | X | (인라인) |
+| 6 | 기능 흐름 | O | X | `defs/component-specs.md` |
+| 7 | 인터랙션 & 모션 | O | X | `defs/styles.md` (스타일별 패턴) |
+| 8 | 참조 & 벤치마킹 | O | X | `defs/icon-mappings.md` |
+
+## 아이콘 매핑 참조
+
+섹션 4e 아이콘 매핑은 `defs/icon-mappings.md`를 참조합니다.
+
+## 이미지 전략 참조
+
+섹션 3e 이미지 전략은 `defs/image-strategies.md`를 참조합니다.
+
+## 샘플 데이터 표기 규칙 (공통)
+
+| 항목 | 형식 | 예시 |
+|---|---|---|
+| 날짜/시간 | ISO 기반 | `2025-01-15 14:30:22` |
+| 숫자 | 천단위 콤마 | `1,234,567` |
+| 퍼센트 | 소수점 1자리 | `45.2%` |
+| 파일 크기 | 자동 단위 | `2.4 GB` |
+| 시간 경과 | 자연어 | `3분 전`, `2시간 전` |
+| 사용자 이름 | 현지어 | `김관리`, `이보안` |

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

@@ -0,0 +1,69 @@
+# 1. 유틸리티/도구 (`utility`)
+
+
+### desktop_utility_single — 단일 패널 (Single Panel)
+
+```
+┌─────────────────────────────────┐
+│ [Title Bar]  ─  □  ✕            │
+├─────────────────────────────────┤
+│ [Toolbar]  🔧 ⚙️ 📁 💾          │
+├─────────────────────────────────┤
+│                                 │
+│         Main Content            │
+│         (단일 기능 영역)          │
+│                                 │
+├─────────────────────────────────┤
+│ [Status Bar]                    │
+└─────────────────────────────────┘
+```
+
+- **특징**: 하나의 핵심 기능에 집중, 미니멀 UI
+- **적합**: 계산기, 단위 변환, 텍스트 편집기, 스크린샷 도구
+- **핵심 화면**: 메인 기능, 설정(모달)
+
+### desktop_utility_multipane — 멀티 패인 (Multi-Pane)
+
+```
+┌─────────────────────────────────┐
+│ [Title Bar]  ─  □  ✕            │
+├────────┬────────────────────────┤
+│ [Toolbar]  🔧 ⚙️                │
+├────────┼────────────────────────┤
+│        │                        │
+│  Nav   │    Main Content        │
+│  Tree  │    (작업 영역)          │
+│        │                        │
+│  📁    │                        │
+│  📁    │                        │
+│  📁    │                        │
+├────────┴────────────────────────┤
+│ [Status Bar]                    │
+└─────────────────────────────────┘
+```
+
+- **특징**: 좌측 트리/리스트 + 우측 콘텐츠, 리사이즈 가능
+- **적합**: 파일 매니저, FTP 클라이언트, 설정 관리, SSH 터미널
+- **핵심 화면**: 내비게이션 트리, 콘텐츠 뷰, 설정
+
+### desktop_utility_compact — 컴팩트 위젯 (Compact Widget)
+
+```
+┌───────────────────┐
+│ [≡]  Widget  [✕]  │
+├───────────────────┤
+│   ┌───────────┐   │
+│   │  Status   │   │
+│   │  Display  │   │
+│   └───────────┘   │
+│   [Action] [More] │
+└───────────────────┘
+     (항상 최상위)
+```
+
+- **특징**: 소형 고정 창, 항상 위, 시스템 트레이 연동
+- **적합**: 시계, 시스템 모니터, 클립보드 매니저, 런처
+- **핵심 화면**: 위젯 뷰, 확장 뷰, 트레이 메뉴
+
+---
+