Files
game-fe-agent/.claude/skills/plan-analyzer/SKILL.md

171 lines
6.5 KiB
Markdown

---
name: plan-analyzer
description: |
PPT 기획서를 분석하여 요구사항 명세서를 자동 생성합니다.
Nuxt pages 라우팅 구조, 컴포넌트 트리, API 엔드포인트 목록,
화면 전환 플로우(Mermaid)를 구조화된 마크다운 문서로 출력합니다.
다음 상황에서 반드시 사용하세요:
- "기획서 분석해줘", "PPT 파싱", "요구사항 정리해줘"
- "라우팅 구조 뽑아줘", "컴포넌트 트리 만들어줘"
- "API 목록 정리", "화면 플로우 그려줘"
- `.pptx` 파일 경로를 제공받고 개발 요구사항 추출을 요청받았을 때
permissions:
allow:
- Bash(python3 -c "import pptx"*)
- Bash(python3*extract_pptx.py*)
---
# 요구사항 분석기 (Requirement Analyzer)
이 skill 은 PPT 기획서(`.pptx`)를 파싱하여 팀 전체가 동일한 기반으로 개발에 착수할 수 있는
구조화된 요구사항 명세서를 자동으로 생성합니다.
## 언제 사용하는가
- 기획팀에서 PPT 기획서를 전달받았을 때
- 개발 착수 전 화면 목록 / 라우팅 / API 목록을 정리해야 할 때
- 화면 전환 플로우를 다이어그램으로 시각화해야 할 때
---
## 작업 순서
### Phase 1: 파일 확인 및 추출
1. **파일 경로 확인**
- 사용자가 PPTX 파일 경로를 제공했는지 확인한다.
- 미제공 시: 파일 경로를 먼저 요청한다.
2. **의존성 확인**
스킬 디렉토리 기준 스크립트를 실행하기 전, `python-pptx` 설치 여부를 확인한다.
```bash
python3 -c "import pptx" 2>/dev/null && echo "OK" || echo "MISSING"
```
- `MISSING` 출력 시: 아래 메시지를 사용자에게 안내한다.
```
⚠️ python-pptx 패키지가 필요합니다.
설치 명령어: pip3 install python-pptx
또는 자동 설치: python3 scripts/extract_pptx.py --auto-install <파일경로>
```
3. **PPTX 추출 실행**
```bash
python3 <skill-dir>/scripts/extract_pptx.py --extract-images "<pptx경로>"
```
- `--extract-images`: 슬라이드 이미지(PNG)를 임시 디렉토리에 추출 → 시각 분석에 활용
- 출력: JSON 형태의 슬라이드 데이터 (슬라이드별 제목, 텍스트, 노트, 도형, 테이블, 이미지 경로)
4. **결과 확인**
- JSON 파싱 성공 여부 확인
- 추출된 이미지가 있으면 각 슬라이드별로 순서대로 열어 와이어프레임/목업 시각 분석
---
### Phase 2: 내용 분석
추출된 JSON 데이터와 슬라이드 이미지를 기반으로 아래 항목을 분석한다.
#### 화면(페이지) 식별
- 슬라이드 제목에서 "화면", "페이지", 경로(`/`로 시작), URL 패턴 찾기
- 와이어프레임 이미지에서 GNB, 레이아웃 영역 확인
- 중복 레이아웃 슬라이드(상세 설명용) vs 독립 화면 구분
#### UI 컴포넌트 패턴 식별
- 반복 등장하는 도형 레이블 (예: "GNB", "Footer", "Card", "Modal", "Tab")
- 슬라이드 간 동일한 레이아웃 구조 → 공통 컴포넌트 후보
- 이미지에서 시각적으로 동일한 UI 블록
#### 네비게이션 플로우 추론
- 화살표/커넥터 도형으로 연결된 화면 간 전환
- "클릭 시", "탭하면", "→" 등의 텍스트 주석
- 슬라이드 번호 순서 + 제목 키워드로 흐름 유추
#### API 엔드포인트 추출
- 테이블에 "Method", "URL", "API", "Endpoint" 컬럼이 있는 경우
- 발표자 노트에 `GET /api/...`, `POST /api/...` 형태의 텍스트
- 텍스트 박스 내 `http`, `/api`, `fetch`, `axios` 언급
---
### Phase 3: 명세서 생성
아래 7개 섹션으로 구성된 마크다운 문서를 작성한다.
추론 기반 정보는 반드시 `(추정)` 또는 `<확인 필요>` 를 표시한다.
**출력 섹션:**
```
1. 화면 목록 (Pages) — 테이블 형식
2. Nuxt 라우팅 구조 — pages/ 파일 트리
3. 컴포넌트 트리 — components/ 파일 트리 + Props 상세 테이블
4. API 엔드포인트 목록 — 테이블 형식
5. 화면 전환 플로우 — Mermaid flowchart TD
6. 공통 레이아웃 — 레이아웃별 적용 화면 테이블
7. 추가 참고사항 — 미확정 항목 / 확인 필요 목록
```
출력 형식 상세는 `references/output-template.md` 를 참조한다.
---
### Phase 4: 사용자 확인 및 저장
1. **미리보기 제공**
생성된 명세서 전체를 출력하여 사용자가 검토할 수 있도록 한다.
2. **저장 경로 확인**
```
📄 아래 경로에 요구사항 명세서를 저장하려고 합니다:
docs/requirements/<기획서파일명>.md
다른 경로를 원하시면 알려주세요. 진행할까요? (y/n)
```
3. **파일 저장**
- 사용자 승인 후 파일을 저장한다.
- `docs/requirements/` 디렉토리가 없으면 생성한다.
- 저장 완료 후 아래 메시지를 출력한다:
```
✅ 요구사항 명세서 저장 완료
docs/requirements/<파일명>.md
다음 단계:
1) <확인 필요> 항목을 기획자에게 확인하세요.
2) 컴포넌트/API 목록을 개발 태스크로 분해하세요.
3) git add docs/requirements/ && git commit -m "docs: 요구사항 명세서 추가"
```
---
## 출력 형식
`references/output-template.md` 에서 전체 마크다운 구조와 예시를 확인하세요.
### Mermaid 플로우차트 작성 규칙
```mermaid
flowchart TD
A[메인] --> B[이벤트 목록]
B --> C[이벤트 상세]
C --> D{사전등록 완료?}
D -- 완료 --> E[완료 모달]
D -- 미완료 --> F[사전등록 폼]
```
- 화면 노드: `[화면명]` (사각형)
- 조건 분기: `{조건}` (다이아몬드)
- 모달/팝업: `([모달명])` (타원)
- 화살표 레이블: 클릭 대상 버튼명 또는 조건
---
## 주의사항
- **기존 파일 수정 금지**: 프로젝트의 기존 소스 파일은 절대 수정하지 않는다. 명세서 파일만 새로 생성한다.
- **추측 표시 필수**: 기획서에 명시되지 않은 정보를 추론할 경우 반드시 `(추정)` 을 표시한다.
- **확인 필요 목록**: 확신할 수 없는 항목은 섹션 7에 `<확인 필요>` 로 모아 명시한다.
- **이미지 heavy 기획서**: 텍스트가 적고 이미지 위주인 기획서는 `--extract-images` 옵션이 필수다.
- **대용량 PPTX**: 슬라이드가 50장 이상이면 `--slides 1-20` 으로 범위를 지정하여 순차 처리한다.
- **커밋 금지**: 파일 저장 후 `git commit` 은 사용자 명시 요청이 없으면 실행하지 않는다.