@su-record/vibe 1.1.9 → 1.1.10

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.
@@ -5,193 +5,193 @@ argument-hint: "feature name"
5
5
 
6
6
  # /vibe.spec
7
7
 
8
- SPEC 문서를 작성합니다 (Specification Agent).
8
+ Create a SPEC document (Specification Agent).
9
9
 
10
10
  ## Usage
11
11
 
12
12
  ```
13
- /vibe.spec "기능명"
13
+ /vibe.spec "feature-name"
14
14
  ```
15
15
 
16
16
  ## Rules Reference
17
17
 
18
- **반드시 `.vibe/rules/` 규칙을 따릅니다:**
19
- - `core/development-philosophy.md` - 수술적 정밀도, 단순함
20
- - `core/quick-start.md` - 한국어 우선, DRY, SRP
21
- - `core/communication-guide.md` - 커뮤니케이션 원칙
18
+ **Must follow `.vibe/rules/`:**
19
+ - `core/development-philosophy.md` - Surgical precision, simplicity
20
+ - `core/quick-start.md` - Korean first, DRY, SRP
21
+ - `core/communication-guide.md` - Communication principles
22
22
 
23
23
  ## Description
24
24
 
25
- 사용자와 대화를 통해 요구사항을 수집하고, AI가 바로 실행 가능한 **PTCF 구조의 SPEC 문서**를 작성합니다.
25
+ Collect requirements through conversation with the user and create an **AI-executable PTCF structured SPEC document**.
26
26
 
27
- > **PTCF**: Persona, Task, Context, Format - Google Gemini 프롬프트 최적화 프레임워크
27
+ > **PTCF**: Persona, Task, Context, Format - Google Gemini prompt optimization framework
28
28
 
29
- ## 외부 LLM 연동 (선택적)
29
+ ## External LLM Integration (Optional)
30
30
 
31
- `.vibe/config.json`에서 외부 LLM이 활성화된 경우 SPEC 작성 시 자동 활용:
31
+ When external LLMs are enabled in `.vibe/config.json`, automatically utilize during SPEC creation:
32
32
 
33
33
  ```
34
- /vibe.spec "복잡한 기능"
34
+ /vibe.spec "complex feature"
35
35
 
36
- [Claude Opus] SPEC 초안 작성
36
+ [Claude Opus] Create SPEC draft
37
37
 
38
- [GPT 활성화?] → MCP(vibe-gpt)로 설계 교차 검토
38
+ [GPT enabled?] → Cross-review design via MCP(vibe-gpt)
39
39
 
40
- [Gemini 활성화?] → MCP(vibe-gemini)로 UI/UX 자문
40
+ [Gemini enabled?] → UI/UX consultation via MCP(vibe-gemini)
41
41
 
42
- [Claude] 최종 SPEC 확정
42
+ [Claude] Finalize SPEC
43
43
  ```
44
44
 
45
- | 외부 LLM | 역할 | 활용 시점 |
46
- |----------|------|----------|
47
- | GPT 5.2 | 아키텍처/설계 검토 | SPEC 초안 완성 |
48
- | Gemini 3 | UI/UX 자문 | 디자인 레퍼런스 논의 |
45
+ | External LLM | Role | When Used |
46
+ |--------------|------|-----------|
47
+ | GPT 5.2 | Architecture/design review | After SPEC draft completion |
48
+ | Gemini 3 | UI/UX consultation | During design reference discussion |
49
49
 
50
- **활성화 방법:**
50
+ **Activation:**
51
51
  ```bash
52
- vibe gpt <api-key> # GPT 활성화
53
- vibe gemini <api-key> # Gemini 활성화
54
- vibe status # 현재 설정 확인
52
+ vibe gpt <api-key> # Enable GPT
53
+ vibe gemini <api-key> # Enable Gemini
54
+ vibe status # Check current settings
55
55
  ```
56
56
 
57
57
  ## Process
58
58
 
