@kood/claude-code 0.7.6 → 0.7.8

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>

package/templates/.claude/skills/global-uiux-design/AGENTS.md

@@ -1,320 +0,0 @@
-# Global UI/UX Design - Agent Coordination
-
-글로벌 UI/UX 디자인 구현 시 에이전트 활용 가이드.
-
----
-
-<agents_reference>
-
-다중 에이전트 구조:
-- 에이전트 목록: @../../instructions/multi-agent/agent-roster.md
-- 조정 가이드: @../../instructions/multi-agent/coordination-guide.md
-- 실행 패턴: @../../instructions/multi-agent/execution-patterns.md
-
-</agents_reference>
-
----
-
-<recommended_agents>
-
-## 추천 에이전트
-
-| 에이전트 | 모델 | 용도 |
-|---------|------|------|
-| **designer** | sonnet/opus | UI/UX 디자인 + 구현 (Material 3, Apple HIG, Fluent 2) |
-| **explore** | haiku | 디자인 시스템 패턴 분석, 프로젝트 구조 파악 |
-| **implementation-executor** | sonnet | API 연동, 상태 관리, 비즈니스 로직 |
-| **code-reviewer** | opus | 접근성(WCAG 2.2), 성능, 크로스 플랫폼 검토 |
-
-</recommended_agents>
-
----
-
-<coordination_patterns>
-
-## 조정 패턴
-
-### 패턴 1: 디자인 시스템 분석 → 방향 정의 → 병렬 구현
-
-**용도:** 글로벌 표준 기반 디자인 시스템 구축
-
-```typescript
-// Phase 1: 병렬 탐색
-Task(
-  subagent_type="explore",
-  model="haiku",
-  prompt="Material 3, Apple HIG, Fluent 2 최신 패턴 분석"
-)
-
-Task(
-  subagent_type="explore",
-  model="haiku",
-  prompt="프로젝트 기존 컴포넌트 및 다국어 지원 현황"
-)
-
-// Phase 2: 디자인 방향 정의
-Task(
-  subagent_type="designer",
-  model="opus",
-  prompt=`글로벌 서비스 디자인 방향 정의:
-  - 미학적 톤 선택 (Material 3 기반)
-  - 2026 트렌드 통합 (AI 기반, 적응형 테마)
-  - 크로스 플랫폼 일관성`
-)
-
-// Phase 3: 병렬 구현
-Task(
-  subagent_type="designer",
-  model="sonnet",
-  prompt="컬러 시스템 (다크 모드 포함, Material 3 Dynamic Color)"
-)
-
-Task(
-  subagent_type="designer",
-  model="sonnet",
-  prompt="타이포그래피 (다국어 지원, 시스템 폰트)"
-)
-
-Task(
-  subagent_type="designer",
-  model="sonnet",
-  prompt="컴포넌트 라이브러리 (웹 컴포넌트 기반)"
-)
-```
-
----
-
-### 패턴 2: 크로스 플랫폼 병렬 구현
-
-**용도:** 웹/iOS/Android 동시 개발
-
-```typescript
-// 각 플랫폼 병렬 구현
-Task(
-  subagent_type="designer",
-  model="sonnet",
-  prompt="웹 인터페이스 (Material 3 기반, 반응형)"
-)
-
-Task(
-  subagent_type="designer",
-  model="sonnet",
-  prompt="iOS 인터페이스 (Apple HIG 준수, Swift UI)"
-)
-
-Task(
-  subagent_type="designer",
-  model="sonnet",
-  prompt="Android 인터페이스 (Material 3 네이티브)"
-)
-
-Task(
-  subagent_type="implementation-executor",
-  model="sonnet",
-  prompt="공통 비즈니스 로직 및 상태 관리"
-)
-```
-
----
-
-### 패턴 3: 공간 UI 프로젝트 (AR/VR)
-
-**용도:** WebGPU/WebXR 기반 공간 UI
-
-```typescript
-// Phase 1: 탐색
-Task(
-  subagent_type="explore",
-  model="haiku",
-  prompt="WebGPU/WebXR 지원 현황 및 공간 UI 패턴"
-)
-
-// Phase 2: 디자인 + 구현 병렬
-Task(
-  subagent_type="designer",
-  model="opus",
-  prompt="3D 공간 UI 디자인 (Vision Pro 스타일)"
-)
-
-Task(
-  subagent_type="designer",
-  model="sonnet",
-  prompt="2D 폴백 인터페이스 (점진적 향상)"
-)
-
-Task(
-  subagent_type="implementation-executor",
-  model="sonnet",
-  prompt="WebXR 통합 및 센서 처리"
-)
-
-// Phase 3: 검증
-Task(
-  subagent_type="code-reviewer",
-  model="opus",
-  prompt="공간 UI 접근성 및 성능 검토"
-)
-```
-
----
-
-### 패턴 4: 구현 → 다중 검증
-
-**용도:** WCAG 2.2, 성능, 접근성 검증
-
-```typescript
-// 병렬 검증
-Task(
-  subagent_type="code-reviewer",
-  model="opus",
-  prompt="WCAG 2.2 AA 접근성 검토 (대비, 키보드, ARIA)"
-)
-
-Task(
-  subagent_type="code-reviewer",
-  model="opus",
-  prompt="성능 검토 (60fps, 번들 크기, 로딩)"
-)
-
-Task(
-  subagent_type="code-reviewer",
-  model="opus",
-  prompt="크로스 플랫폼 일관성 검토 (iOS/Android/Web)"
-)
-```
-
-</coordination_patterns>
-
----
-
-<model_routing>
-
-## 모델 라우팅
-
-| 작업 | 모델 | 이유 |
-|------|------|------|
-| **디자인 시스템 분석** | haiku | 빠른 패턴 조사 |
-| **디자인 방향 정의** | opus | 전략적 결정, 트렌드 통합 |
-| **컴포넌트 구현** | sonnet | UI 코드 작성 |
-| **공간 UI 디자인** | opus | 복잡한 3D 인터랙션 |
-| **접근성/성능 검증** | opus | 세밀한 검토 |
-
-</model_routing>
-
----
-
-<practical_examples>
-
-## 실전 예시
-
-### 예시 1: 글로벌 SaaS 디자인 시스템
-
-```typescript
-// Phase 1: 병렬 탐색
-Task(subagent_type="explore", model="haiku",
-     prompt="Material 3, Fluent 2 디자인 토큰 분석")
-Task(subagent_type="explore", model="haiku",
-     prompt="프로젝트 기존 컴포넌트 현황")
-
-// Phase 2: 디자인 정의
-Task(subagent_type="designer", model="opus",
-     prompt="크로스 플랫폼 디자인 토큰 시스템 설계")
-
-// Phase 3: 병렬 구현
-Task(subagent_type="designer", model="sonnet",
-     prompt="컬러 시스템 (다크 모드 포함)")
-Task(subagent_type="designer", model="sonnet",
-     prompt="타이포그래피 (다국어)")
-Task(subagent_type="designer", model="sonnet",
-     prompt="컴포넌트 라이브러리")
-
-// Phase 4: 검증
-Task(subagent_type="code-reviewer", model="opus",
-     prompt="WCAG 2.2, 크로스 플랫폼 검증")
-```
-
----
-
-### 예시 2: 크로스 플랫폼 애플리케이션
-
-```typescript
-// 병렬 실행 (플랫폼별)
-Task(subagent_type="designer", model="sonnet",
-     prompt="웹 인터페이스 (Material 3 기반)")
-Task(subagent_type="designer", model="sonnet",
-     prompt="iOS 인터페이스 (Apple HIG 준수)")
-Task(subagent_type="designer", model="sonnet",
-     prompt="Android 인터페이스 (Material 3 네이티브)")
-Task(subagent_type="implementation-executor", model="sonnet",
-     prompt="공통 비즈니스 로직 및 상태 관리")
-```
-
----
-
-### 예시 3: 2026 트렌드 적용 (AI 기반 UI)
-
-```typescript
-// Phase 1: 탐색
-Task(subagent_type="explore", model="haiku",
-     prompt="AI 기반 UI 패턴 조사 (개인화, 예측형 인터페이스)")
-
-// Phase 2: 디자인 + 구현 병렬
-Task(subagent_type="designer", model="opus",
-     prompt="AI 기반 개인화 UI 디자인 (적응형 테마)")
-Task(subagent_type="implementation-executor", model="sonnet",
-     prompt="AI 모델 통합 및 개인화 로직")
-
-// Phase 3: 검증
-Task(subagent_type="code-reviewer", model="opus",
-     prompt="AI 기반 UI 접근성 및 성능 검토")
-```
-
-</practical_examples>
-
----
-
-<best_practices>
-
-## 모범 사례
-
-### 작업 시작 전 체크
-
-- [ ] 글로벌 서비스인가? → Material 3/Apple HIG 참조
-- [ ] 크로스 플랫폼? → 플랫폼별 병렬 구현
-- [ ] 2026 트렌드 적용? → designer (opus) 사용
-- [ ] 접근성 중요? → code-reviewer 검증 필수
-
-### 디자인 시스템 참조
-
-| 프로젝트 유형 | 참조 시스템 |
-|--------------|------------|
-| B2B/Enterprise | Carbon, Ant Design, Lightning |
-| Consumer Apps | Material 3, Apple HIG |
-| Creative Tools | Spectrum 2 |
-| E-commerce | Polaris |
-
-### 에이전트 활용 원칙
-
-**DO:**
-- 디자인 시스템 탐색 → explore (병렬)
-- 플랫폼별 구현 → designer (병렬)
-- 트렌드 통합 → designer (opus)
-- WCAG/성능 → code-reviewer (병렬)
-
-**DON'T:**
-- 단일 에이전트로 모든 플랫폼 순차 구현
-- 접근성 검증 생략
-- 글로벌 표준 무시
-
-### 2026 트렌드 활용
-
-@designer 에이전트가 제공:
-- AI 기반 개인화
-- 공간 UI (AR/VR)
-- 키네틱 타이포그래피
-- 적응형 테마
-- 마이크로 인터랙션
-
-**참조:** `.claude/agents/designer.md`
-
-</best_practices>