@kood/claude-code 0.5.0 → 0.5.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +179 -33
- package/package.json +1 -1
- package/templates/.claude/agents/analyst.md +6 -14
- package/templates/.claude/agents/architect.md +6 -14
- package/templates/.claude/agents/code-reviewer.md +8 -14
- package/templates/.claude/agents/dependency-manager.md +8 -14
- package/templates/.claude/agents/deployment-validator.md +8 -14
- package/templates/.claude/agents/designer.md +8 -0
- package/templates/.claude/agents/document-writer.md +6 -14
- package/templates/.claude/agents/explore.md +8 -3
- package/templates/.claude/agents/git-operator.md +63 -17
- package/templates/.claude/agents/implementation-executor.md +14 -37
- package/templates/.claude/agents/ko-to-en-translator.md +8 -13
- package/templates/.claude/agents/lint-fixer.md +8 -172
- package/templates/.claude/agents/planner.md +6 -14
- package/templates/.claude/agents/refactor-advisor.md +8 -14
- package/templates/.claude/commands/git-all.md +3 -167
- package/templates/.claude/commands/git-session.md +3 -71
- package/templates/.claude/commands/lint-fix.md +119 -82
- package/templates/.claude/commands/lint-init.md +2 -54
- package/templates/.claude/commands/pre-deploy.md +143 -82
- package/templates/.claude/commands/version-update.md +171 -66
- package/templates/.claude/instructions/agent-patterns/agent-coordination.md +208 -0
- package/templates/.claude/instructions/agent-patterns/index.md +264 -0
- package/templates/.claude/instructions/agent-patterns/model-routing.md +167 -0
- package/templates/.claude/instructions/agent-patterns/parallel-execution.md +91 -0
- package/templates/.claude/instructions/agent-patterns/read-parallelization.md +106 -0
- package/templates/.claude/instructions/index.md +350 -0
- package/templates/.claude/instructions/multi-agent/agent-roster.md +811 -0
- package/templates/.claude/{PARALLEL_AGENTS.md → instructions/multi-agent/coordination-guide.md} +27 -336
- package/templates/.claude/instructions/{parallel-agent-execution.md → multi-agent/execution-patterns.md} +127 -438
- package/templates/.claude/instructions/multi-agent/index.md +282 -0
- package/templates/.claude/instructions/multi-agent/performance-optimization.md +456 -0
- package/templates/.claude/instructions/tech-stack/design-standards.md +282 -0
- package/templates/.claude/instructions/tech-stack/index.md +70 -0
- package/templates/.claude/instructions/tech-stack/prisma-patterns.md +352 -0
- package/templates/.claude/instructions/tech-stack/tanstack-patterns.md +275 -0
- package/templates/.claude/instructions/validation/forbidden-patterns.md +281 -0
- package/templates/.claude/instructions/validation/index.md +32 -0
- package/templates/.claude/instructions/validation/required-behaviors.md +331 -0
- package/templates/.claude/instructions/validation/verification-checklist.md +318 -0
- package/templates/.claude/instructions/workflow-patterns/index.md +18 -0
- package/templates/.claude/instructions/workflow-patterns/phase-based-workflow.md +250 -0
- package/templates/.claude/instructions/workflow-patterns/sequential-thinking.md +217 -0
- package/templates/.claude/instructions/workflow-patterns/todowrite-pattern.md +215 -0
- package/templates/.claude/skills/bug-fix/SKILL.md +972 -0
- package/templates/.claude/skills/docs-creator/AGENTS.md +4 -1
- package/templates/.claude/skills/docs-creator/SKILL.md +258 -0
- package/templates/.claude/skills/docs-refactor/AGENTS.md +4 -1
- package/templates/.claude/skills/docs-refactor/SKILL.md +145 -0
- package/templates/.claude/skills/execute/SKILL.md +15 -242
- package/templates/.claude/skills/figma-to-code/AGENTS.md +4 -1
- package/templates/.claude/skills/figma-to-code/SKILL.md +306 -0
- package/templates/.claude/skills/global-uiux-design/AGENTS.md +4 -1
- package/templates/.claude/skills/global-uiux-design/SKILL.md +455 -125
- package/templates/.claude/skills/korea-uiux-design/AGENTS.md +4 -1
- package/templates/.claude/skills/korea-uiux-design/SKILL.md +461 -116
- package/templates/.claude/skills/nextjs-react-best-practices/SKILL.md +177 -0
- package/templates/.claude/skills/plan/SKILL.md +1102 -98
- package/templates/.claude/skills/prd/SKILL.md +367 -66
- package/templates/.claude/skills/ralph/AGENTS.md +4 -1
- package/templates/.claude/skills/ralph/SKILL.md +83 -0
- package/templates/.claude/skills/refactor/SKILL.md +1214 -0
- package/templates/.claude/skills/tanstack-start-react-best-practices/SKILL.md +149 -0
- package/templates/.claude/commands/bug-fix.md +0 -510
- package/templates/.claude/commands/refactor.md +0 -788
|
@@ -1,3 +1,13 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: global-uiux-design
|
|
3
|
+
description: Implement modern, accessible UI/UX design for global audiences. Apply industry-standard patterns from Material Design, Apple HIG, Fluent, and other leading design systems.
|
|
4
|
+
user-invocable: true
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
@../../instructions/agent-patterns/read-parallelization.md
|
|
8
|
+
@../../instructions/validation/forbidden-patterns.md
|
|
9
|
+
@../../instructions/validation/required-behaviors.md
|
|
10
|
+
|
|
1
11
|
# Global UI/UX Design
|
|
2
12
|
|
|
3
13
|
<context>
|
|
@@ -16,183 +26,503 @@
|
|
|
16
26
|
|
|
17
27
|
---
|
|
18
28
|
|
|
19
|
-
<
|
|
29
|
+
<parallel_agent_execution>
|
|
20
30
|
|
|
21
|
-
## 병렬
|
|
31
|
+
## 병렬 에이전트 실행 (Global UX 특화)
|
|
22
32
|
|
|
23
|
-
###
|
|
33
|
+
### 핵심 원칙
|
|
24
34
|
|
|
25
|
-
|
|
26
|
-
|------|----------|
|
|
27
|
-
| **PARALLEL** | 독립 작업은 단일 메시지에서 동시 Tool 호출 |
|
|
28
|
-
| **DELEGATE** | 전문 에이전트에게 즉시 위임 |
|
|
29
|
-
| **SMART MODEL** | 복잡도별 모델 선택 (haiku/sonnet/opus) |
|
|
35
|
+
**Goal:** 독립적인 Global UX 작업을 동시에 처리하여 대기 시간 최소화, 다국어/반응형/접근성 병렬 구현.
|
|
30
36
|
|
|
31
|
-
|
|
37
|
+
**Performance:** 순차 실행 → 병렬 실행으로 5-15배 성능 향상.
|
|
32
38
|
|
|
33
|
-
|
|
39
|
+
| 원칙 | 실행 방법 | Global UX 적용 |
|
|
40
|
+
|------|----------|----------------|
|
|
41
|
+
| **PARALLEL** | 단일 메시지에서 여러 Tool 동시 호출 | 다국어 레이아웃 동시 구현 |
|
|
42
|
+
| **DELEGATE** | 전문 에이전트에게 즉시 위임 | designer (UI), code-reviewer (접근성) |
|
|
43
|
+
| **SMART MODEL** | 복잡도별 모델 선택 | haiku (탐색), sonnet (구현), opus (디자인) |
|
|
34
44
|
|
|
45
|
+
**핵심 룰:**
|
|
35
46
|
```typescript
|
|
36
|
-
//
|
|
37
|
-
Task(
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
)
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
model="opus",
|
|
49
|
-
prompt=`[프로젝트명] UI/UX 디자인 방향 정의:
|
|
50
|
-
- 미학적 톤: 리퀴드 글래스 (Apple HIG)
|
|
51
|
-
- 2026 트렌드: 공간 UI, AI 기반, 적응형 테마
|
|
52
|
-
- 글로벌 표준 참조 (global-uiux-design 스킬)`
|
|
53
|
-
)
|
|
54
|
-
```
|
|
55
|
-
|
|
56
|
-
#### Phase 2: 병렬 구현
|
|
47
|
+
// ❌ 순차 실행 (느림)
|
|
48
|
+
Task(...) // 모바일 레이아웃 60초
|
|
49
|
+
Task(...) // 데스크톱 레이아웃 60초
|
|
50
|
+
Task(...) // 태블릿 레이아웃 60초
|
|
51
|
+
// 총 180초
|
|
52
|
+
|
|
53
|
+
// ✅ 병렬 실행 (빠름)
|
|
54
|
+
Task(...) // 모바일
|
|
55
|
+
Task(...) // 데스크톱 → 단일 메시지에서 동시 호출
|
|
56
|
+
Task(...) // 태블릿
|
|
57
|
+
// 총 60초 (가장 긴 작업 기준)
|
|
58
|
+
```
|
|
57
59
|
|
|
60
|
+
---
|
|
61
|
+
|
|
62
|
+
### Model Routing (Global UX 특화)
|
|
63
|
+
|
|
64
|
+
| 작업 유형 | 모델 | 에이전트 | 예시 |
|
|
65
|
+
|----------|------|---------|------|
|
|
66
|
+
| **디자인 시스템 탐색** | haiku | explore | Material 3/Apple HIG 패턴 분석 |
|
|
67
|
+
| **UI 구현** | sonnet | designer | 컴포넌트, 레이아웃, 반응형 |
|
|
68
|
+
| **복잡한 디자인** | opus | designer | 공간 UI, 크로스 플랫폼 일관성 |
|
|
69
|
+
| **접근성 검증** | opus | code-reviewer | WCAG 2.2, ARIA, 키보드 네비게이션 |
|
|
70
|
+
| **성능 검토** | opus | code-reviewer | 60fps 애니메이션, 번들 최적화 |
|
|
71
|
+
| **문서 작성** | haiku | document-writer | 디자인 가이드, 컴포넌트 문서 |
|
|
72
|
+
|
|
73
|
+
**모델 선택 기준:**
|
|
58
74
|
```typescript
|
|
59
|
-
//
|
|
60
|
-
Task(
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
Task(
|
|
79
|
-
subagent_type="implementation-executor",
|
|
80
|
-
model="sonnet",
|
|
81
|
-
prompt="API 통합 및 데이터 레이어"
|
|
82
|
-
)
|
|
83
|
-
```
|
|
84
|
-
|
|
85
|
-
#### Phase 3: 검증
|
|
75
|
+
// 간단한 탐색 → haiku
|
|
76
|
+
Task(subagent_type="explore", model="haiku",
|
|
77
|
+
prompt="프로젝트 기존 다국어 지원 구조 분석")
|
|
78
|
+
|
|
79
|
+
// 일반 구현 → sonnet
|
|
80
|
+
Task(subagent_type="designer", model="sonnet",
|
|
81
|
+
prompt="모바일 레이아웃 구현 (Material 3)")
|
|
82
|
+
|
|
83
|
+
// 복잡한 디자인 → opus
|
|
84
|
+
Task(subagent_type="designer", model="opus",
|
|
85
|
+
prompt="4개 언어 동시 지원하는 통합 디자인 시스템 설계")
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
---
|
|
89
|
+
|
|
90
|
+
### 패턴 1: 다국어 디자인 병렬 처리
|
|
91
|
+
|
|
92
|
+
**목표:** EN/ES/ZH/AR 레이아웃을 동시에 구현하여 시간 단축, RTL/LTR 일관성 확보.
|
|
86
93
|
|
|
87
94
|
```typescript
|
|
88
|
-
//
|
|
89
|
-
Task(
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
95
|
+
// ✅ 4개 언어 레이아웃 동시 구현
|
|
96
|
+
Task(subagent_type="designer", model="sonnet",
|
|
97
|
+
prompt=`영어(EN) 레이아웃 구현
|
|
98
|
+
- LTR 기본
|
|
99
|
+
- 짧은 단어 (compact)
|
|
100
|
+
- Material 3 스타일
|
|
101
|
+
- components/en/Header.tsx`)
|
|
94
102
|
|
|
95
|
-
Task(
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
)
|
|
103
|
+
Task(subagent_type="designer", model="sonnet",
|
|
104
|
+
prompt=`스페인어(ES) 레이아웃 구현
|
|
105
|
+
- LTR, 영어보다 20% 긴 텍스트
|
|
106
|
+
- 동적 너비 조정
|
|
107
|
+
- components/es/Header.tsx`)
|
|
108
|
+
|
|
109
|
+
Task(subagent_type="designer", model="sonnet",
|
|
110
|
+
prompt=`중국어(ZH) 레이아웃 구현
|
|
111
|
+
- 세로쓰기 옵션
|
|
112
|
+
- CJK 폰트 (Noto Sans CJK)
|
|
113
|
+
- 컴팩트 레이아웃
|
|
114
|
+
- components/zh/Header.tsx`)
|
|
115
|
+
|
|
116
|
+
Task(subagent_type="designer", model="sonnet",
|
|
117
|
+
prompt=`아랍어(AR) 레이아웃 구현
|
|
118
|
+
- RTL (direction: rtl)
|
|
119
|
+
- 미러링 (아이콘, 레이아웃)
|
|
120
|
+
- 아랍어 폰트 (Noto Sans Arabic)
|
|
121
|
+
- components/ar/Header.tsx`)
|
|
122
|
+
|
|
123
|
+
// 병렬 폰트 시스템
|
|
124
|
+
Task(subagent_type="implementation-executor", model="sonnet",
|
|
125
|
+
prompt=`다국어 폰트 로딩 시스템 구현
|
|
126
|
+
- Next.js Font Optimization
|
|
127
|
+
- 언어별 폰트 스택
|
|
128
|
+
- 폴백 처리`)
|
|
100
129
|
```
|
|
101
130
|
|
|
102
|
-
|
|
131
|
+
**예상 시간:**
|
|
132
|
+
- 순차 실행: 240초 (60초 × 4)
|
|
133
|
+
- 병렬 실행: 60초 (가장 긴 작업)
|
|
134
|
+
- 개선: 4배 향상
|
|
135
|
+
|
|
136
|
+
**RTL 처리 체크리스트:**
|
|
137
|
+
- [ ] `direction: rtl` CSS 적용
|
|
138
|
+
- [ ] 아이콘 미러링 (화살표, 햄버거 메뉴)
|
|
139
|
+
- [ ] Flexbox/Grid 자동 반전 (justify-content)
|
|
140
|
+
- [ ] margin/padding 논리 속성 (margin-inline-start)
|
|
141
|
+
|
|
142
|
+
---
|
|
143
|
+
|
|
144
|
+
### 패턴 2: 반응형 Breakpoint 병렬 구현
|
|
103
145
|
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
146
|
+
**목표:** Mobile/Tablet/Desktop/4K 레이아웃을 동시에 구현.
|
|
147
|
+
|
|
148
|
+
```typescript
|
|
149
|
+
// ✅ 4개 Breakpoint 동시 구현
|
|
150
|
+
Task(subagent_type="designer", model="sonnet",
|
|
151
|
+
prompt=`Mobile 레이아웃 (< 640px)
|
|
152
|
+
- 단일 컬럼
|
|
153
|
+
- 하단 탭 바
|
|
154
|
+
- Safe Area 고려
|
|
155
|
+
- 44px 터치 타겟
|
|
156
|
+
- components/mobile/Dashboard.tsx`)
|
|
157
|
+
|
|
158
|
+
Task(subagent_type="designer", model="sonnet",
|
|
159
|
+
prompt=`Tablet 레이아웃 (640-1024px)
|
|
160
|
+
- 2컬럼 그리드
|
|
161
|
+
- 사이드바 토글
|
|
162
|
+
- 제스처 지원 (스와이프)
|
|
163
|
+
- components/tablet/Dashboard.tsx`)
|
|
164
|
+
|
|
165
|
+
Task(subagent_type="designer", model="sonnet",
|
|
166
|
+
prompt=`Desktop 레이아웃 (1024-1920px)
|
|
167
|
+
- 3컬럼 그리드
|
|
168
|
+
- 고정 사이드바
|
|
169
|
+
- 호버 인터랙션
|
|
170
|
+
- components/desktop/Dashboard.tsx`)
|
|
171
|
+
|
|
172
|
+
Task(subagent_type="designer", model="sonnet",
|
|
173
|
+
prompt=`4K/Ultra-Wide 레이아웃 (> 1920px)
|
|
174
|
+
- 4컬럼 그리드
|
|
175
|
+
- max-w-screen-2xl 컨테이너
|
|
176
|
+
- 여백 최적화
|
|
177
|
+
- 고해상도 이미지
|
|
178
|
+
- components/4k/Dashboard.tsx`)
|
|
179
|
+
```
|
|
180
|
+
|
|
181
|
+
**통합 전략:**
|
|
182
|
+
```typescript
|
|
183
|
+
// 단일 컴포넌트로 통합
|
|
184
|
+
Task(subagent_type="implementation-executor", model="sonnet",
|
|
185
|
+
prompt=`반응형 Dashboard 컴포넌트 통합
|
|
186
|
+
- Breakpoint별 동적 import
|
|
187
|
+
- Tailwind responsive classes
|
|
188
|
+
- 성능 최적화 (code splitting)`)
|
|
189
|
+
```
|
|
190
|
+
|
|
191
|
+
---
|
|
192
|
+
|
|
193
|
+
### 패턴 3: A/B 테스트 변형 병렬 생성
|
|
194
|
+
|
|
195
|
+
**목표:** 디자인 변형을 동시에 구현하여 실험 속도 향상.
|
|
196
|
+
|
|
197
|
+
```typescript
|
|
198
|
+
// ✅ A/B 테스트 3개 변형 동시 구현
|
|
199
|
+
Task(subagent_type="designer", model="sonnet",
|
|
200
|
+
prompt=`Variant A: 미니멀 디자인
|
|
201
|
+
- 단색 배경
|
|
202
|
+
- 작은 버튼 (h-10)
|
|
203
|
+
- 텍스트 중심
|
|
204
|
+
- components/ab-test/VariantA.tsx`)
|
|
205
|
+
|
|
206
|
+
Task(subagent_type="designer", model="sonnet",
|
|
207
|
+
prompt=`Variant B: 대담한 디자인
|
|
208
|
+
- 그라디언트 배경
|
|
209
|
+
- 큰 버튼 (h-14)
|
|
210
|
+
- 애니메이션 강조
|
|
211
|
+
- components/ab-test/VariantB.tsx`)
|
|
212
|
+
|
|
213
|
+
Task(subagent_type="designer", model="sonnet",
|
|
214
|
+
prompt=`Variant C: 하이브리드
|
|
215
|
+
- A와 B의 중간
|
|
216
|
+
- 조건부 애니메이션
|
|
217
|
+
- 어댑티브 크기
|
|
218
|
+
- components/ab-test/VariantC.tsx`)
|
|
219
|
+
|
|
220
|
+
// 병렬 성능 테스트
|
|
221
|
+
Task(subagent_type="code-reviewer", model="opus",
|
|
222
|
+
prompt=`3개 변형 성능 비교
|
|
223
|
+
- 번들 크기
|
|
224
|
+
- First Contentful Paint
|
|
225
|
+
- Interaction to Next Paint
|
|
226
|
+
- 최적 변형 추천`)
|
|
227
|
+
```
|
|
228
|
+
|
|
229
|
+
**A/B 테스트 인프라:**
|
|
230
|
+
```typescript
|
|
231
|
+
Task(subagent_type="implementation-executor", model="sonnet",
|
|
232
|
+
prompt=`A/B 테스트 라우팅 시스템
|
|
233
|
+
- 사용자 그룹 분배 (33/33/33)
|
|
234
|
+
- 쿠키 기반 고정
|
|
235
|
+
- 분석 이벤트 전송`)
|
|
236
|
+
```
|
|
237
|
+
|
|
238
|
+
---
|
|
239
|
+
|
|
240
|
+
### 패턴 4: 접근성 검증 병렬
|
|
241
|
+
|
|
242
|
+
**목표:** WCAG/ARIA/키보드 네비게이션을 동시에 검증하여 접근성 품질 보장.
|
|
243
|
+
|
|
244
|
+
```typescript
|
|
245
|
+
// ✅ 3가지 접근성 검증 동시 실행
|
|
246
|
+
Task(subagent_type="code-reviewer", model="opus",
|
|
247
|
+
prompt=`WCAG 2.2 AA 준수 검증
|
|
248
|
+
- 색상 대비 (4.5:1 일반, 3:1 큰 텍스트)
|
|
249
|
+
- 포커스 표시 (2px 아웃라인)
|
|
250
|
+
- 텍스트 크기 조정 (200%)
|
|
251
|
+
- 모든 interactive 요소 검토`)
|
|
252
|
+
|
|
253
|
+
Task(subagent_type="code-reviewer", model="opus",
|
|
254
|
+
prompt=`ARIA 속성 검증
|
|
255
|
+
- role, aria-label, aria-labelledby
|
|
256
|
+
- aria-expanded, aria-controls (동적 UI)
|
|
257
|
+
- aria-live (실시간 업데이트)
|
|
258
|
+
- landmark 역할 (navigation, main, aside)`)
|
|
259
|
+
|
|
260
|
+
Task(subagent_type="code-reviewer", model="opus",
|
|
261
|
+
prompt=`키보드 네비게이션 검증
|
|
262
|
+
- Tab 순서 (tabindex)
|
|
263
|
+
- Enter/Space (버튼 활성화)
|
|
264
|
+
- Esc (모달 닫기)
|
|
265
|
+
- 화살표 키 (드롭다운, 슬라이더)
|
|
266
|
+
- 포커스 트랩 (모달 내부)`)
|
|
267
|
+
|
|
268
|
+
// 스크린 리더 테스트
|
|
269
|
+
Task(subagent_type="code-reviewer", model="opus",
|
|
270
|
+
prompt=`스크린 리더 호환성
|
|
271
|
+
- VoiceOver (Safari)
|
|
272
|
+
- NVDA (Firefox)
|
|
273
|
+
- JAWS (Chrome)
|
|
274
|
+
- 의미적 HTML 구조 검증`)
|
|
275
|
+
```
|
|
276
|
+
|
|
277
|
+
**자동 수정 패턴:**
|
|
278
|
+
```typescript
|
|
279
|
+
// 검증 후 자동 수정
|
|
280
|
+
Task(subagent_type="lint-fixer", model="sonnet",
|
|
281
|
+
prompt=`접근성 이슈 자동 수정
|
|
282
|
+
- 대비 부족 색상 조정
|
|
283
|
+
- 누락된 alt 추가
|
|
284
|
+
- aria-label 보완
|
|
285
|
+
- tabindex 최적화`)
|
|
286
|
+
```
|
|
287
|
+
|
|
288
|
+
---
|
|
111
289
|
|
|
112
|
-
###
|
|
290
|
+
### 패턴 5: 디자인 시스템 컴포넌트 병렬 구현
|
|
113
291
|
|
|
114
|
-
|
|
292
|
+
**목표:** 여러 컴포넌트를 동시에 구현하여 디자인 시스템 구축 가속화.
|
|
115
293
|
|
|
116
294
|
```typescript
|
|
117
|
-
//
|
|
295
|
+
// ✅ 10개 컴포넌트 동시 구현
|
|
296
|
+
Task(subagent_type="designer", model="sonnet",
|
|
297
|
+
prompt="Button 컴포넌트 (Primary, Secondary, Ghost)")
|
|
298
|
+
|
|
299
|
+
Task(subagent_type="designer", model="sonnet",
|
|
300
|
+
prompt="Input 컴포넌트 (Text, Email, Password, Search)")
|
|
301
|
+
|
|
302
|
+
Task(subagent_type="designer", model="sonnet",
|
|
303
|
+
prompt="Card 컴포넌트 (Default, Interactive, Elevated)")
|
|
304
|
+
|
|
305
|
+
Task(subagent_type="designer", model="sonnet",
|
|
306
|
+
prompt="Modal 컴포넌트 (Dialog, Drawer, Bottom Sheet)")
|
|
307
|
+
|
|
308
|
+
Task(subagent_type="designer", model="sonnet",
|
|
309
|
+
prompt="Toast/Notification 컴포넌트")
|
|
310
|
+
|
|
311
|
+
Task(subagent_type="designer", model="sonnet",
|
|
312
|
+
prompt="Dropdown/Select 컴포넌트")
|
|
313
|
+
|
|
314
|
+
Task(subagent_type="designer", model="sonnet",
|
|
315
|
+
prompt="Tabs 컴포넌트 (Underline, Segment Control)")
|
|
316
|
+
|
|
317
|
+
Task(subagent_type="designer", model="sonnet",
|
|
318
|
+
prompt="Avatar 컴포넌트 (User, Group, Fallback)")
|
|
319
|
+
|
|
320
|
+
Task(subagent_type="designer", model="sonnet",
|
|
321
|
+
prompt="Badge/Chip 컴포넌트 (Status, Label, Removable)")
|
|
322
|
+
|
|
323
|
+
Task(subagent_type="designer", model="sonnet",
|
|
324
|
+
prompt="Skeleton Loader 컴포넌트")
|
|
325
|
+
|
|
326
|
+
// 병렬 문서 작성
|
|
327
|
+
Task(subagent_type="document-writer", model="haiku",
|
|
328
|
+
prompt=`Storybook 문서 생성
|
|
329
|
+
- 10개 컴포넌트 스토리
|
|
330
|
+
- Props 테이블
|
|
331
|
+
- 사용 예시`)
|
|
332
|
+
```
|
|
333
|
+
|
|
334
|
+
**예상 시간:**
|
|
335
|
+
- 순차 실행: 600초 (60초 × 10)
|
|
336
|
+
- 병렬 실행: 60초
|
|
337
|
+
- 개선: 10배 향상
|
|
338
|
+
|
|
339
|
+
---
|
|
340
|
+
|
|
341
|
+
### 실전 시나리오
|
|
342
|
+
|
|
343
|
+
#### 시나리오 1: 글로벌 이커머스 플랫폼
|
|
344
|
+
|
|
345
|
+
**요구사항:** 10개 언어, 5개 통화, 3개 플랫폼 (Web/iOS/Android)
|
|
346
|
+
|
|
347
|
+
```typescript
|
|
348
|
+
// Phase 1: 병렬 탐색
|
|
118
349
|
Task(subagent_type="explore", model="haiku",
|
|
119
|
-
prompt="
|
|
350
|
+
prompt="Shopify Polaris 디자인 패턴 분석")
|
|
120
351
|
Task(subagent_type="explore", model="haiku",
|
|
121
|
-
prompt="
|
|
352
|
+
prompt="Amazon/Alibaba 다국어 UI 구조 분석")
|
|
353
|
+
Task(subagent_type="explore", model="haiku",
|
|
354
|
+
prompt="결제 UI 접근성 모범 사례 (Stripe, PayPal)")
|
|
122
355
|
|
|
123
|
-
//
|
|
124
|
-
Task(subagent_type="designer", model="
|
|
125
|
-
prompt="
|
|
356
|
+
// Phase 2: 다국어 레이아웃 병렬 구현
|
|
357
|
+
Task(subagent_type="designer", model="sonnet",
|
|
358
|
+
prompt="영어/독일어/프랑스어 상품 페이지 (LTR)")
|
|
359
|
+
Task(subagent_type="designer", model="sonnet",
|
|
360
|
+
prompt="아랍어/히브리어 상품 페이지 (RTL)")
|
|
361
|
+
Task(subagent_type="designer", model="sonnet",
|
|
362
|
+
prompt="중국어/일본어/한국어 상품 페이지 (CJK)")
|
|
363
|
+
Task(subagent_type="designer", model="sonnet",
|
|
364
|
+
prompt="통화별 가격 포매팅 컴포넌트 ($, €, ¥, ₩)")
|
|
365
|
+
|
|
366
|
+
// Phase 3: 반응형 병렬
|
|
367
|
+
Task(subagent_type="designer", model="sonnet",
|
|
368
|
+
prompt="모바일 체크아웃 (1-step)")
|
|
369
|
+
Task(subagent_type="designer", model="sonnet",
|
|
370
|
+
prompt="데스크톱 체크아웃 (Multi-step)")
|
|
126
371
|
|
|
127
|
-
//
|
|
128
|
-
Task(subagent_type="
|
|
129
|
-
|
|
130
|
-
Task(subagent_type="designer", model="sonnet", prompt="컴포넌트 라이브러리 (웹 컴포넌트)")
|
|
372
|
+
// Phase 4: 접근성 검증
|
|
373
|
+
Task(subagent_type="code-reviewer", model="opus",
|
|
374
|
+
prompt="결제 폼 접근성 (WCAG 2.2 AA, 스크린 리더)")
|
|
131
375
|
```
|
|
132
376
|
|
|
133
|
-
|
|
377
|
+
**예상 시간:**
|
|
378
|
+
- 순차: 540초 (60초 × 9)
|
|
379
|
+
- 병렬: 60초
|
|
380
|
+
- 개선: 9배 향상
|
|
381
|
+
|
|
382
|
+
---
|
|
383
|
+
|
|
384
|
+
#### 시나리오 2: 다국어 SaaS 대시보드
|
|
385
|
+
|
|
386
|
+
**요구사항:** 4개 언어, 실시간 데이터, 어댑티브 차트
|
|
134
387
|
|
|
135
388
|
```typescript
|
|
136
|
-
//
|
|
389
|
+
// Phase 1: 디자인 시스템
|
|
390
|
+
Task(subagent_type="designer", model="opus",
|
|
391
|
+
prompt="SaaS 디자인 토큰 시스템 (Carbon Design 기반)")
|
|
392
|
+
|
|
393
|
+
// Phase 2: 병렬 구현
|
|
137
394
|
Task(subagent_type="designer", model="sonnet",
|
|
138
|
-
prompt="
|
|
395
|
+
prompt="대시보드 레이아웃 (4개 언어 동시 지원)")
|
|
139
396
|
Task(subagent_type="designer", model="sonnet",
|
|
140
|
-
prompt="
|
|
397
|
+
prompt="데이터 테이블 (정렬, 필터, 페이지네이션)")
|
|
141
398
|
Task(subagent_type="designer", model="sonnet",
|
|
142
|
-
prompt="
|
|
399
|
+
prompt="차트 컴포넌트 (Recharts, 반응형)")
|
|
143
400
|
Task(subagent_type="implementation-executor", model="sonnet",
|
|
144
|
-
prompt="
|
|
401
|
+
prompt="실시간 WebSocket 연동")
|
|
402
|
+
|
|
403
|
+
// Phase 3: 접근성
|
|
404
|
+
Task(subagent_type="code-reviewer", model="opus",
|
|
405
|
+
prompt="차트 접근성 (aria-label, 데이터 테이블 대체)")
|
|
406
|
+
Task(subagent_type="code-reviewer", model="opus",
|
|
407
|
+
prompt="키보드 네비게이션 (테이블, 필터)")
|
|
145
408
|
```
|
|
146
409
|
|
|
147
|
-
|
|
410
|
+
---
|
|
411
|
+
|
|
412
|
+
#### 시나리오 3: 모바일 우선 소셜 앱
|
|
413
|
+
|
|
414
|
+
**요구사항:** iOS/Android 네이티브 느낌, 60fps 애니메이션
|
|
148
415
|
|
|
149
416
|
```typescript
|
|
150
|
-
//
|
|
417
|
+
// Phase 1: 플랫폼별 탐색
|
|
151
418
|
Task(subagent_type="explore", model="haiku",
|
|
152
|
-
prompt="
|
|
419
|
+
prompt="iOS Human Interface Guidelines 최신 패턴")
|
|
420
|
+
Task(subagent_type="explore", model="haiku",
|
|
421
|
+
prompt="Material 3 모바일 컴포넌트")
|
|
153
422
|
|
|
154
|
-
//
|
|
155
|
-
Task(subagent_type="designer", model="
|
|
156
|
-
prompt="
|
|
423
|
+
// Phase 2: 병렬 구현
|
|
424
|
+
Task(subagent_type="designer", model="sonnet",
|
|
425
|
+
prompt="iOS 스타일 피드 (SF Symbols, 네이티브 제스처)")
|
|
157
426
|
Task(subagent_type="designer", model="sonnet",
|
|
158
|
-
prompt="
|
|
427
|
+
prompt="Android 스타일 피드 (Material 3, FAB)")
|
|
428
|
+
Task(subagent_type="designer", model="sonnet",
|
|
429
|
+
prompt="공통 스토리 컴포넌트 (Instagram 스타일)")
|
|
159
430
|
Task(subagent_type="implementation-executor", model="sonnet",
|
|
160
|
-
prompt="
|
|
431
|
+
prompt="60fps 애니메이션 (Framer Motion)")
|
|
161
432
|
|
|
162
|
-
//
|
|
433
|
+
// Phase 3: 성능 검증
|
|
163
434
|
Task(subagent_type="code-reviewer", model="opus",
|
|
164
|
-
prompt="
|
|
435
|
+
prompt="성능 검토 (FPS, 메모리, 배터리)")
|
|
165
436
|
```
|
|
166
437
|
|
|
167
|
-
|
|
438
|
+
---
|
|
439
|
+
|
|
440
|
+
#### 시나리오 4: 엔터프라이즈 디자인 시스템 구축
|
|
441
|
+
|
|
442
|
+
**요구사항:** 100+ 컴포넌트, Figma 동기화, 접근성 AAA
|
|
443
|
+
|
|
444
|
+
```typescript
|
|
445
|
+
// Phase 1: 탐색
|
|
446
|
+
Task(subagent_type="explore", model="haiku",
|
|
447
|
+
prompt="IBM Carbon, Salesforce Lightning 분석")
|
|
448
|
+
Task(subagent_type="explore", model="haiku",
|
|
449
|
+
prompt="Figma Design Tokens 플러그인 조사")
|
|
450
|
+
|
|
451
|
+
// Phase 2: 토큰 시스템
|
|
452
|
+
Task(subagent_type="designer", model="opus",
|
|
453
|
+
prompt="디자인 토큰 시스템 (색상, 타이포, 간격, 그림자)")
|
|
454
|
+
|
|
455
|
+
// Phase 3: 컴포넌트 병렬 구현 (20개씩 배치)
|
|
456
|
+
// Batch 1
|
|
457
|
+
Task(subagent_type="designer", model="sonnet",
|
|
458
|
+
prompt="Form 컴포넌트 (Input, Select, Checkbox, Radio, Switch)")
|
|
459
|
+
// Batch 2
|
|
460
|
+
Task(subagent_type="designer", model="sonnet",
|
|
461
|
+
prompt="Navigation 컴포넌트 (Navbar, Sidebar, Tabs, Breadcrumb)")
|
|
462
|
+
// Batch 3
|
|
463
|
+
Task(subagent_type="designer", model="sonnet",
|
|
464
|
+
prompt="Feedback 컴포넌트 (Toast, Modal, Alert, Progress)")
|
|
465
|
+
// Batch 4
|
|
466
|
+
Task(subagent_type="designer", model="sonnet",
|
|
467
|
+
prompt="Data Display 컴포넌트 (Table, Card, List, Badge)")
|
|
468
|
+
|
|
469
|
+
// Phase 4: 접근성 AAA
|
|
470
|
+
Task(subagent_type="code-reviewer", model="opus",
|
|
471
|
+
prompt="WCAG 2.2 AAA 검증 (7:1 대비, 모든 인터랙션)")
|
|
168
472
|
|
|
169
|
-
|
|
170
|
-
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
- 글로벌 디자인 시스템과 조화 (Material 3, Apple HIG, Fluent 2)
|
|
473
|
+
// Phase 5: 문서
|
|
474
|
+
Task(subagent_type="document-writer", model="sonnet",
|
|
475
|
+
prompt="Storybook + 디자인 가이드라인 생성")
|
|
476
|
+
```
|
|
174
477
|
|
|
175
|
-
|
|
176
|
-
-
|
|
177
|
-
-
|
|
178
|
-
-
|
|
179
|
-
- 프리미엄 브랜드 경험 구축
|
|
478
|
+
**예상 시간:**
|
|
479
|
+
- 순차: 1200초 (20분)
|
|
480
|
+
- 병렬: 240초 (4분)
|
|
481
|
+
- 개선: 5배 향상
|
|
180
482
|
|
|
181
|
-
|
|
483
|
+
---
|
|
182
484
|
|
|
183
485
|
### 체크리스트
|
|
184
486
|
|
|
185
|
-
|
|
487
|
+
#### 병렬 실행 전 확인
|
|
488
|
+
|
|
489
|
+
- [ ] 독립적인 작업인가? (의존성 없음)
|
|
490
|
+
- [ ] 같은 파일을 동시 수정하지 않는가?
|
|
491
|
+
- [ ] 컨텍스트 분리 가능한가?
|
|
492
|
+
|
|
493
|
+
#### Global UX 특화 확인
|
|
494
|
+
|
|
495
|
+
- [ ] 다국어 작업 → 언어별 병렬 실행
|
|
496
|
+
- [ ] 반응형 작업 → Breakpoint별 병렬 실행
|
|
497
|
+
- [ ] A/B 테스트 → 변형별 병렬 실행
|
|
498
|
+
- [ ] 접근성 검증 → WCAG/ARIA/키보드 병렬
|
|
499
|
+
- [ ] 디자인 시스템 → 컴포넌트별 병렬 실행
|
|
500
|
+
|
|
501
|
+
#### 모델 선택 확인
|
|
502
|
+
|
|
503
|
+
- [ ] 탐색 작업 → haiku
|
|
504
|
+
- [ ] 일반 구현 → sonnet
|
|
505
|
+
- [ ] 복잡한 디자인 → opus
|
|
506
|
+
- [ ] 접근성 검증 → opus
|
|
507
|
+
- [ ] 문서 작성 → haiku
|
|
508
|
+
|
|
509
|
+
#### 성능 최적화
|
|
510
|
+
|
|
511
|
+
- [ ] 3-10개 작업 동시 실행
|
|
512
|
+
- [ ] 병렬 실행 시간 예상 (순차 대비 5-15배 향상)
|
|
513
|
+
- [ ] 컨텍스트 크기 모니터링
|
|
514
|
+
- [ ] 실패 시 재시도 전략 (3회 제한)
|
|
515
|
+
|
|
516
|
+
#### 완료 후 검증
|
|
186
517
|
|
|
187
|
-
- [ ]
|
|
188
|
-
- [ ]
|
|
189
|
-
- [ ]
|
|
190
|
-
- [ ]
|
|
191
|
-
- [ ] 복잡한 접근성/국제화? → opus 모델 사용
|
|
518
|
+
- [ ] 모든 언어 레이아웃 정상 작동
|
|
519
|
+
- [ ] 모든 Breakpoint 반응형 동작
|
|
520
|
+
- [ ] 접근성 WCAG 2.2 AA 통과
|
|
521
|
+
- [ ] 성능 목표 달성 (60fps, LCP < 2.5s)
|
|
192
522
|
|
|
193
|
-
**적극적으로
|
|
523
|
+
**적극적으로 병렬 실행 활용. 순차 실행은 의존성이 명확할 때만.**
|
|
194
524
|
|
|
195
|
-
</
|
|
525
|
+
</parallel_agent_execution>
|
|
196
526
|
|
|
197
527
|
---
|
|
198
528
|
|
|
@@ -6,7 +6,10 @@
|
|
|
6
6
|
|
|
7
7
|
<agents_reference>
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
다중 에이전트 구조:
|
|
10
|
+
- 에이전트 목록: @../../instructions/multi-agent/agent-roster.md
|
|
11
|
+
- 조정 가이드: @../../instructions/multi-agent/coordination-guide.md
|
|
12
|
+
- 실행 패턴: @../../instructions/multi-agent/execution-patterns.md
|
|
10
13
|
|
|
11
14
|
</agents_reference>
|
|
12
15
|
|