59
- ### 1. 프로젝트 분석
59
+ ### 1. Project Analysis
60
60
 
61
- **기존 프로젝트** (`vibe init`):
62
- - 소스코드 분석: `package.json`, `pyproject.toml`, `pubspec.yaml`, `go.mod`
63
- - `CLAUDE.md` 파일 참조 (기술 스택)
64
- - 파일 구조로 프레임워크 추정
61
+ **Existing project** (`vibe init`):
62
+ - Source code analysis: `package.json`, `pyproject.toml`, `pubspec.yaml`, `go.mod`, etc.
63
+ - Reference `CLAUDE.md` file (tech stack)
64
+ - Infer framework from file structure
65
65
 
66
- **신규 프로젝트** (`vibe init <프로젝트명>`):
67
- - 기술 스택 제안 (2-3가지 옵션)
66
+ **New project** (`vibe init <project-name>`):
67
+ - Suggest tech stack (2-3 options)
68
68
 
69
- ### 2. 대화로 요구사항 수집
69
+ ### 2. Collect Requirements via Conversation
70
70
 
71
- **원칙:**
72
- - 질문은 **한 번에 하나씩**
73
- - 선택지는 **번호로 제시** + "직접 설명해주셔도 됩니다"
74
- - 고정된 순서 없이 **자연스러운 대화**
71
+ **Principles:**
72
+ - Ask **one question at a time**
73
+ - Present options **with numbers** + "Feel free to describe in your own words"
74
+ - **Natural conversation** without fixed order
75
75
 
76
- **필수 확인 사항:**
77
- - 목적 (Why): 필요한가?
78
- - 사용자 (Who): 누가 사용하는가?
79
- - 기능 범위 (What): 어떤 기능들이 필요한가?
80
- - 기술 스택: 기존 스택 확인 또는 새로 제안
81
- - 디자인 레퍼런스: 참고할 UI/UX
76
+ **Required confirmations:**
77
+ - Purpose (Why): Why is it needed?
78
+ - User (Who): Who will use it?
79
+ - Feature scope (What): What features are needed?
80
+ - Tech stack: Confirm existing stack or suggest new
81
+ - Design reference: UI/UX to reference
82
82
 
83
- ### 3. SPEC 문서 작성 (PTCF 구조)
83
+ ### 3. Write SPEC Document (PTCF Structure)
84
84
 
85
- `.vibe/specs/{기능명}.md` 생성:
85
+ Create `.vibe/specs/{feature-name}.md`:
86
86
 
