@kood/claude-code 0.7.6 → 0.7.7

package/templates/.claude/skills/design/references/responsive.md

@@ -0,0 +1,248 @@
+# 반응형 디자인 가이드 (2025-2026)
+
+> 브레이크포인트, Container Queries, Fluid Typography 디자인 사양서
+
+---
+
+## 1. 브레이크포인트
+
+### 표준 브레이크포인트
+
+| 이름 | 너비 | 대상 기기 |
+|------|------|----------|
+| **xs** | 0-359px | 소형 폰 |
+| **sm** | 360-639px | 일반 폰 |
+| **md** | 640-767px | 대형 폰/소형 태블릿 |
+| **lg** | 768-1023px | 태블릿 |
+| **xl** | 1024-1279px | 소형 데스크톱/랩탑 |
+| **2xl** | 1280-1535px | 데스크톱 |
+| **3xl** | 1536px+ | 대형 데스크톱 |
+
+### 디자인 권장 브레이크포인트
+
+| 접근법 | 브레이크포인트 | 용도 |
+|--------|--------------|------|
+| **Mobile-First** | 360 → 768 → 1024 → 1440 | 일반적 |
+| **Desktop-First** | 1440 → 1024 → 768 → 360 | 레거시 |
+| **Content-First** | 콘텐츠 깨지는 지점 | 최적 |
+
+---
+
+## 2. Container Queries
+
+### 컨테이너 사이즈
+
+| 이름 | 최소 너비 | 용도 |
+|------|----------|------|
+| **@xs** | 160px | 작은 위젯 |
+| **@sm** | 320px | 카드 내부 |
+| **@md** | 448px | 중간 컨테이너 |
+| **@lg** | 512px | 넓은 컨테이너 |
+| **@xl** | 576px | 전체 섹션 |
+| **@2xl** | 672px | 메인 콘텐츠 |
+
+### Container Query 단위
+
+| 단위 | 설명 | 사용 예시 |
+|------|------|----------|
+| **cqw** | 컨테이너 너비 1% | 폰트 크기 유동화 |
+| **cqh** | 컨테이너 높이 1% | 높이 기반 레이아웃 |
+| **cqi** | 인라인 축 1% | 반응형 패딩 |
+| **cqb** | 블록 축 1% | 반응형 마진 |
+| **cqmin** | min(cqi, cqb) | 최소값 기반 |
+| **cqmax** | max(cqi, cqb) | 최대값 기반 |
+
+---
+
+## 3. Fluid Typography
+
+### 폰트 크기 스케일
+
+| 역할 | 모바일 | 데스크톱 | Fluid 범위 |
+|------|--------|----------|-----------|
+| **Display** | 36px | 72px | 36-72px |
+| **H1** | 30px | 48px | 30-48px |
+| **H2** | 24px | 36px | 24-36px |
+| **H3** | 20px | 24px | 20-24px |
+| **Body** | 16px | 18px | 16-18px |
+| **Small** | 14px | 14px | 고정 |
+| **Caption** | 12px | 12px | 고정 |
+
+### Fluid 계산 공식
+
+| 뷰포트 범위 | 공식 |
+|------------|------|
+| **360-1440px** | `clamp(최소, 계산값, 최대)` |
+| **선호값 계산** | `최소 + (최대-최소) × ((100vw - 360px) / (1440-360))` |
+
+### Line Height 권장값
+
+| 폰트 크기 | Line Height |
+|----------|-------------|
+| **12-14px** | 1.5-1.6 |
+| **16-18px** | 1.5-1.7 |
+| **20-24px** | 1.4-1.5 |
+| **30px+** | 1.2-1.3 |
+
+---
+
+## 4. 레이아웃 패턴
+
+### 그리드 시스템
+
+| 브레이크포인트 | 열 수 | 거터 | 마진 |
+|---------------|------|------|------|
+| **Mobile** | 4 | 16px | 16px |
+| **Tablet** | 8 | 24px | 32px |
+| **Desktop** | 12 | 24px | auto (max 1200px) |
+
+### 컴포넌트별 열 점유
+
+| 컴포넌트 | 모바일 | 태블릿 | 데스크톱 |
+|---------|--------|--------|----------|
+| **카드** | 4열 (100%) | 4열 (50%) | 3-4열 (25-33%) |
+| **사이드바** | 숨김 | 2열 | 3열 (고정) |
+| **콘텐츠** | 4열 | 6열 | 9열 |
+
+### 스택 vs 나란히
+
+| 상황 | 모바일 | 태블릿+ |
+|------|--------|--------|
+| **이미지+텍스트** | 세로 스택 | 나란히 (50:50) |
+| **폼 필드** | 전체 너비 | 2열 또는 3열 |
+| **카드 그리드** | 1열 | 2-4열 |
+| **네비게이션** | 햄버거 메뉴 | 가로 메뉴 |
+
+---
+
+## 5. 반응형 스페이싱
+
+### 기본 스페이싱 스케일
+
+| 토큰 | 모바일 | 태블릿 | 데스크톱 |
+|------|--------|--------|----------|
+| **xs** | 4px | 4px | 4px |
+| **sm** | 8px | 8px | 8px |
+| **md** | 16px | 20px | 24px |
+| **lg** | 24px | 32px | 40px |
+| **xl** | 32px | 48px | 64px |
+| **2xl** | 48px | 64px | 96px |
+
+### 섹션 간격
+
+| 섹션 유형 | 모바일 | 데스크톱 |
+|----------|--------|----------|
+| **히어로 → 섹션** | 48px | 80px |
+| **섹션 간** | 48px | 80-120px |
+| **Footer 전** | 64px | 120px |
+
+---
+
+## 6. 반응형 이미지
+
+### 이미지 사이즈 전략
+
+| 브레이크포인트 | 권장 너비 | 포맷 |
+|---------------|----------|------|
+| **Mobile** | 640w, 750w | WebP/AVIF |
+| **Tablet** | 1080w | WebP/AVIF |
+| **Desktop** | 1920w, 2560w | WebP/AVIF |
+
+### Art Direction
+
+| 화면 | 비율 | 포커스 |
+|------|------|--------|
+| **모바일** | 1:1 또는 4:5 | 중심 크롭 |
+| **태블릿** | 4:3 | 중간 크롭 |
+| **데스크톱** | 16:9 또는 21:9 | 전체 이미지 |
+
+### 히어로 이미지 사이즈
+
+| 기기 | 너비 | 높이 |
+|------|------|------|
+| **Mobile** | 750px | 1334px (100vh) |
+| **Tablet** | 1536px | 1024px |
+| **Desktop** | 1920px | 1080px |
+| **Retina** | 2x 해상도 | 2x 해상도 |
+
+---
+
+## 7. 터치 vs 마우스
+
+### 인터랙션 차이
+
+| 요소 | 터치 (모바일) | 마우스 (데스크톱) |
+|------|-------------|------------------|
+| **터치 타겟** | 44-48px 최소 | 24px 가능 |
+| **호버 상태** | 없음 | 필수 |
+| **드래그** | 스와이프 제스처 | 드래그 앤 드롭 |
+| **툴팁** | 탭 앤 홀드 | 호버 |
+
+### 네비게이션 변환
+
+| 데스크톱 | 모바일 변환 |
+|---------|------------|
+| **가로 메뉴** | 햄버거 메뉴 |
+| **드롭다운** | 전체 화면 드로어 |
+| **사이드바** | 바텀 시트 또는 숨김 |
+| **호버 메뉴** | 탭 메뉴 |
+
+---
+
+## 8. 2025-2026 트렌드
+
+### 새로운 디바이스 대응
+
+| 디바이스 | 고려사항 |
+|---------|---------|
+| **Foldable** | 힌지 영역 피하기, 연속성 유지 |
+| **Ultra-wide** | 최대 너비 제한, 다중 열 |
+| **AR/VR** | 3D 공간 UI, 시선 기반 인터랙션 |
+
+### 새로운 CSS 기능
+
+| 기능 | 용도 |
+|------|------|
+| **Container Queries** | 컴포넌트 기반 반응형 |
+| **:has()** | 부모 선택자 |
+| **Subgrid** | 중첩 그리드 정렬 |
+| **CSS Nesting** | 선택자 중첩 |
+| **@layer** | 캐스케이드 레이어 |
+
+### Intrinsic Design 원칙
+
+| 원칙 | 설명 |
+|------|------|
+| **콘텐츠 기반** | 브레이크포인트가 아닌 콘텐츠에 따라 |
+| **유동적 스케일** | 단계별이 아닌 연속적 변화 |
+| **컴포넌트 독립** | 컨테이너 기반 자체 반응형 |
+
+---
+
+## 체크리스트
+
+### 설계 단계
+- [ ] Mobile-First 접근
+- [ ] 핵심 브레이크포인트 정의 (360, 768, 1024, 1440)
+- [ ] Fluid Typography 적용
+- [ ] Container Queries 고려
+
+### 구현 단계
+- [ ] 터치 타겟 44px 이상
+- [ ] 이미지 srcset/sizes 설정
+- [ ] 호버 상태 → 모바일 대체
+- [ ] 가로/세로 모드 테스트
+
+### 테스트 단계
+- [ ] 실제 기기 테스트
+- [ ] 느린 네트워크 테스트
+- [ ] 다크 모드 테스트
+- [ ] 접근성 테스트
+
+---
+
+## 참고
+
+- [Responsive Web Design Fundamentals](https://web.dev/responsive-web-design-basics/)
+- [Container Queries Spec](https://www.w3.org/TR/css-contain-3/)
+- [Utopia Fluid Type Calculator](https://utopia.fyi/)

package/templates/.claude/skills/design/references/safe-area.md

@@ -0,0 +1,202 @@
+# Safe Area 디자인 가이드
+
+> iOS, Android, Foldable 디바이스의 Safe Area 사양서
+
+---
+
+## 1. iOS Safe Area
+
+### 기본 Insets
+
+| 요소 | 사이즈 | 비고 |
+|------|--------|------|
+| **상단 (노치)** | 47-59pt | 기기별 상이 |
+| **하단 (Home Indicator)** | 34pt | 홈 버튼 없는 기기 |
+| **좌측 (가로)** | 44pt | 노치 회피 |
+| **우측 (가로)** | 44pt | 노치 회피 |
+
+### Dynamic Island
+
+| 요소 | 사이즈 |
+|------|--------|
+| **높이** | 36px |
+| **너비 (Compact)** | 126px |
+| **너비 (Expanded)** | 최대 371px |
+| **아이콘** | 24px |
+| **텍스트** | 15pt, line-height 22pt |
+
+**프레젠테이션 모드:**
+- **Compact**: 기본 축소 (진행 중인 활동)
+- **Minimal**: 최소화 (배경 활동)
+- **Expanded**: 확장 (상세 정보)
+
+### 디바이스별 Safe Area
+
+| 디바이스 | 상단 | 하단 |
+|---------|------|------|
+| **iPhone 15 Pro** | 59pt | 34pt |
+| **iPhone 15** | 59pt | 34pt |
+| **iPhone SE** | 20pt | 0pt |
+| **iPad Pro** | 24pt | 20pt |
+
+---
+
+## 2. Android Safe Area
+
+### Display Cutout 유형
+
+| 유형 | 설명 |
+|------|------|
+| **Notch** | 상단 중앙 노치 |
+| **Punch-hole** | 카메라 구멍 (좌상단/중앙) |
+| **Waterfall** | 양측면 곡면 |
+
+### System Bars 높이
+
+| 요소 | 사이즈 | 비고 |
+|------|--------|------|
+| **Status Bar** | 24-48dp | 기기별 상이 |
+| **Navigation Bar** | 48dp | 3버튼 네비게이션 |
+| **Gesture Bar** | 24dp | 제스처 네비게이션 |
+
+### Edge-to-Edge (Android 15+)
+
+| 항목 | 사양 |
+|------|------|
+| **기본 동작** | SDK 35+ 앱은 강제 Edge-to-Edge |
+| **시스템 바** | 반투명, 콘텐츠 뒤로 렌더링 |
+| **필수 처리** | WindowInsets로 패딩 적용 |
+
+### 제스처 영역
+
+| 영역 | 사이즈 | 용도 |
+|------|--------|------|
+| **좌측 엣지** | 20dp | 뒤로가기 제스처 |
+| **우측 엣지** | 20dp | 뒤로가기 제스처 |
+| **하단** | 24dp | 홈 제스처 |
+
+---
+
+## 3. Foldable 디바이스
+
+### 힌지 영역
+
+| 디바이스 | 힌지 너비 | 힌지 높이 |
+|---------|----------|----------|
+| **Galaxy Z Fold** | 0px (접힘) | 전체 높이 |
+| **Pixel Fold** | 약 12dp | 전체 높이 |
+
+### Flex Mode (반접힘)
+
+| 영역 | 용도 |
+|------|------|
+| **상단 (경사)** | 비주얼 콘텐츠 (영상, 이미지) |
+| **하단 (평면)** | 컨트롤 (버튼, 슬라이더) |
+| **힌지 근처** | 인터랙티브 요소 배치 금지 |
+
+### 화면 상태
+
+| 상태 | 설명 |
+|------|------|
+| **FLAT** | 완전히 펼침 |
+| **HALF_OPENED** | 반접힘 (Flex Mode) |
+| **Tabletop** | 가로 반접힘 (힌지 가로) |
+| **Book** | 세로 반접힘 (힌지 세로) |
+
+### 앱 연속성 요구사항
+
+| 항목 | 요구사항 |
+|------|----------|
+| **화면 전환** | 커버 ↔ 메인 중단 없이 |
+| **스크롤 위치** | 전환 시 유지 |
+| **키보드 상태** | 전환 시 유지 |
+| **전체 화면** | 레터박스 금지 |
+
+---
+
+## 4. 크로스 플랫폼
+
+### React Native
+
+| 요소 | 사양 |
+|------|------|
+| **라이브러리** | react-native-safe-area-context |
+| **Hook** | useSafeAreaInsets() |
+| **컴포넌트** | SafeAreaView, SafeAreaProvider |
+
+### Web/PWA
+
+| CSS 변수 | 설명 |
+|---------|------|
+| **safe-area-inset-top** | 상단 안전 영역 |
+| **safe-area-inset-right** | 우측 안전 영역 |
+| **safe-area-inset-bottom** | 하단 안전 영역 |
+| **safe-area-inset-left** | 좌측 안전 영역 |
+
+**Viewport 설정:** `viewport-fit=cover` 필수
+
+---
+
+## 5. 디자인 가이드라인
+
+### 콘텐츠 배치
+
+| 영역 | 배치 가능 | 주의사항 |
+|------|----------|---------|
+| **Safe Area 내부** | 모든 인터랙티브 요소 | - |
+| **Safe Area 외부** | 배경색, 장식 이미지 | 터치 불가 |
+| **노치 영역** | 상태 바 정보만 | 커스텀 UI 금지 |
+| **홈 인디케이터** | 비움 | 스와이프 영역 |
+
+### 터치 타겟
+
+| 항목 | 사양 |
+|------|------|
+| **Safe Area 내부** | 44x44pt (iOS), 48x48dp (Android) |
+| **하단 CTA** | Home Indicator 위 최소 8pt 여유 |
+| **노치 근처** | 터치 감도 낮음, 중요 버튼 배치 금지 |
+
+### 가로 모드
+
+| 항목 | 사양 |
+|------|------|
+| **좌우 Inset** | 44pt (노치 회피) |
+| **컨텐츠 중앙** | 좌우 Safe Area 내 배치 |
+| **풀스크린 미디어** | Safe Area 무시 가능 |
+
+---
+
+## 6. 플랫폼별 체크리스트
+
+### iOS
+- [ ] safeAreaInsets 또는 safeAreaLayoutGuide 사용
+- [ ] Home Indicator 영역 (34pt) 고려
+- [ ] Dynamic Island 지원 시 Live Activities 통합
+- [ ] 가로 모드 좌우 44pt 인셋 확인
+
+### Android
+- [ ] WindowInsetsCompat 사용 (하드코딩 금지)
+- [ ] Edge-to-Edge 강제 적용 대응 (SDK 35+)
+- [ ] Display Cutout 모드 설정
+- [ ] 제스처 네비게이션 영역 고려
+
+### Foldable
+- [ ] WindowLayoutInfo 구독
+- [ ] FoldingFeature.isSeparating 체크
+- [ ] Tabletop/Book 자세별 UI 최적화
+- [ ] 힌지 근처 중요 콘텐츠 배치 금지
+
+### Web/PWA
+- [ ] viewport-fit=cover 추가
+- [ ] env(safe-area-inset-*) 사용
+- [ ] Fallback 값 제공
+
+---
+
+## 참고
+
+- [Apple Developer: Safe Area](https://developer.apple.com/documentation/uikit/uiview/safeareainsets)
+- [Android: Display Cutout](https://developer.android.com/develop/ui/views/layout/display-cutout)
+- [Android: Edge-to-Edge](https://developer.android.com/develop/ui/views/layout/edge-to-edge)
+- [Samsung: Foldable Design](https://developer.samsung.com/one-ui/largescreen-and-foldable/)
+- [MDN: CSS env()](https://developer.mozilla.org/en-US/docs/Web/CSS/env)

package/templates/.claude/skills/design/references/systems.md

@@ -0,0 +1,116 @@
+# Design Systems
+
+<typography>
+
+## 타이포그래피
+
+### Type Scale
+
+| 용도 | 크기 | 클래스 | 사용처 |
+|------|------|--------|--------|
+| **Display** | 48-60px | `text-5xl sm:text-6xl` | 랜딩 페이지 히어로 |
+| **H1** | 36px | `text-3xl` | 페이지 제목 |
+| **H2** | 24px | `text-xl` | 섹션 제목 |
+| **H3** | 18px | `text-lg` | 카드 제목 |
+| **Body** | 16px | `text-base` | 본문 |
+| **Small** | 14px | `text-sm` | 캡션, 레이블 |
+
+### Font Stack
+
+```css
+font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
+```
+
+</typography>
+
+---
+
+<color_system>
+
+## 컬러 시스템
+
+### 60-30-10 규칙
+
+| 비율 | 색상 | 용도 |
+|------|------|------|
+| **60%** | Neutral | 배경, 텍스트 |
+| **30%** | Secondary | 보조 요소 |
+| **10%** | Primary | CTA, 강조 |
+
+### 시맨틱 컬러
+
+```tsx
+{/* Success */}
+<div className="bg-green-50 border-green-200 text-green-900" />
+
+{/* Error */}
+<div className="bg-red-50 border-red-200 text-red-900" />
+
+{/* Warning */}
+<div className="bg-yellow-50 border-yellow-200 text-yellow-900" />
+
+{/* Info */}
+<div className="bg-blue-50 border-blue-200 text-blue-900" />
+```
+
+</color_system>
+
+---
+
+<grid_system>
+
+## 그리드 시스템
+
+### 12열 그리드
+
+```tsx
+<div className="grid grid-cols-12 gap-6">
+  <div className="col-span-12 md:col-span-8">Main content</div>
+  <div className="col-span-12 md:col-span-4">Sidebar</div>
+</div>
+```
+
+### 간격 (8px 기본 단위)
+
+| 크기 | px | 클래스 | 용도 |
+|------|---|--------|------|
+| **xs** | 4px | `gap-1` | 아이콘-텍스트 |
+| **sm** | 8px | `gap-2` | 폼 레이블-입력 |
+| **md** | 16px | `gap-4` | 카드 내부 |
+| **lg** | 24px | `gap-6` | 섹션 간 |
+| **xl** | 32px | `gap-8` | 페이지 여백 |
+
+</grid_system>
+
+---
+
+<responsive_design>
+
+## 반응형 디자인
+
+### Breakpoints
+
+| 이름 | 최소 너비 | 디바이스 |
+|------|----------|---------|
+| **sm** | 640px | 모바일 가로 |
+| **md** | 768px | 태블릿 세로 |
+| **lg** | 1024px | 태블릿 가로 |
+| **xl** | 1280px | 데스크톱 |
+| **2xl** | 1536px | 대형 데스크톱 |
+
+### Mobile-First 패턴
+
+```tsx
+{/* 모바일: 1열, 태블릿: 2열, 데스크톱: 3열 */}
+<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+  {items.map(item => <Card key={item.id} {...item} />)}
+</div>
+
+{/* 모바일: 숨김, 데스크톱: 표시 */}
+<aside className="hidden lg:block w-64 border-r" />
+
+{/* 모바일: 표시, 데스크톱: 숨김 */}
+<nav className="lg:hidden fixed bottom-0 inset-x-0 h-16 border-t" />
+```
+
+</responsive_design>

package/templates/.claude/skills/design/references/trends.md

@@ -0,0 +1,75 @@
+# 2024-2026 Design Trends
+
+<ai_integration>
+
+## AI 통합 UI
+
+```tsx
+{/* AI 어시스턴트 입력 */}
+<div className="flex gap-3 p-4 border rounded-2xl">
+  <textarea
+    className="flex-1 resize-none focus:outline-none"
+    placeholder="Ask AI anything..."
+  />
+  <button className="w-10 h-10 rounded-full bg-gradient-to-r from-purple-500 to-pink-500 text-white">
+    <svg className="w-5 h-5" />
+  </button>
+</div>
+```
+
+</ai_integration>
+
+---
+
+<micro_interactions>
+
+## 마이크로인터랙션
+
+```tsx
+<button className="group relative overflow-hidden">
+  <span className="relative z-10">Hover me</span>
+  <div className="absolute inset-0 bg-gradient-to-r from-blue-500 to-purple-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+</button>
+```
+
+</micro_interactions>
+
+---
+
+<dark_mode>
+
+## 다크모드
+
+```tsx
+<div className="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
+  <button className="bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700">
+    Theme toggle
+  </button>
+</div>
+```
+
+</dark_mode>
+
+---
+
+<spatial_design>
+
+## 3D & 공간 디자인
+
+### Glassmorphism
+
+```tsx
+<div className="backdrop-blur-lg bg-white/10 border border-white/20 rounded-2xl p-6">
+  <h3 className="font-semibold">Glass card</h3>
+</div>
+```
+
+### Neumorphism
+
+```tsx
+<div className="bg-gray-100 rounded-2xl p-6 shadow-[8px_8px_16px_#bebebe,-8px_-8px_16px_#ffffff]">
+  <h3 className="font-semibold">Neomorphic card</h3>
+</div>
+```
+
+</spatial_design>