aiwf 0.1.0 → 0.3.1

package/claude-code/aiwf/ko/.claude/commands/aiwf/aiwf_create_general_task.md

@@ -0,0 +1,147 @@
+# 일반 태스크 생성
+
+프로젝트 문서화 표준을 따라 `.aiwf/04_GENERAL_TASKS/`에 새로운 일반 태스크를 생성합니다.
+
+## 정확히 다음 10개 항목으로 할 일 목록을 생성하세요
+
+1. 태스크 인수 분석 및 태스크 ID 결정
+2. 프로젝트 컨텍스트 및 문서화 요구사항 로드
+3. 중복 작업이 없는지 확인
+4. 구현 컨텍스트를 위한 코드베이스 연구
+5. 표준 템플릿을 사용하여 태스크 파일 생성
+6. 적절한 컨텍스트로 태스크 세부사항 작성
+7. 기술 가이드라인 및 코드베이스 참조 추가
+8. 새 태스크로 프로젝트 매니페스트 업데이트
+9. 아키텍처와의 태스크 정렬 검증
+10. 최종 품질 검사 및 보고 수행
+
+## 모든 할 일 항목에 대한 세부사항
+
+### 1. 태스크 인수 분석 및 태스크 ID 결정
+
+인수 형식: `<태스크 제목 또는 설명>`
+
+- 인수가 비어있는 경우, 사용자에게 태스크 세부사항을 요청합니다
+- `.aiwf/04_GENERAL_TASKS/`의 기존 태스크를 확인하여 순차적 태스크 ID를 생성합니다
+- 가장 높은 태스크 번호(T###)를 찾아 1을 증가시킵니다
+- 형식: `T###_<태스크_제목_스네이크_케이스>.md`
+- **중요**: 태스크 ID는 빈 공간 없이 순차적이어야 합니다
+
+### 2. 프로젝트 컨텍스트 및 문서화 요구사항 로드
+
+**병렬 서브에이전트**를 사용하여 프로젝트 컨텍스트를 읽고 이해하세요:
+
+- `.aiwf/00_PROJECT_MANIFEST.md` 읽기 - 현재 프로젝트 상태 파악
+- `.aiwf/01_PROJECT_DOCS/ARCHITECTURE.md` 읽기 - 시스템 제약사항 이해
+- `.aiwf/01_PROJECT_DOCS/LONG_TERM_VISION.md` 읽기 - 미래 방향성 이해
+- `.aiwf/10_STATE_OF_PROJECT/`의 최신 파일들 읽기 - 현재 상태 검토
+- `.aiwf/05_ARCHITECTURE_DECISIONS/`에서 관련 ADR 스캔
+- **중요**: 일반 태스크는 문서화된 아키텍처와 일치해야 합니다
+
+### 3. 중복 작업이 없는지 확인
+
+**포괄적으로 검색**하여 중복 가능성을 찾으세요:
+
+- `.aiwf/04_GENERAL_TASKS/`의 모든 파일 확인
+- `.aiwf/03_SPRINTS/*/T*.md`의 스프린트 태스크 검색
+- 완료된 마일스톤에서 유사한 기능 찾기
+- **중요**: 중복이 발견되면 중단하고 파일 참조와 함께 사용자에게 보고
+
+### 4. 구현 컨텍스트를 위한 코드베이스 연구
+
+태스크 설명을 바탕으로 **병렬 서브에이전트**를 사용하여:
+
+- 태스크가 요구하는 것과 유사한 기존 패턴 검색
+- 영향을 받을 주요 인터페이스, 클래스 또는 모듈 식별
+- 코드베이스에서 유사한 구현 예제 찾기
+- 관련 테스트 패턴 및 기존 테스트 파일 위치 파악
+- 사용되는 오류 처리 및 로깅 패턴 발견
+- 기존 코드와의 통합 지점 매핑
+- **문서화**: 태스크에 포함할 모든 발견사항 기록
+
+### 5. 표준 템플릿을 사용하여 태스크 파일 생성
+
+`.aiwf/99_TEMPLATES/task_template.md`의 태스크 템플릿을 기본 구조로 **사용**하세요:
+
+- 템플릿 구조를 정확히 복사
+- 파일을 `.aiwf/04_GENERAL_TASKS/T###_<제목>.md`에 배치
+- 타임스탬프 포함: 생성 시간을 위해 `date '+%Y-%m-%d %H:%M:%S'` 실행
+- **중요**: 템플릿 구조를 정확히 따르세요 - 변경 없음
+
+### 6. 적절한 컨텍스트로 태스크 세부사항 작성
+
+태스크 파일을 다음 내용으로 채우세요:
+
+- **제목**: 명확하고 실행 가능한 태스크 이름
+- **컨텍스트**: 아키텍처 문서 및 프로젝트 상태에 연결
+- **요구사항**: 구체적이고 측정 가능한 결과
+- **승인 기준**: 완료에 대한 명확한 정의
+- **종속성**: 관련 스프린트/마일스톤 참조
+- **구현 노트**: 아키텍처와 일치하는 기술적 접근법
+- **중요**: 모든 내용은 기존 문서를 참조해야 합니다
+
+### 7. 기술 가이드라인 및 코드베이스 참조 추가
+
+**기술 가이드라인 섹션:**
+
+- 4단계에서 발견한 주요 인터페이스 및 통합 지점
+- 코드베이스의 구체적인 import 및 모듈 참조
+- 따라야 할 기존 패턴 (파일 참조 포함)
+- 작업할 데이터베이스 모델 또는 API 계약
+- 유사한 코드에서 사용되는 오류 처리 접근법
+- 코드베이스에서 발견된 테스트 패턴
+
+**구현 노트 섹션:**
+
+- 연구를 바탕으로 한 단계별 구현 접근법
+- 존중해야 할 주요 아키텍처 결정사항 (ADR 참조)
+- 수정하거나 확장할 구체적인 파일 및 함수
+- 기존 테스트 패턴을 바탕으로 한 테스트 접근법
+- 관련성이 있는 경우 성능 고려사항
+
+**중요**: 코드 예제를 포함하지 마세요. 구조적 가이드라인과 파일 참조만 제공하세요.
+
+### 8. 새 태스크로 프로젝트 매니페스트 업데이트
+
+`.aiwf/00_PROJECT_MANIFEST.md` **업데이트**:
+
+- "## 일반 태스크" 섹션에 태스크 추가
+- 형식: `- [ ] T###: [태스크 제목] - 상태: 시작되지 않음`
+- 알파벳/숫자 순서 유지
+- 태스크 파일에 링크: `[T###](04_GENERAL_TASKS/T###_제목.md)`
+- **중요**: 기존 내용을 모두 보존하세요
+
+### 9. 아키텍처와의 태스크 정렬 검증
+
+태스크 준수사항 **확인**:
+
+- 태스크가 아키텍처 원칙과 모순되지 않는지 확인
+- 구현 접근법이 확립된 패턴을 사용하는지 보장
+- 종속성이 존재하고 올바른지 검증
+- 태스크 범위가 적절한지 확인 (너무 광범위하거나 좁지 않게)
+- 기술 가이드라인이 기존 코드베이스 패턴과 일치하는지 확인
+- **중요**: 문서가 진실의 원천입니다 - 어떤 편차든 정당화가 필요합니다
+
+### 10. 최종 품질 검사 및 보고 수행
+
+**품질 검사**:
+
+- 태스크 파일이 템플릿을 완전히 따르는지 확인
+- 새로운 기술 가이드라인을 포함한 모든 섹션이 적절히 작성되었는지 확인
+- 문서 및 코드베이스에 대한 참조가 유효한지 확인
+- 태스크 ID가 순차적이고 고유한지 확인
+- 매니페스트가 올바르게 업데이트되었는지 확인
+- 기술 가이드라인이 실제 파일과 패턴을 참조하는지 확인
+- 범위 확장이나 아키텍처 위반이 없는지 확인
+
+**출력 형식**:
+
+```markdown
+✅ **생성**: T###\_<제목>.md
+📋 **유형**: 일반 태스크
+🎯 **목적**: [한 줄 요약]
+📚 **참조**: [주요 문서 링크]
+🔧 **주요 통합 지점**: [수정할 주요 파일/모듈]
+🧪 **테스트 접근법**: [따를 테스트 패턴]
+⏭️ **다음 단계**: 태스크 세부사항을 검토하고 `/do_task T###`를 실행하여 시작하세요
+```

package/claude-code/aiwf/ko/.claude/commands/aiwf/aiwf_create_milestone_plan.md

@@ -0,0 +1,194 @@
+# 신규 마일스톤 계획 및 생성
+
+상호작용적이고 적응적인 프로세스를 통해 적절한 구조, 문서화, 프로젝트 통합을 갖춘 새로운 마일스톤을 생성합니다.
+
+## 정확히 다음 8개 항목으로 할 일 목록을 생성하세요
+
+1. 인수 분석 및 프로젝트 컨텍스트 파악
+2. 상호작용적 마일스톤 범위 및 정의
+3. 마일스톤 구조 및 명명 결정
+4. 마일스톤 디렉토리 및 메타 파일 생성
+5. 지원 문서 생성 가이드
+6. 마일스톤으로 프로젝트 매니페스트 업데이트
+7. 마일스톤 일관성 및 정렬 검증
+8. 마일스톤 생성 및 다음 단계 보고
+
+---
+
+## 1. 인수 분석 및 프로젝트 컨텍스트 파악
+
+**중요**: 추가 인수가 제공됩니다: <$ARGUMENTS>
+
+**병렬 서브에이전트**를 사용하여 다음 작업을 수행하세요:
+
+- 제안된 마일스톤 이름/초점에 대한 인수 분석 (기본값은 대화형 생성)
+- `.aiwf/00_PROJECT_MANIFEST.md`를 읽어 현재 프로젝트 상태 파악
+- `.aiwf/02_REQUIREMENTS/`를 스캔하여 기존 마일스톤과 번호 체계 식별
+- `.aiwf/01_PROJECT_DOCS/ARCHITECTURE.md`를 읽어 프로젝트 범위 이해
+- `.aiwf/10_STATE_OF_PROJECT/`의 최신 프로젝트 리뷰를 확인하여 현재 상태 파악
+- **중요**: 프로젝트 단계를 이해하고 논리적으로 다음에 와야 할 마일스톤 파악
+
+## 2. 상호작용적 마일스톤 범위 및 정의
+
+**대화형 마일스톤 정의:**
+
+인수가 제공된 경우:
+
+- "다음을 위한 마일스톤을 생성하고자 하시는군요: [인수]"
+- "범위를 더 잘 이해해보겠습니다..."
+
+인수가 없는 경우:
+
+- "현재 프로젝트 상태를 바탕으로 다음 마일스톤을 정의해보겠습니다"
+- "현재 [현재 마일스톤]에 있는 것으로 보입니다 - 다음에는 무엇에 집중해야 할까요?"
+
+**상호작용 질문 (컨텍스트에 따라 조정):**
+
+- "이 마일스톤의 주요 목표는 무엇인가요?"
+- "완료되어야 할 핵심 결과물은 무엇인가요?"
+- "특정한 기술적 도전이나 요구사항이 있나요?"
+- "이 마일스톤이 프로젝트를 장기 비전으로 어떻게 발전시킬까요?"
+- "이 마일스톤의 '완료'는 어떤 모습일까요?"
+
+**대화형이고 적응적으로 유지** - 심문하지 말고 필요한 것만 수집하세요
+
+## 3. 마일스톤 구조 및 명명 결정
+
+**마일스톤 세부사항 생성:**
+
+- 기존 마일스톤을 스캔하여 다음 마일스톤 번호 (M##) 결정
+- 사용자 입력에서 설명적 마일스톤 이름 생성
+- 형식: `M##_마일스톤_이름_스네이크_케이스`
+- **중요**: 중복된 마일스톤 번호가 없도록 보장
+- AIWF 규칙을 따르는 명명 검증 (밑줄, 공백 없음)
+
+**사용자와 확인:**
+
+- "마일스톤을 생성하겠습니다: M##\_[이름] - 괜찮으신가요?"
+- 필요시 사용자가 이름이나 번호를 조정할 수 있도록 허용
+
+## 4. 마일스톤 디렉토리 및 메타 파일 생성
+
+**마일스톤 구조 생성:**
+
+- 디렉토리 생성: `.aiwf/02_REQUIREMENTS/M##_마일스톤_이름/`
+- `.aiwf/99_TEMPLATES/milestone_meta_template.md`에서 템플릿 복사
+- 마일스톤 메타 파일 생성: `M##_milestone_meta.md`
+
+**마일스톤 메타 파일 채우기:**
+
+- YAML 프론트매터 작성:
+  - `milestone_id: M##`
+  - `title: [마일스톤 이름]`
+  - `status: pending`
+  - `last_updated: [현재 타임스탬프 YYYY-MM-DD HH:MM]`
+- 사용자 입력을 구조화된 섹션으로 변환:
+  - **목표**: 사용자 논의에서 명확한 목적
+  - **핵심 문서**: PRD 및 SPECS 파일 플레이스홀더
+  - **완료 정의**: 사용자 입력에서 구체적이고 측정 가능한 기준
+  - **노트/컨텍스트**: 사용자 논의에서 추가 컨텍스트
+
+## 5. 지원 문서 생성 가이드
+
+**상호작용적 문서 계획:**
+
+마일스톤 범위를 기반으로 필요한 문서 제안:
+
+- "이 마일스톤에는 다음이 필요할 것 같습니다:"
+- "□ PRD\_[마일스톤_이름].md - 제품 요구사항"
+- "□ SPECS\_[기술_영역].md - 기술 사양"
+- "□ 도메인별 문서"
+
+**사용자에게 문의:**
+
+- "지금 이 문서들의 시작 템플릿을 만들어드릴까요?"
+- "아니면 필요에 따라 수동으로 만드시겠어요?"
+
+**사용자가 템플릿 생성을 원하는 경우:**
+
+- 마일스톤별 섹션이 포함된 기본 PRD 템플릿 생성
+- 기술 마일스톤인 경우 SPECS 템플릿 생성
+- 문서 간 적절한 상호참조 포함
+- **중요**: 과도하게 엔지니어링하지 말고 유용한 시작점 생성
+
+**사용자가 수동을 선호하는 경우:**
+
+- 마일스톤 메타에 예상되는 문서 기록
+- 언제/어떻게 생성할지에 대한 가이드 제공
+
+## 6. 마일스톤으로 프로젝트 매니페스트 업데이트
+
+`.aiwf/00_PROJECT_MANIFEST.md` **업데이트**:
+
+- 마일스톤 섹션에 마일스톤 추가:
+  - 형식: `- [ ] M##: [마일스톤 이름] - 상태: 계획 중`
+  - 링크: `[M##](02_REQUIREMENTS/M##_마일스톤_이름/M##_milestone_meta.md)`
+- 프로젝트 메타데이터 업데이트:
+  - 활성 마일스톤인 경우 `current_milestone` 설정
+  - `highest_milestone` 번호 업데이트
+  - `last_updated` 타임스탬프 업데이트
+- **중요**: 모든 기존 내용과 형식 보존
+
+## 7. 마일스톤 일관성 및 정렬 검증
+
+마일스톤 품질 **확인**:
+
+- 마일스톤이 프로젝트 아키텍처 및 비전과 일치하는지 확인
+- 완료 정의가 구체적이고 측정 가능한지 보장
+- 마일스톤 범위가 적절한지 검증 (너무 광범위하거나 좁지 않게)
+- 마일스톤이 명시된 목표를 향해 프로젝트를 발전시키는지 확인
+- 마일스톤 번호 및 명명이 규칙을 따르는지 확인
+- 생성된 모든 파일이 템플릿 구조를 따르는지 검증
+- **중요**: 마일스톤은 독립적으로 가치 있고 달성 가능해야 함
+
+**고려사항**:
+
+- 현재 프로젝트 상태를 고려할 때 이 마일스톤이 의미가 있는가?
+- 목표가 현실적이고 잘 범위가 정해져 있는가?
+- 완료 정의가 언제 완료되었는지 알 수 있을 만큼 명확한가?
+- 이 마일스톤이 향후 마일스톤을 논리적으로 설정하는가?
+
+## 8. 마일스톤 생성 및 다음 단계 보고
+
+**출력 형식**:
+
+```markdown
+✅ **마일스톤 생성됨**: M##\_[마일스톤_이름]
+
+📋 **마일스톤 세부사항**:
+
+- ID: M##
+- 제목: [마일스톤 이름]
+- 상태: 계획 중
+- 초점: [주요 목표의 한 줄 요약]
+
+📚 **생성된 문서**:
+
+- 마일스톤 메타: `02_REQUIREMENTS/M##_[이름]/M##_milestone_meta.md`
+- [생성된 추가 문서들]
+
+🎯 **완료 정의**:
+
+- [마일스톤의 핵심 DoD 기준]
+
+📈 **프로젝트 영향**:
+
+- 프로젝트를 M[이전]에서 M##로 업데이트
+- 다음을 향한 발전: [프로젝트 비전 정렬]
+
+⏭️ **권장 다음 단계**:
+
+- 마일스톤 세부사항 검토: `02_REQUIREMENTS/M##_[이름]/M##_milestone_meta.md`
+- 계획된 대로 지원 문서 생성
+- 스프린트로 분해: `/project:aiwf:create_sprints_from_milestone M##`
+- 명확해지는 대로 구체적인 요구사항으로 업데이트
+
+🎯 **개발 준비**: 구현 계획을 시작할 준비가 되면 `/project:aiwf:create_sprints_from_milestone M##` 사용
+```
+
+**중요 참고사항**:
+
+- 마일스톤 범위는 집중되고 달성 가능하게 유지
+- 완료 정의는 측정 가능해야 함
+- 지원 문서는 필요에 따라 생성 가능
+- 마일스톤 계획은 반복적 - 더 많이 배우면서 개선

package/claude-code/aiwf/ko/.claude/commands/aiwf/aiwf_create_prd.md

@@ -0,0 +1,280 @@
+# Generate Product Documentation Workflow
+
+이 규칙은 AI가 몇 가지 핵심 질문을 통해 입력을 수집한 뒤, PRD → IA → UCD → UI/UX 문서를 **순차적으로** 생성하도록 안내합니다. 모든 출력은 **Markdown** 형식을 사용하며 **한국어**로 작성됩니다.
+
+---
+
+## 1. 질문 단계
+
+AI는 다음 정보를 **질문**을 통해 사용자에게서 수집합니다.
+
+1. `<product-overview>`
+2. `<references>` (URL 목록)
+3. `<must-features>` (필수 기능 목록)
+4. `<target-user-persona>`
+5. `<target-platforms>`
+6. `<storage-type>`
+7. `<tech-stack>`
+
+> ⚠️ 모든 질문은 한글로 하며, 필요 시 추가적인 참고 서비스·경쟁 제품 정보를 요청합니다.
+
+---
+
+## 2. PRD 작성 단계
+
+사용자로부터 모든 입력을 받은 뒤, 아래 **샘플 프롬프트** 구조를 참고하여 PRD를 생성합니다.
+
+```prompt
+Write a PRD document based on the following information:
+<product-overview>
+${productOverview}
+</product-overview>
+<references>
+${references}
+</references>
+<must-features>
+${mustFeatures}
+</must-features>
+<target-user-persona>
+${persona}
+</target-user-persona>
+<target-platforms>
+${platforms}
+</target-platforms>
+<storage-type>
+${storageType}
+</storage-type>
+<tech-stack>
+${techStack}
+</tech-stack>
+PRD must include the following contents:
+<table-of-contents>
+- Detailed product description
+- Reference Services with detailed rationale
+- Core features and specifications
+- Suggested additional features
+- User persona and scenarios
+- Technical stack recommendations
+</table-of-contents>
+<response-format>
+Use markdown format
+</response-format>
+<guidelines>
+- Use tables or lists where appropriate to organize information systematically.
+- All user interactions, including inputs and outputs, must be in Korean.
+- Provide accurate answers with reliable references
+- Write in Korean
+- Clearly separate each section
+- Collect additional reference services and provide detailed rationale
+- Do not include detailed data structure and storage design
+</guidelines>
+```
+
+문서에 포함해야 할 **추가 지침**:
+
+- 표와 리스트를 활용해 정보를 구조화할 것.
+- 참고 서비스는 최소 3개 이상, 각 서비스 사용 이유를 2~3줄로 기술.
+
+PRD 작성을 완료하면 "✅ PRD 완료" 메시지와 함께 IA 단계 진행 여부를 묻는 **한글** 질문을 덧붙입니다.
+
+---
+
+## 3. IA(Information Architecture) 작성 단계
+
+사용자가 **계속**을 선택하면 IA 문서를 생성합니다.
+
+IA 문서는 다음을 포함합니다:
+
+1. **사이트맵** – 트리 형태로 표현
+2. **콘텐츠 인벤토리** – 페이지별 주요 콘텐츠 표
+3. **사용자 흐름** – 순서도(텍스트 기반)로 최소 2개 핵심 시나리오 제공
+4. **내비게이션 구조 및 URL 패턴**
+
+문서 형식: Markdown, 한국어
+
+### IA 샘플 프롬프트
+
+```prompt
+Write an Information Architecture document based on PRD, and following information:
+<navigation-type>
+${navigationType}
+</navigation-type>
+<auth-type>
+${authType}
+</auth-type>
+IA document must include the following contents:
+<table-of-contents>
+- Site Map
+- User Flow
+- Navigation Structure
+- Page Hierarchy
+- Content Organization
+- Interaction Patterns
+- URL Structure
+- Component Hierarchy
+</table-of-contents>
+<response-format>
+Use markdown format
+</response-format>
+<guidelines>
+- Use tables or lists where appropriate to organize information systematically
+- All user interactions, including inputs and outputs, must be in Korean
+- Provide accurate answers with reliable references
+- Write in Korean
+- Clearly separate each section
+- Consider user experience and accessibility
+- Include responsive design considerations
+- Consider SEO best practices
+</guidelines>
+```
+
+IA 작성 후 "✅ IA 완료" 메시지와 함께 UCD 단계 진행 여부 질의.
+
+---
+
+## 4. UCD(User-Centered Design) 작성 단계
+
+UCD 문서는 다음을 포함합니다:
+
+1. **주요 페르소나 2–3개** – 표로 정리 (목표, 동기, pain point)
+2. **시나리오** – 페르소나별 핵심 사용 시나리오 2개 이상
+3. **요구사항 매트릭스** – 기능 ↔ 페르소나 매핑
+
+문서 형식: Markdown, 한국어
+
+### UCD 샘플 프롬프트
+
+```prompt
+Write a detailed use case document based on PRD, IA, and following information:
+Use case document must include the following contents:
+<table-of-contents>
+- Actor Definitions
+- Use Case Scenarios
+- Main Steps
+- Exception Handling
+- Comprehensive Actor Definitions
+- Detailed Use Case Scenarios
+- Main Steps and Flow of Events
+- Alternative Flows and Edge Cases
+- Preconditions and Postconditions
+- Business Rules and Constraints
+- Exception Handling Procedures
+- User Interface Considerations
+- Data Requirements and Data Flow
+- Security and Privacy Considerations
+</table-of-contents>
+<response-format>
+Use markdown format
+</response-format>
+<guidelines>
+- Use tables or lists where appropriate to organize information systematically
+- All user interactions, including inputs and outputs, must be in Korean
+- Provide accurate answers with reliable references
+- Write in Korean
+- Clearly separate each section
+- Include detailed step-by-step descriptions
+- Consider error cases and alternative flows
+- Include technical considerations
+</guidelines>
+```
+
+완료 후 "✅ UCD 완료" 메시지와 함께 UI/UX 단계 진행 여부 질의.
+
+---
+
+## 5. UI/UX 가이드 작성 단계
+
+내용:
+
+1. **와이어프레임 설명** – 각 핵심 화면의 레이아웃과 구성 요소(텍스트 설명)
+2. **네비게이션 원칙** – 일관된 UI 패턴 설명
+3. **스타일 가이드 초안** – 컬러 팔레트, 타이포그래피, 컴포넌트 규칙
+4. **접근성 고려사항** – WCAG 2.1 준수 핵심 포인트
+
+문서 형식: Markdown, 한국어
+
+### UI/UX 샘플 프롬프트
+
+```prompt
+<role>
+senior UI/UX designer.
+</role>
+<task>
+Write a comprehensive UI/UX design guide based on the following information:
+</task>
+<design-preferences>
+Theme details: Please analyze the reference service and suggest appropriate:
+- Design style
+- Color scheme
+- Primary colors
+</design-preferences>
+<references>
+${references}
+</references>
+<additional-instructions>
+Please analyze the reference service's design system and suggest appropriate:
+- Overall design style and patterns
+- Color scheme and palette
+- Primary colors
+- Mood and atmosphere
+</additional-instructions>
+Design guide must include the following contents:
+<table-of-contents>
+- Design System Overview
+- Color Palette for tailwindcss (primary, secondary, accent, neutral, etc.)
+- Page Implementations
+  detailed design guide for each pages
+  - core purpose of the page
+  - key components
+  - layout structure
+- Layout Components
+  - applicable routes
+  - core components
+  - responsive behavior
+- Interaction Patterns
+- Breakpoints
+</table-of-contents>
+<breakpoints>
+$breakpoints: (
+├── 'mobile': 320px,
+├── 'tablet': 768px,
+├── 'desktop': 1024px,
+└── 'wide': 1440px
+);
+</breakpoints>
+<response-format>
+Use markdown format
+</response-format>
+<guidelines>
+- Use tables or lists where appropriate to organize information systematically
+- All descriptions must be in Korean
+- Considering color scheme, select proper color for each color in tailwindcss palette
+- Provide specific color codes
+- Provide rationale for design decisions
+- Always include responsive design considerations
+- Include all text content in UI
+- If needed, use enough images in each components
+- provide each image's url. Use stock photos from picsum.photos where appropriate, only valid URLs you know exist
+- Write in Korean
+- must handle root route
+- consider proper grid system for all components
+</guidelines>
+```
+
+완료 후 "🎉 모든 문서 생성 완료" 메시지와 함께 다음 단계(스프린트/태스크 분해) 안내.
+
+---
+
+## 6. 스프린트/태스크 분해 준비
+
+모든 문서가 완료되면, AI는 `yolo` 또는 `create_sprints_from_milestone` 명령을 사용해 개발 스프린트와 태스크를 자동으로 생성할 수 있음을 사용자에게 알립니다.
+
+---
+
+### 사용 예
+
+1. AI → 질문 단계 진행
+2. 사용자 → 정보 제공
+3. AI → PRD 생성, IA 진행 여부 질문
+4. 사용자 → "계속"
+5. AI → IA 생성, UCD 진행 여부 질문 … 반복