87
87
  ```markdown
88
- # SPEC: {기능명}
88
+ # SPEC: {feature-name}
89
89
 
90
90
  ## Persona
91
91
  <role>
92
- 구현을 담당할 AI 역할과 전문성 정의
93
- - 프로젝트의 시니어 개발자
94
- - 기존 코드 패턴 준수
95
- - 테스트 가능한 코드 작성
92
+ Define AI role and expertise for implementation
93
+ - Senior developer on the project
94
+ - Follow existing code patterns
95
+ - Write testable code
96
96
  </role>
97
97
 
98
98
  ## Context
99
99
  <context>
100
- ### 배경
101
- - 기능이 필요한가
102
- - 누가 사용하는가
100
+ ### Background
101
+ - Why this feature is needed
102
+ - Who will use it
103
103
 
104
- ### 기술 스택
105
- - Backend: {기술}
106
- - Frontend: {기술}
107
- - Database: {기술}
104
+ ### Tech Stack
105
+ - Backend: {technology}
106
+ - Frontend: {technology}
107
+ - Database: {technology}
108
108
 
109
- ### 관련 코드
110
- - `src/xxx/`: 참조할 기존 구현
111
- - `src/yyy/`: 수정할 파일들
109
+ ### Related Code
110
+ - `src/xxx/`: Existing implementation to reference
111
+ - `src/yyy/`: Files to modify
112
112
 
113
- ### 디자인 레퍼런스
114
- - {참고 앱/서비스}
113
+ ### Design Reference
114
+ - {Reference app/service}
115
115
  </context>
116
116
 
117
117
  ## Task
118
118
  <task>
119
- ### Phase 1: {단계명}
120
- 1. [ ] {구체적 작업}
121
- - 파일: `path/to/file`
122
- - 검증: `command`
123
- 2. [ ] {구체적 작업}
119
+ ### Phase 1: {phase-name}
120
+ 1. [ ] {specific task}
121
+ - File: `path/to/file`
122
+ - Verify: `command`
123
+ 2. [ ] {specific task}
124
124
 
125
- ### Phase 2: {단계명}
126
- 1. [ ] {구체적 작업}
127
- 2. [ ] {구체적 작업}
125
+ ### Phase 2: {phase-name}
126
+ 1. [ ] {specific task}
127
+ 2. [ ] {specific task}
128
128
 
129
- ### Phase 3: 테스트 검증
129
+ ### Phase 3: Testing and Verification
130
130
  1. [ ] Unit Tests
131
131
  2. [ ] Integration Tests
132
132
  </task>
133
133
 
134
134
  ## Constraints
135
135
  <constraints>
136
- - 기존 코드 패턴 준수
137
- - 에러 메시지 한글화
138
- - 환경변수로 설정 분리
139
- - {기타 제약 조건}
136
+ - Follow existing code patterns
137
+ - Localize error messages
138
+ - Separate configuration via environment variables
139
+ - {other constraints}
140
140
  </constraints>
141
141
 
142
142
  ## Output Format
143
143
  <output_format>
144
- ### 생성할 파일
144
+ ### Files to Create
145
145
  - `path/to/new/file.ts`
146
146
  - `path/to/new/file.test.ts`
147
147
 
148
- ### 수정할 파일
148
+ ### Files to Modify
149
149
  - `path/to/existing/file.ts`
150
150
 
151
- ### 검증 명령어
151
+ ### Verification Commands
152
152
  - `npm test`
153
153
  - `npm run build`
154
154
  </output_format>
155
155
 
156
156
  ## Acceptance Criteria
157
157
  <acceptance>
158
- - [ ] {검증 가능한 기준 1}
159
- - [ ] {검증 가능한 기준 2}
160
- - [ ] 모든 테스트 통과
161
- - [ ] 빌드 성공
158
+ - [ ] {verifiable criterion 1}
159
+ - [ ] {verifiable criterion 2}
160
+ - [ ] All tests pass
161
+ - [ ] Build succeeds
162
162
  </acceptance>
163
163
  ```
164
164
 
165
- ### 4. Feature 파일 생성 (BDD) - 필수
165
+ ### 4. Create Feature File (BDD) - Required
166
166
 
167
- **반드시** `.vibe/features/{기능명}.feature` 파일을 생성합니다.
167
+ **Must** create `.vibe/features/{feature-name}.feature` file.
168
168
 
169
- **생성 규칙:**
170
- 1. SPEC Acceptance Criteria → 하나의 Scenario로 변환
171
- 2. Happy Path (정상 케이스) + Edge Case (예외 케이스) 포함
172
- 3. Given-When-Then 형식 준수
169
+ **Creation rules:**
170
+ 1. Convert each SPEC Acceptance Criteria → one Scenario
171
+ 2. Include Happy Path (normal case) + Edge Case (exception case)
172
+ 3. Follow Given-When-Then format
173
173
 
