create-ax-project 1.0.0

package/template/stages/04-ui-ux/HANDOFF.md

@@ -0,0 +1,165 @@
+# HANDOFF: 04-ui-ux → 05-task-management
+
+> 생성일: 2026-01-21
+> 프로젝트: snake-game
+> 현재 스테이지: 04-ui-ux (완료)
+> 다음 스테이지: 05-task-management
+
+---
+
+## ✅ 완료된 작업
+
+- [x] 와이어프레임 설계 (5개 화면)
+- [x] 사용자 플로우 다이어그램
+- [x] 디자인 시스템 정의 (Neon Arcade 테마)
+- [x] 컴포넌트 스타일 가이드
+- [x] 반응형 브레이크포인트 정의
+- [x] 애니메이션 명세
+
+---
+
+## 📁 생성된 산출물
+
+| 파일 | 설명 |
+|------|------|
+| `outputs/wireframes.md` | 5개 화면 ASCII 와이어프레임 |
+| `outputs/user_flows.md` | 사용자 플로우 다이어그램 |
+| `outputs/design_system.md` | 디자인 시스템 토큰 |
+| `HANDOFF.md` | 이 문서 |
+
+---
+
+## 🎨 핵심 디자인 결정사항
+
+### 1. 테마: Neon Arcade
+
+| 요소 | 스타일 |
+|------|--------|
+| 배경 | 다크 네이비 (#1a1a2e) |
+| 강조 | 네온 그린 (#00ff88) + Glow |
+| 위험 | 네온 레드 (#ff6b6b) + Glow |
+| 하이라이트 | 골드 (#f0e130) |
+
+### 2. 컴포넌트 구조
+
+```
+App
+├── StartScreen
+│   ├── Logo (Neon Glow)
+│   ├── HighScore
+│   └── StartButton
+│
+├── GameEngine
+│   ├── ScoreBoard
+│   │   ├── CurrentScore
+│   │   └── BestScore
+│   │
+│   ├── CanvasLayer (400x400)
+│   │   ├── Grid (20x20)
+│   │   ├── Snake (Glow)
+│   │   └── Food (Glow)
+│   │
+│   └── MobileControls (D-Pad)
+│
+├── PauseOverlay
+│   ├── ResumeButton
+│   └── QuitButton
+│
+└── GameOverModal
+    ├── FinalScore
+    ├── NewHighScore (조건부)
+    ├── PlayAgainButton
+    └── MainMenuLink
+```
+
+### 3. 반응형 브레이크포인트
+
+| 너비 | 대상 | 변경사항 |
+|------|------|----------|
+| < 480px | 모바일 | MobileControls 활성화, 캔버스 축소 |
+| 480px - 768px | 태블릿 | 터치 컨트롤 선택적 |
+| > 768px | 데스크톱 | 키보드 전용, 풀 캔버스 |
+
+---
+
+## 📐 CSS 변수 요약
+
+### 색상
+```css
+--color-primary: #00ff88
+--color-secondary: #ff6b6b
+--color-accent: #f0e130
+--color-bg: #1a1a2e
+--color-surface: #16213e
+```
+
+### 타이포그래피
+```css
+--font-pixel: 'Press Start 2P', monospace
+--font-base: 0.875rem (14px)
+--font-lg: 1rem (16px)
+--font-2xl: 1.5rem (24px)
+```
+
+### 스페이싱
+```css
+--space-4: 1rem (16px)
+--space-6: 1.5rem (24px)
+--space-8: 2rem (32px)
+```
+
+---
+
+## 🔜 05-task-management 스테이지 작업
+
+### 필수 산출물
+
+1. **tasks.md**
+   - 구현 태스크 분해
+   - 우선순위 지정 (P0, P1, P2)
+   - 의존성 정의
+
+2. **sprint-plan.md**
+   - 스프린트 계획
+   - 마일스톤 기반 배치
+
+3. **HANDOFF.md**
+
+### 태스크 분해 기준
+
+| 카테고리 | 예시 태스크 |
+|---------|-----------|
+| 설정 | 프로젝트 초기화, 타입 정의, 상수 정의 |
+| 훅 | useGameLoop, useKeyboard, useSwipe, useHighScore |
+| 엔진 | gameReducer, collision.ts, renderer.ts |
+| UI | CanvasLayer, ScoreBoard, GameOverModal, MobileControls |
+| 통합 | GameEngine, App |
+
+---
+
+## 📊 AI 호출 기록
+
+| AI | 시간 | 도구 | 결과 | 상태 |
+|----|------|------|------|------|
+| Gemini | 12:45 | tmux wrapper | UI/UX 설계 | ✅ |
+| ClaudeCode | 12:50 | - | wireframes.md 작성 | ✅ |
+| ClaudeCode | 12:52 | - | user_flows.md 작성 | ✅ |
+| ClaudeCode | 12:55 | - | design_system.md 작성 | ✅ |
+
+---
+
+## 🚀 다음 단계
+
+```bash
+# 다음 스테이지 실행
+/run-stage 05-task-management
+
+# 또는
+/tasks
+```
+
+---
+
+**생성자**: ClaudeCode + Gemini
+**검토자**: -
+**승인**: 대기

package/template/stages/04-ui-ux/HANDOFF.md.template

@@ -0,0 +1,92 @@
+# Stage Handoff: 04-ui-ux → 05-task-management
+
+**생성일**: {{TIMESTAMP}}
+**생성자**: Gemini
+**소요 시간**: {{DURATION}}
+
+---
+
+## 완료된 작업
+
+- [ ] 정보 아키텍처 정의
+- [ ] 와이어프레임 작성 ({{SCREEN_COUNT}}개 화면)
+- [ ] 사용자 플로우 정의 ({{FLOW_COUNT}}개)
+- [ ] 디자인 시스템 기초 수립
+- [ ] HANDOFF.md 생성
+
+---
+
+## 다음 에이전트를 위한 컨텍스트
+
+### 화면 목록
+
+| # | 화면 | 우선순위 | 복잡도 |
+|---|------|----------|--------|
+| 1 | {{SCREEN_1}} | Must | |
+| 2 | {{SCREEN_2}} | Must | |
+| 3 | {{SCREEN_3}} | Should | |
+
+### 컴포넌트 목록
+
+| 컴포넌트 | 변형 | 재사용성 |
+|----------|------|----------|
+| Button | Primary, Secondary, Ghost | High |
+| Input | Text, Password, Search | High |
+| Card | Default, Compact | Medium |
+
+### 디자인 토큰 요약
+- **Primary Color**: {{PRIMARY_COLOR}}
+- **Font Family**: {{FONT_FAMILY}}
+- **Base Spacing**: {{SPACING}}
+
+### 핵심 사용자 플로우
+1. {{FLOW_1}}
+2. {{FLOW_2}}
+3. {{FLOW_3}}
+
+---
+
+## 생성된 산출물
+
+| 파일 | 설명 |
+|------|------|
+| wireframes.md | 화면 와이어프레임 |
+| user_flows.md | 사용자 플로우 |
+| design_system.md | 디자인 시스템 |
+
+---
+
+## 05-task-management 스테이지 가이드
+
+### 즉시 실행할 작업
+1. 화면/컴포넌트 기반 태스크 분해
+2. 의존성 파악
+3. 스프린트 할당
+
+### 구현 우선순위 제안
+1. 공통 컴포넌트 (Button, Input, Card)
+2. 레이아웃 컴포넌트
+3. 핵심 화면 구현
+
+---
+
+## AI 호출 기록
+
+| AI | 호출 시간 | 프롬프트 | 결과 | 상태 |
+|----|----------|---------|------|------|
+| {{AI_1}} | {{TIME_1}} | {{PROMPT_1}} | {{OUTPUT_1}} | {{STATUS_1}} |
+| {{AI_2}} | {{TIME_2}} | {{PROMPT_2}} | {{OUTPUT_2}} | {{STATUS_2}} |
+
+> 설정: `config/ai_logging.yaml`
+
+---
+
+## 메타데이터
+
+```yaml
+stage: "04-ui-ux"
+status: "completed"
+next_stage: "05-task-management"
+models_used:
+  - gemini
+```

package/template/stages/04-ui-ux/config.yaml

@@ -0,0 +1,57 @@
+# Stage 04: UI/UX Planning Configuration
+
+stage:
+  id: "04-ui-ux"
+  name: "UI/UX Planning"
+  description: "사용자 인터페이스 및 경험 설계"
+
+models:
+  primary: "gemini"
+  secondary: null
+  collaboration: null
+
+execution:
+  mode: "plan"
+  container: false
+  sandbox: false
+  timeout: 3600
+
+inputs:
+  required:
+    - name: "../01-brainstorm/outputs/requirements_analysis.md"
+    - name: "../03-planning/outputs/architecture.md"
+    - name: "../03-planning/HANDOFF.md"
+  optional:
+    - name: "../01-brainstorm/outputs/personas.md"
+
+outputs:
+  required:
+    - name: "wireframes.md"
+    - name: "user_flows.md"
+    - name: "design_system.md"
+    - name: "HANDOFF.md"
+
+prompts:
+  - name: "wireframes"
+    file: "prompts/wireframes.md"
+    model: "gemini"
+  - name: "user_flows"
+    file: "prompts/user_flows.md"
+    model: "gemini"
+  - name: "design_system"
+    file: "prompts/design_system.md"
+    model: "gemini"
+
+completion:
+  checklist:
+    - "주요 화면 와이어프레임 5개 이상"
+    - "핵심 사용자 플로우 3개 이상"
+    - "디자인 시스템 기초 정의"
+    - "컴포넌트 목록 작성"
+
+transition:
+  next_stage: "05-task-management"
+  prerequisites:
+    - "03-planning"
+  handoff_required: true
+  checkpoint_required: false