@kood/claude-code 0.4.1 → 0.5.0

package/templates/.claude/skills/figma-to-code/references/verification.md

@@ -1,46 +1,46 @@
-# Design-Code Verification Guide
+# 디자인-코드 검증 가이드
 
-Checklist for verifying accuracy between Figma design and code.
+Figma 디자인과 코드의 정확도를 검증하는 체크리스트.
 
 ---
 
-## Verification Checklist
+## 검증 체크리스트
 
-### Colors
+### 색상
 
-| Check Item | Method |
-|----------|--------|
-| Figma value | Color Picker → #3182F6 |
-| Browser value | DevTools → Computed → `background-color` |
-| Match verification | `getComputedStyle(el).backgroundColor` |
+| 확인 항목 | 방법 |
+|----------|------|
+| Figma 값 | Color Picker → #3182F6 |
+| 브라우저 값 | DevTools → Computed → `background-color` |
+| 일치 확인 | `getComputedStyle(el).backgroundColor` |
 
 ```
-□ Primary/Secondary colors
-□ Semantic colors (success/error/warning)
-□ Text/background/border colors
+□ Primary/Secondary 색상
+□ Semantic 색상 (success/error/warning)
+□ 텍스트/배경/보더 색상
 ```
 
-### Spacing
+### 간격
 
-| Check Item | Method |
-|----------|--------|
-| Figma value | Auto Layout → Gap 18px, Padding 24px |
-| Browser value | DevTools → Layout → Box Model |
-| Match verification | `getComputedStyle(el).gap` |
+| 확인 항목 | 방법 |
+|----------|------|
+| Figma 값 | Auto Layout → Gap 18px, Padding 24px |
+| 브라우저 값 | DevTools → Layout → Box Model |
+| 일치 확인 | `getComputedStyle(el).gap` |
 
 ```
-□ gap value
+□ gap 값
 □ padding (top/right/bottom/left)
-□ margin (if applicable)
+□ margin (있을 경우)
 ```
 
-### Typography
+### 타이포그래피
 
-| Check Item | Method |
-|----------|--------|
-| Figma value | Text Style → 28px/600/36px/-0.02em |
-| Browser value | DevTools → Computed |
-| Match verification | `getComputedStyle(el).fontSize` |
+| 확인 항목 | 방법 |
+|----------|------|
+| Figma 값 | Text Style → 28px/600/36px/-0.02em |
+| 브라우저 값 | DevTools → Computed |
+| 일치 확인 | `getComputedStyle(el).fontSize` |
 
 ```
 □ font-family
@@ -50,13 +50,13 @@ Checklist for verifying accuracy between Figma design and code.
 □ letter-spacing
 ```
 
-### Layout
+### 레이아웃
 
-| Check Item | Method |
-|----------|--------|
-| Figma value | Auto Layout → Horizontal/Center/Center |
-| Browser value | DevTools → Layout → Flexbox |
-| Match verification | `getComputedStyle(el).display` |
+| 확인 항목 | 방법 |
+|----------|------|
+| Figma 값 | Auto Layout → Horizontal/Center/Center |
+| 브라우저 값 | DevTools → Layout → Flexbox |
+| 일치 확인 | `getComputedStyle(el).display` |
 
 ```
 □ display: flex
@@ -66,13 +66,13 @@ Checklist for verifying accuracy between Figma design and code.
 □ gap
 ```
 
-### Dimensions
+### 크기
 
-| Check Item | Method |
-|----------|--------|
-| Figma value | Button → 120x44px |
-| Browser value | DevTools → Layout → width/height |
-| Match verification | `el.getBoundingClientRect()` |
+| 확인 항목 | 방법 |
+|----------|------|
+| Figma 값 | Button → 120x44px |
+| 브라우저 값 | DevTools → Layout → width/height |
+| 일치 확인 | `el.getBoundingClientRect()` |
 
 ```
 □ width
@@ -81,60 +81,60 @@ Checklist for verifying accuracy between Figma design and code.
 □ min-height/max-height
 ```
 
-### Assets (Required)
+### 에셋 (필수)
 
 ```
-□ Use files downloaded from Figma (no AI-generated)
-□ WebP compression completed
-□ public/images/[category]/ structure
-□ Clear filenames (hero-banner.webp)
-□ Appropriate compression quality (hero: 85-90, general: 75-85)
+□ Figma 다운로드 파일 사용 (AI 생성 X)
+□ WebP 압축 완료
+□ public/images/[category]/ 구조
+□ 파일명 명확 (hero-banner.webp)
+□ 적절한 압축 품질 (hero: 85-90, 일반: 75-85)
 ```
 