174
- **Feature 구조:**
174
+ **Feature structure:**
175
175
  ```markdown
176
- # Feature: {기능명}
176
+ # Feature: {feature-name}
177
177
 
178
- **SPEC**: `.vibe/specs/{기능명}.md`
178
+ **SPEC**: `.vibe/specs/{feature-name}.md`
179
179
 
180
180
  ## User Story
181
- **As a** {사용자}
182
- **I want** {기능}
183
- **So that** {가치}
181
+ **As a** {user}
182
+ **I want** {feature}
183
+ **So that** {value}
184
184
 
185
185
  ## Scenarios
186
186
 
187
187
  ### Scenario 1: {Happy Path}
188
188
  \`\`\`gherkin
189
- Scenario: {제목}
190
- Given {전제}
191
- When {행동}
192
- Then {결과}
189
+ Scenario: {title}
190
+ Given {precondition}
191
+ When {action}
192
+ Then {result}
193
193
  \`\`\`
194
- **검증 기준**: SPEC AC #1
194
+ **Verification**: SPEC AC #1
195
195
 
196
196
  ### Scenario 2: {Edge Case}
197
197
  ...
@@ -202,136 +202,136 @@ Scenario: {제목}
202
202
  | 1 | AC-1 | ⬜ |
203
203
  ```
204
204
 
205
- ### 5. 모호성 스캔 (Ambiguity Scan) - 필수
205
+ ### 5. Ambiguity Scan - Required
206
206
 
207
- SPEC 초안 작성 후, **반드시 체계적인 모호성 검사**를 수행합니다.
207
+ After creating SPEC draft, **must perform systematic ambiguity check**.
208
208
 
209
- **검사 카테고리:**
209
+ **Check categories:**
210
210
 
211
- | 카테고리 | 검사 항목 |
212
- |----------|-----------|
213
- | **Functional Scope** | 누락된 기능, 불명확한 동작 정의 |
214
- | **Data Model** | 정의되지 않은 엔티티, 불명확한 관계 |
215
- | **Non-Functional** | 성능 요구사항, 보안 고려사항 누락 |
216
- | **Edge Cases** | 경계 조건, 에러 처리 시나리오 |
217
- | **Integration Points** | 외부 시스템 연동, API 계약 |
211
+ | Category | Check Items |
212
+ |----------|-------------|
213
+ | **Functional Scope** | Missing features, unclear behavior definitions |
214
+ | **Data Model** | Undefined entities, unclear relationships |
215
+ | **Non-Functional** | Missing performance requirements, security considerations |
216
+ | **Edge Cases** | Boundary conditions, error handling scenarios |
217
+ | **Integration Points** | External system integration, API contracts |
218
218
 
219
- **검사 프로세스:**
219
+ **Check process:**
220
220
 
221
221
  ```
222
- 1. SPEC 초안 작성
222
+ 1. Create SPEC draft
223
223
 
224
- 2. 카테고리별 모호성 스캔
224
+ 2. Scan by category for ambiguity
225
225
 
226
- 3. 발견된 모호성 목록 제시
226
+ 3. Present list of found ambiguities
227
227
 
228
- 4. 사용자 확인/명확화 요청
228
+ 4. Request user clarification
229
229
 
230
- 5. SPEC 보완
230
+ 5. Refine SPEC
231
231
 
232
- 6. 재검사 (모호성 0 될 때까지)
232
+ 6. Re-check (until 0 ambiguities)
233
233
  ```
234
234
 
235
- **모호성 발견 시 출력 형식:**
235
+ **Ambiguity output format:**
236
236
 
237
237
  ```markdown
238
- ## 🔍 모호성 스캔 결과
238
+ ## 🔍 Ambiguity Scan Results
239
239
 
240
240
  ### Functional Scope
241
- - ⚠️ "로그인 실패 시 동작" 정의되지 않음
242
- - ⚠️ "세션 만료 처리" 불명확
241
+ - ⚠️ "Login failure behavior" not defined
242
+ - ⚠️ "Session expiration handling" unclear
243
243
 
244
244
  ### Edge Cases
245
- - ⚠️ 동시 로그인 허용 여부 미정의
246
- - ⚠️ 비밀번호 재시도 횟수 제한 없음
245
+ - ⚠️ Concurrent login permission undefined
246
+ - ⚠️ No password retry limit specified
247
247
 
248
- 항목들을 명확히 해주세요.
248
+ Please clarify the above items.
249
249
  ```
