screen-spec

# Screen Spec Skill `/screen-spec` 명령어의 실행 엔진. PRD를 읽어 화면정의서 5종을 생성한다. ## 핵심 원칙 - **PRD 단일 진실원**: Role Key, FR ID, 페이지 Route, 상태 매트릭스는 모두 PRD에서 인용. 추측 금지 - **순차 의존**: IA → User Flow → Screen Spec → Wireframe → Dev Handoff. 이전 단계 누락 시 stop - **로파이 와이어프레임**: 픽셀 정밀 디자인이 아닌 레이아웃 + 컴포넌트 배치 검증용 - **wigtn-coding 자산 활용**: design-discovery (스타일), frontend-developer (리뷰)와 통합 - **차단보다 보강**: 입력 부족 시 사용자에게 명확한 보완 지시를 주고 stop ## 입력 / 출력 ### 입력 - `docs/prd/PRD_<feature>.md` (필수) - 옵션: `--style=<name>`, `--skip-style`, `--pages=<list>` ### 출력 디렉토리: `docs/prd/screens/<feature>/` ``` docs/prd/screens/<feature>/ ├── 01-IA.md # 정보구조도 (Mermaid mindmap + 매핑 테이블) ├── 02-USER-FLOW.md # 상세 플로우 (분기 조건 명시) ├── 03-SCREEN-SPEC.md # 화면별 명세 (Audience/Auth/States/Components/Microcopy/Responsive) ├── 04-WIREFRAME.html # 단일 HTML, Tailwind CDN, anchor 네비, 선택 스타일 반영 └── 05-DEV-HANDOFF.md # FR ↔ 화면 ↔ 컴포넌트 매핑, /implement 입력 ``` ## 5-Phase 워크플로우 ``` LOAD → STYLE → GENERATE × 5 → REVIEW → HANDOFF ``` ### Phase 1: LOAD (PRD 파싱) 1. `docs/prd/PRD_<feature>.md` Read 2. 추출 항목: ```yaml roles: [author, admin] # §2.3 pages: # §5.4 (Has FE Components: Yes만) - route: / audience: [guest, author] auth: optional linked_frs: [FR-001] primary_state: success responsive: [Desktop, Mobile] page_states: # §5.4.1 /: [loading, error, success] /submit: [loading...