gil/game-fe-agent

Fork 0

Files

gil 607ef1a435 ✨ feat: 새로운 스킬 및 문서 추가 (EDM HTML, 요구사항 분석기, 번역 코드 생성기)

2026-05-13 00:28:01 +09:00

6.5 KiB

Raw Blame History

name, description, permissions

name

description

permissions

plan-analyzer

PPT 기획서를 분석하여 요구사항 명세서를 자동 생성합니다. Nuxt pages 라우팅 구조, 컴포넌트 트리, API 엔드포인트 목록, 화면 전환 플로우(Mermaid)를 구조화된 마크다운 문서로 출력합니다. 다음 상황에서 반드시 사용하세요: - "기획서 분석해줘", "PPT 파싱", "요구사항 정리해줘" - "라우팅 구조 뽑아줘", "컴포넌트 트리 만들어줘" - "API 목록 정리", "화면 플로우 그려줘" - `.pptx` 파일 경로를 제공받고 개발 요구사항 추출을 요청받았을 때

allow

Bash(python3 -c "import pptx"*)

Bash(python3*extract_pptx.py*)

요구사항 분석기 (Requirement Analyzer)

이 skill 은 PPT 기획서(.pptx)를 파싱하여 팀 전체가 동일한 기반으로 개발에 착수할 수 있는 구조화된 요구사항 명세서를 자동으로 생성합니다.

언제 사용하는가

기획팀에서 PPT 기획서를 전달받았을 때
개발 착수 전 화면 목록 / 라우팅 / API 목록을 정리해야 할 때
화면 전환 플로우를 다이어그램으로 시각화해야 할 때

작업 순서

Phase 1: 파일 확인 및 추출

파일 경로 확인
- 사용자가 PPTX 파일 경로를 제공했는지 확인한다.
- 미제공 시: 파일 경로를 먼저 요청한다.

의존성 확인 스킬 디렉토리 기준 스크립트를 실행하기 전, python-pptx 설치 여부를 확인한다.

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 <파일경로>

PPTX 추출 실행
```
python3 <skill-dir>/scripts/extract_pptx.py --extract-images "<pptx경로>"
```
- --extract-images: 슬라이드 이미지(PNG)를 임시 디렉토리에 추출 → 시각 분석에 활용
- 출력: JSON 형태의 슬라이드 데이터 (슬라이드별 제목, 텍스트, 노트, 도형, 테이블, 이미지 경로)
결과 확인
- 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: 사용자 확인 및 저장

미리보기 제공 생성된 명세서 전체를 출력하여 사용자가 검토할 수 있도록 한다.

저장 경로 확인

📄 아래 경로에 요구사항 명세서를 저장하려고 합니다:
  docs/requirements/<기획서파일명>.md

다른 경로를 원하시면 알려주세요. 진행할까요? (y/n)

파일 저장

사용자 승인 후 파일을 저장한다.
docs/requirements/ 디렉토리가 없으면 생성한다.

저장 완료 후 아래 메시지를 출력한다:

✅ 요구사항 명세서 저장 완료
  docs/requirements/<파일명>.md

다음 단계:
  1) <확인 필요> 항목을 기획자에게 확인하세요.
  2) 컴포넌트/API 목록을 개발 태스크로 분해하세요.
  3) git add docs/requirements/ && git commit -m "docs: 요구사항 명세서 추가"

출력 형식

references/output-template.md 에서 전체 마크다운 구조와 예시를 확인하세요.

Mermaid 플로우차트 작성 규칙

flowchart TD
    A[메인] --> B[이벤트 목록]
    B --> C[이벤트 상세]
    C --> D{사전등록 완료?}
    D -- 완료 --> E[완료 모달]
    D -- 미완료 --> F[사전등록 폼]

화면 노드: [화면명] (사각형)
조건 분기: {조건} (다이아몬드)
모달/팝업: ([모달명]) (타원)
화살표 레이블: 클릭 대상 버튼명 또는 조건

주의사항

기존 파일 수정 금지: 프로젝트의 기존 소스 파일은 절대 수정하지 않는다. 명세서 파일만 새로 생성한다.
추측 표시 필수: 기획서에 명시되지 않은 정보를 추론할 경우 반드시 (추정) 을 표시한다.
확인 필요 목록: 확신할 수 없는 항목은 섹션 7에 <확인 필요> 로 모아 명시한다.
이미지 heavy 기획서: 텍스트가 적고 이미지 위주인 기획서는 --extract-images 옵션이 필수다.
대용량 PPTX: 슬라이드가 50장 이상이면 --slides 1-20 으로 범위를 지정하여 순차 처리한다.
커밋 금지: 파일 저장 후 git commit 은 사용자 명시 요청이 없으면 실행하지 않는다.

6.5 KiB Raw Blame History