250
250
 
251
- ### 6. 품질 검증
251
+ ### 6. Quality Validation
252
252
 
253
- `.vibe/rules/quality/checklist.md` 기준 자체 평가 (0-100)
253
+ Self-evaluate against `.vibe/rules/quality/checklist.md` (0-100 score)
254
254
 
255
255
  ## Output
256
256
 
257
- - `.vibe/specs/{기능명}.md` - PTCF 구조 SPEC
258
- - `.vibe/features/{기능명}.feature` - BDD Feature 파일
259
- - 모호성 스캔 결과 (모호성 0 확인)
260
- - 품질 점수 개선 제안
257
+ - `.vibe/specs/{feature-name}.md` - PTCF structured SPEC
258
+ - `.vibe/features/{feature-name}.feature` - BDD Feature file
259
+ - Ambiguity scan results (0 ambiguities confirmed)
260
+ - Quality score and improvement suggestions
261
261
 
262
262
  ## Example
263
263
 
264
264
  ```
265
- User: /vibe.spec "벽돌게임"
265
+ User: /vibe.spec "brick-game"
266
266
 
267
267
  Claude:
268
- 벽돌게임을 만드시는군요! 어떤 스타일의 게임을 생각하고 계신가요?
268
+ You're making a brick game! What style are you thinking of?
269
269
 
270
- 1. 클래식 벽돌깨기 (Breakout 스타일)
271
- 2. 아르카노이드 (파워업 아이템 포함)
272
- 3. 특별한 게임플레이가 있는 커스텀 스타일
270
+ 1. Classic Breakout style
271
+ 2. Arkanoid (with power-up items)
272
+ 3. Custom style with special gameplay
273
273
 
274
- 또는 직접 설명해주셔도 됩니다.
274
+ Feel free to describe in your own words.
275
275
 
276
276
  User: 1
277
277
 
278
- Claude: 어떤 플랫폼에서 실행하시겠어요?
278
+ Claude: What platform will it run on?
279
279
 
280
- 1. (브라우저)
281
- 2. 모바일 (iOS/Android)
282
- 3. 데스크톱
280
+ 1. Web (browser)
281
+ 2. Mobile (iOS/Android)
282
+ 3. Desktop
283
283
 
284
284
  User: 1
285
285
 
286
286
  Claude:
287
- 게임 개발에 적합한 기술 스택을 제안드립니다:
287
+ Here are tech stack suggestions for web game development:
288
288
 
289
- 1. **Phaser.js** (추천) - 게임 프레임워크, 물리엔진 내장
290
- 2. **Canvas + JavaScript** - 가볍고 세밀한 제어
291
- 3. **PixiJS + Matter.js** - 고성능 렌더링
289
+ 1. **Phaser.js** (Recommended) - Game framework with built-in physics engine
290
+ 2. **Canvas + JavaScript** - Lightweight with fine control
291
+ 3. **PixiJS + Matter.js** - High-performance rendering
292
292
 
293
293
  User: 1
294
294
 
295
- Claude: 디자인 스타일은요?
295
+ Claude: What design style?
296
296
 
297
- 1. 레트로 픽셀 (Atari Breakout)
298
- 2. 네온 그래픽 (Arkanoid)
299
- 3. 모던 3D 효과
297
+ 1. Retro pixel (Atari Breakout)
298
+ 2. Neon graphics (Arkanoid)
299
+ 3. Modern 3D effects
300
300
 
301
301
  User: 2
302
302
 
303
- [대화 계속...]
303
+ [Conversation continues...]
304
304
 
305
- Claude: SPEC 초안을 작성했습니다. 모호성 스캔을 수행합니다.
305
+ Claude: SPEC draft created. Running ambiguity scan.
306
306
 
307
- ## 🔍 모호성 스캔 결과
307
+ ## 🔍 Ambiguity Scan Results
308
308
 
309
309
  ### Functional Scope
310
- - ⚠️ 게임 오버 조건이 정의되지 않음 ( 낙하 vs 목숨 시스템)
311
- - ⚠️ 스테이지 클리어 조건 불명확
310
+ - ⚠️ Game over condition not defined (ball drop vs lives system)
311
+ - ⚠️ Stage clear condition unclear
312
312
 
313
313
  ### Edge Cases
314
- - ⚠️ 공이 패들 모서리에 맞을 반사각 처리
315
- - ⚠️ 동시에 여러 벽돌 충돌 시 처리
314
+ - ⚠️ Ball reflection angle when hitting paddle edge
315
+ - ⚠️ Multiple brick collision handling
316
316
 
317
- 항목들을 명확히 해주세요.
317
+ Please clarify the above items.
318
318
 
319
- User: 목숨 3개, 모든 벽돌 파괴시 클리어, 모서리는 45 반사
319
+ User: 3 lives, clear when all bricks destroyed, edge reflects at 45 degrees
320
320
 
321
- Claude: 감사합니다. SPEC 보완했습니다.
321
+ Claude: Thank you. SPEC has been refined.
322
322
 
323
- 🔍 재검사 결과: 모호성 0개
323
+ 🔍 Re-check result: 0 ambiguities
324
324
 
325
- ✅ SPEC 문서 작성 완료!
326
- 📄 .vibe/specs/brick-game.md (PTCF 구조)
325
+ ✅ SPEC document complete!
326
+ 📄 .vibe/specs/brick-game.md (PTCF structure)
327
327
  📄 .vibe/features/brick-game.feature
328
- 📊 품질 점수: 92/100 (A)
328
+ 📊 Quality score: 92/100 (A)
329
329
  ```