-### Responsive (Required)
+### 반응형 (필수)
 
 ```
-□ Mobile (320-767px) layout verified
-  □ Grid → List conversion
-  □ Font size reduction
-  □ Spacing reduction
-  □ Hamburger menu
+□ Mobile (320-767px) 레이아웃 확인
+  □ Grid → List 변환
+  □ 폰트 크기 축소
+  □ 간격 축소
+  □ Hamburger 메뉴
 
-□ Tablet (768-1023px) layout verified
-  □ 2-column grid
-  □ Medium font size
-  □ Medium spacing
+□ Tablet (768-1023px) 레이아웃 확인
+  □ 2단 그리드
+  □ 중간 폰트 크기
+  □ 중간 간격
 
-□ Desktop (1024px+) layout verified
-  □ 4-column grid
-  □ Large font size
-  □ Wide spacing
-  □ Full menu
+□ Desktop (1024px+) 레이아웃 확인
+  □ 4단 그리드
+  □ 큰 폰트 크기
+  □ 넓은 간격
+  □ 전체 메뉴
 
-□ Responsive images (<picture> or srcSet)
-□ Media query breakpoints exact
+□ 반응형 이미지 (<picture> 또는 srcSet)
+□ 미디어 쿼리 정확한 브레이크포인트
 ```
 
 ---
 
-## Verification Tools
+## 검증 도구
 
-### DevTools Shortcuts
+### DevTools 단축키
 
-| Function | Shortcut |
-|----------|----------|
-| Open DevTools | F12 or Cmd+Opt+I |
+| 기능 | 단축키 |
+|------|--------|
+| DevTools 열기 | F12 또는 Cmd+Opt+I |
 | Device Toolbar | Cmd+Shift+M |
 | Inspect Element | Cmd+Shift+C |
 
-### Console Snippets
+### Console 스니펫
 
 ```js
-// Verify color
+// 색상 확인
 const el = document.querySelector('.button')
 console.log(getComputedStyle(el).backgroundColor)
 
-// Verify spacing
+// 간격 확인
 const padding = {
   top: getComputedStyle(el).paddingTop,
   right: getComputedStyle(el).paddingRight,
@@ -143,7 +143,7 @@ const padding = {
 }
 console.table(padding)
 
-// Verify typography
+// 타이포그래피 확인
 const typography = {
   fontFamily: getComputedStyle(el).fontFamily,
   fontSize: getComputedStyle(el).fontSize,
@@ -153,39 +153,39 @@ const typography = {
 }
 console.table(typography)
 
-// Verify dimensions
+// 크기 확인
 const rect = el.getBoundingClientRect()
 console.log(`Width: ${rect.width}px, Height: ${rect.height}px`)
 ```
 
 ---
 
-## Visual Comparison
+## 시각적 비교
 
-### Overlay Tools
+### 오버레이 도구
 
-| Tool | Purpose |
-|------|---------|
-| [PerfectPixel](https://chrome.google.com/webstore/detail/perfectpixel) | Chrome extension |
+| 도구 | 용도 |
+|------|------|
+| [PerfectPixel](https://chrome.google.com/webstore/detail/perfectpixel) | Chrome 확장 프로그램 |
 | Figma Inspect | Figma Dev Mode → Compare to design |
 
-### Usage
+### 사용 방법
 
 ```
-1. Export Figma as PNG (2x)
-2. Take browser screenshot
-3. Use overlay tool to compare
-4. Fix discrepancies
+1. Figma Export as PNG (2x)
+2. 브라우저 스크린샷
+3. 오버레이 도구로 비교
+4. 차이점 수정
 ```
 
 ---
 
-## Automation
+## 자동화
 
 ### Visual Regression Testing
 
 ```bash
-# Install Percy
+# Percy 설치
 npm install --save-dev @percy/cli @percy/playwright
 ```
 
@@ -201,18 +201,18 @@ test('Button matches Figma', async ({ page }) => {
 
 ---
 
-## Troubleshooting
+## 문제 해결
 
-| Problem | Cause | Solution |
-|---------|-------|----------|
-| Color mismatch | Variables hardcoded instead | Extract Variables |
-| Spacing mismatch | Using Tailwind defaults (`gap-4`) | Use exact value (`gap-[18px]`) |
-| Font mismatch | Letter-spacing conversion error | Verify PERCENT → em conversion |
-| Layout broken | Ignoring Auto Layout | Convert Frame hierarchy directly |
+| 문제 | 원인 | 해결 |
+|------|------|------|
+| 색상 불일치 | Variables 대신 하드코딩 | Variables 추출 |
+| 간격 불일치 | Tailwind 기본값 (`gap-4`) | 정확한 값 (`gap-[18px]`) |
+| 폰트 불일치 | letter-spacing 변환 오류 | PERCENT → em 변환 확인 |
+| 레이아웃 깨짐 | Auto Layout 무시 | Frame 계층 그대로 변환 |
 
 ---
 
-## References
+## 참조
 
 - [Chrome DevTools](https://developer.chrome.com/docs/devtools/)
 - [Percy Visual Testing](https://percy.io/)

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

@@ -0,0 +1,317 @@
+# Global UI/UX Design - Agent Coordination
+
+글로벌 UI/UX 디자인 구현 시 에이전트 활용 가이드.
+
+---
+
+<agents_reference>
+
+전체 에이전트 조정 가이드: @../../PARALLEL_AGENTS.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>