330
330
 
331
331
  ## Next Step
332
332
 
333
333
  ```
334
- /vibe.run "벽돌게임"
334
+ /vibe.run "brick-game"
335
335
  ```
336
336
 
337
337
  ---
@@ -5,31 +5,31 @@ argument-hint: "UI description"
5
5
 
6
6
  # /vibe.ui
7
7
 
8
- UI ASCII 아트로 미리보기합니다.
8
+ Preview UI with ASCII art.
9
9
 
10
10
  ## Usage
11
11
 
12
12
  ```
13
- /vibe.ui "로그인 페이지"
14
- /vibe.ui "대시보드" --layout grid
13
+ /vibe.ui "login page"
14
+ /vibe.ui "dashboard" --layout grid
15
15
  ```
16
16
 
17
17
  ## Process
18
18
 
19
- ### 1. UI 설명 분석
19
+ ### 1. Analyze UI Description
20
20
 
21
- 사용자가 요청한 UI 설명을 분석합니다:
22
- - 페이지/컴포넌트 이름
23
- - 필요한 UI 요소 (버튼, 입력, 카드 )
24
- - 레이아웃 구조 (header-footer, sidebar, grid )
21
+ Analyze user's requested UI description:
22
+ - Page/component name
23
+ - Required UI elements (buttons, inputs, cards, etc.)
24
+ - Layout structure (header-footer, sidebar, grid, etc.)
25
25
 
26
- ### 2. MCP 도구 사용
26
+ ### 2. Use MCP Tool
27
27
 
28
- `mcp__su-record-hi-ai__preview_ui_ascii` 도구를 사용하여 ASCII 아트 생성:
28
+ Use `mcp__su-record-hi-ai__preview_ui_ascii` tool to generate ASCII art:
29
29
 
30
30
  ```javascript
31
31
  {
32
- page_name: "로그인 페이지",
32
+ page_name: "Login Page",
33
33
  layout_type: "centered",
34
34
  components: [
35
35
  { type: "header", label: "Welcome", position: "top" },
@@ -40,9 +40,9 @@ UI를 ASCII 아트로 미리보기합니다.
40
40
  }
41
41
  ```
42
42
 
43
- ### 3. ASCII 아트 출력
43
+ ### 3. Output ASCII Art
44
44
 
45
- 생성된 ASCII 아트를 출력:
45
+ Output generated ASCII art:
46
46
 
47
47
  ```
48
48
  ┌─────────────────────────────────────────┐
@@ -64,17 +64,17 @@ UI를 ASCII 아트로 미리보기합니다.
64
64
  └─────────────────────────────────────────┘
65
65
  ```
66
66
 
67
- ### 4. 컴포넌트 목록 생성
67
+ ### 4. Generate Component List
68
68
 
69
- UI에 필요한 컴포넌트 목록 제안:
69
+ Suggest list of components needed for UI:
70
70
 
71
- **필요한 컴포넌트:**
72
- - `Header.tsx` - 헤더 ("Welcome")
73
- - `LoginForm.tsx` - 컨테이너
74
- - `Input.tsx` - 재사용 가능한 입력 필드
75
- - `Button.tsx` - 로그인 버튼
71
+ **Required Components:**
72
+ - `Header.tsx` - Header ("Welcome")
73
+ - `LoginForm.tsx` - Form container
74
+ - `Input.tsx` - Reusable input field
75
+ - `Button.tsx` - Login button
76
76
 
77
- **예상 파일 구조:**
77
+ **Expected File Structure:**
78
78
  ```
79
79
  src/
80
80
  ├── components/
@@ -91,9 +91,9 @@ src/
91
91
  ## Example
92
92
 
93
93
  ```
94
- User: /vibe.ui "대시보드 페이지 - 헤더, 사이드바, 메인 콘텐츠 (3 카드), 푸터"
94
+ User: /vibe.ui "Dashboard page - header, sidebar, main content (3 cards), footer"
95
95
 
96
- Claude: 대시보드 UI 미리보기를 생성합니다...
96
+ Claude: Generating dashboard UI preview...
97
97
 
98
98
  ┌────────────────────────────────────────────────────────┐
99
99
  │ [Logo] Dashboard [User] [Logout] │
@@ -110,27 +110,27 @@ Claude: 대시보드 UI 미리보기를 생성합니다...
110
110
  │ © 2025 Company Privacy | Terms │
111
111
  └────────────────────────────────────────────────────────┘
112
112
 
113
- **필요한 컴포넌트:**
114
- 1. Header (로고, 사용자 메뉴)
115
- 2. Sidebar (네비게이션)
116
- 3. StatsCard (재사용 카드)
117
- 4. Footer (저작권, 링크)
118
- 5. DashboardLayout (전체 레이아웃)
113
+ **Required Components:**
114
+ 1. Header (logo, user menu)
115
+ 2. Sidebar (navigation)
116
+ 3. StatsCard (reusable card)
117
+ 4. Footer (copyright, links)
118
+ 5. DashboardLayout (overall layout)
119
119
 
120
- **레이아웃 구조:**
121
- - Layout: sidebar (왼쪽 고정)
122
- - Main: grid (3)
123
- - Responsive: 모바일에서는 1열로 변경
120
+ **Layout Structure:**
121
+ - Layout: sidebar (fixed left)
122
+ - Main: grid (3 columns)
123
+ - Responsive: Changes to 1 column on mobile
124
124
 
125
- 다음 단계:
126
- vibe spec "대시보드 페이지"
125
+ Next step:
126
+ vibe spec "dashboard page"
127
127
  ```
128
128
 
129
129
  ## Notes
130
130
 
131
- - 복잡한 UI 여러 나누어서 요청하세요
132
- - 레이아웃 옵션: `sidebar`, `header-footer`, `grid`, `centered`, `split`
133
- - ASCII 아트는 실제 구현 빠른 시각화 목적입니다
131
+ - For complex UI, request in multiple parts
132
+ - Layout options: `sidebar`, `header-footer`, `grid`, `centered`, `split`
133
+ - ASCII art is for quick visualization before actual implementation
134
134
 
135
135
  ---
136
136