screen-spec

Name: screen-spec
Author: wigtn

45stars2forks

How to install screen-spec?

wigtn/wigtn-plugins/screen-spec

$npx -y skills add wigtn/wigtn-plugins --skill screen-spec

Installs into the current project.

Summary

PRD를 입력으로 화면정의서 5종(IA, User Flow, Screen Spec, Wireframe HTML, Dev Handoff)을 순차 생성한다. Wireframe은 흑백 + 의미색만 사용하는 lo-fi 산출물(스타일/브랜드는 별도 단계). frontend-developer 자동 리뷰 지원. /screen-spec 명령어에서 호출되며, /prd → /implement 사이의 선택적 게이트로 동작한다.

Files · 1

View on GitHub

SKILL.md

1	# Screen Spec Skill
2
3	`/screen-spec` 명령어의 실행 엔진. PRD를 읽어 화면정의서 5종을 생성한다.
4
5	## 핵심 원칙
6
7	- PRD 단일 진실원: Role Key, FR ID, 페이지 Route, 상태 매트릭스는 모두 PRD에서 인용. 추측 금지
8	- 순차 의존: IA → User Flow → Screen Spec → Wireframe → Dev Handoff. 이전 단계 누락 시 stop
9	- 로파이 와이어프레임: 흑백 + 의미색(빨강=error, 초록=success, 노랑=warning, 회색=중립)만 사용. 컬러/타이포/브랜드 결정은 다음 단계(mockup/`/implement` 직전 스타일 선택)에서 다룸
10	- wigtn-plugins 자산 활용: frontend-developer (리뷰)와 통합
11	- 차단보다 보강: 입력 부족 시 사용자에게 명확한 보완 지시를 주고 stop
12
13	## 입력 / 출력
14
15	### 입력
16	- `docs/prd/PRD_<feature>.md` (필수)
17	- 옵션: `--interview` (디테일 보강 Q&A), `--platform=web\|mobile` (기본 web), `--pages=<list>`
18
19	### 출력 디렉토리: `docs/prd/screens/<feature>/`
20
21	```
22	docs/prd/screens/<feature>/
23	├── 01-IA.md # 정보구조도 (Mermaid flowchart LR + 매핑 테이블)
24	├── 02-USER-FLOW.md # 상세 플로우 (분기 조건 명시)
25	├── 03-SCREEN-SPEC.md # 화면별 명세 (Audience/Auth/States/Components/Microcopy/Responsive)
26	├── 04-WIREFRAME.html # 단일 HTML, Tailwind CDN, anchor 네비, 흑백+의미색만
27	└── 05-DEV-HANDOFF.md # FR ↔ 화면 ↔ 컴포넌트 매핑, /implement 입력
28	```
29
30	## 워크플로우
31
32	```
33	LOAD → [INTERVIEW?] → GENERATE × 5 → REVIEW → HANDOFF
34	```
35
36	`--interview` 플래그가 주어지면 LOAD 직후 단일 턴 배치 질문 단계가 들어간다. 기본은 PRD 추론 모드.
37
38	### Phase 1: LOAD (PRD 파싱)
39
40	1. `docs/prd/PRD_<feature>.md` Read
41	2. 추출 항목:
42	```yaml
43	roles: [author, admin] # §2.3
44	pages: # §5.4 (Has FE Components: Yes만)
45	- route: /
46	audience: [guest, author]
47	auth: optional
48	linked_frs: [FR-001]
49	primary_state: success
50	responsive: [Desktop, Mobile]
51	page_states: # §5.4.1
52	/: [loading, error, success]
53	/submit: [loading, error, success, no-permission]
54	user_flow: <Mermaid source> # §5.5
55	functional_requirements: # §3
56	FR-001: {요약}
57	FR-002: {요약}
58	```
59	3. 검증 게이트:
60	- FE 페이지 0개 → "백엔드 전용 PRD. /implement로 진행" 안내 후 stop
61	- §5.4.1 누락 → "Page State Matrix가 필요합니다" 안내 후 stop
62	- §5.5 누락 → "User Flow가 필요합니다" 안내 후 stop
63	4. 플랫폼 감지 및 자동 전환:
64	- `--platform` 명시값이 있으면 그 값을 그대로 사용 (사용자 의도 우선)
65	- 미지정 + §1 Overview에 모바일 시그널 감지 → 자동으로 `mobile` 모드 전환. "모바일 PRD로 판단되어 `--platform=mobile`로 진행합니다. 웹으로 강제하려면 `--platform=web`을 명시하세요." 안내 출력
66	- 시그널: `React Native`, `RN`, `iOS`, `Android`, `네이티브`, `앱스토어`, `모바일 앱`, `mobile`
67	- ⚠️ 단독 `앱`은 시그널로 쓰지 않는다 — `웹앱`/`web app`에 부분 매칭되어 오탐. `웹앱`만 있으면 `web`
68	- 미지정 + 시그널 없음 → 기본 `web`
69
70	### Phase 2: INTERVIEW (선택, `--interview` 플래그 시에만)
71
72	PRD가 못 다루는 화면 레이어 의사결정을 끌어낸다. 단일 메시지에 5~7개 객관식 질문을 번호 매겨 제시한 뒤 사용자 1회 응답을 받는다(라운드트립 1회로 끝나도록 분할하지 않는다).
73
74	질문 셋(샘플):
75	1. 네비게이션 패턴 — top / side / bottom / drawer
76	2. 정보 밀도 — compact (정보 우선) / spacious (가독성 우선)
77	3. 에러 톤 — 공식적 / 친근한
78	4. 빈 상태 철학 — 일러스트 + CTA / 최소 텍스트 + CTA
79	5. 전환 방식 — page / modal / drawer
80	6. 모바일 우선순위 — desktop-first / mobile-first / parity
81	7. 핵심 후크(첫 화면) 방향 — value-first / action-first / story-first
82
83	응답을 받으면 03-SCREEN-SPEC.md 작성 시 명시적으로 반영.
84
85	플래그가 없으면 이 Phase 건너뜀(추론 모드). PRD에 `TBD` / `???` / 빈 셀이 5건 이상이면 종료 안내에 `--interview` 재실행을 추천한다.
86
87	### Phase 3: GENERATE (산출물 5종 순차 생성)
88
89	각 산출물은 `templates/` 보일러플레이트를 기반으로 PRD 데이터를 주입.
90
91	실행 분기 (토큰 최적화):
92	- 3.1~3.3 (IA, User Flow, Screen Spec): 메인 스레드에서 직접 생성. 짧고 구조적이며 후속 단계에서 참조 빈도가 높음.
93	- 3.4~3.5 (Wireframe HTML, Dev Handoff): subagent로 분기 실행. 가장 큰 출력이며 한 번 생성 후 재참조가 적어 메인 컨텍스트에 누적할 가치가 낮음. 호출 시 Agent 도구로 `general-purpose` subagent에 다음을 전달:
94	- PRD 파일 경로
95	- 01~03 산출물 파일 경로 (subagent가 재읽기)
96	- 사용할 템플릿 경로 (플랫폼 분기 결과)
97	- INTERVIEW 응답이 있다면 결정사항 요약
98	- 출력 파일 경로
99	- subagent는 결과 파일 경로와 검증 요약만 메인 스레드로 반환. 본문 자체는 메인 컨텍스트에 누적시키지 않음.
100	- prompt caching 활용을 위해 PRD 읽기는 LOAD 단계에 고정 (5분 TTL 안에 후속 단계 마무리).
101
102	#### 3.1 `01-IA.md` (정보구조도)
103
104	Mermaid `flowchart LR` + 페이지×기능 매핑 테이블.
105
106	```mermaid
107	flowchart LR
108	Root((<feature>))
109	Root --> Entry[진입]
110	Root --> Create[작성]
111	Root --> Manage[관리]
112	Entry --> Landing["/ (Landing)"]
113	Create --> Submit["/submit"]
114	Create --> My["/my"]
115	Manage --> Admin["/admin"]
116	```
117
118	규칙:
119	- 1Depth ≤ 7개 (Miller's Law)
120	- 모든 페이지에 1+ FR 연결 강제
121	- 페이지-FR 매핑 테이블 필수
122	- mindmap은 사용 금지 (환경별 지원 편차) — `flowchart LR` 통일
123	- 라우트는 `["..."]`로 감싸 파서 안전성 확보
124
125	#### 3.2 `02-USER-FLOW.md` (사용자 플로우)
126
127	PRD §5.5의 Mermaid를 분기 조건까지 명시하여 확장.
128
129	```mermaid
130	flowchart TD
131	Start([진입]) --> Auth{인증 검증}
132	Auth -->\|허용\| Submit["/submit"]
133	Auth -->\|거부\| NoPerm[no-permission 안내]
134	Submit -->\|폼 검증 PASS\| Save[(DB 저장)]
135	Submit -->\|폼 검증 FAIL\| Submit
136	Save -->\|성공\| MyList["/my"]
137	Save -->\|422 검증 실패\| Submit
138	```
139
140	> Mermaid 안전 룰: 라우트(`/`)나 특수문자(`?`, `=`, `:`, `()`)가 포함된 노드 텍스트는 항상 `["..."]` 큰따옴표로 감싼다. shape는 valid한 것만 사용 — 직사각형 `[]`, 둥근 `()`, 원 `(())`, 다이아몬드 `{}`, 실린더 `[(...)]`, 비대칭/사다리꼴 `[/.../]`. `{(...)}`는 존재하지 않는다.
141
142	규칙:
143	- 시나리

People who liked this also viewed

6 picks

Type

screen-spec

45stars2forks

View on GitHub

How to install screen-spec?

wigtn/wigtn-plugins/screen-spec

$npx -y skills add wigtn/wigtn-plugins --skill screen-spec

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Screen Spec Skill
2
3	`/screen-spec` 명령어의 실행 엔진. PRD를 읽어 화면정의서 5종을 생성한다.
4
5	## 핵심 원칙
6
7	- PRD 단일 진실원: Role Key, FR ID, 페이지 Route, 상태 매트릭스는 모두 PRD에서 인용. 추측 금지
8	- 순차 의존: IA → User Flow → Screen Spec → Wireframe → Dev Handoff. 이전 단계 누락 시 stop
9	- 로파이 와이어프레임: 흑백 + 의미색(빨강=error, 초록=success, 노랑=warning, 회색=중립)만 사용. 컬러/타이포/브랜드 결정은 다음 단계(mockup/`/implement` 직전 스타일 선택)에서 다룸
10	- wigtn-plugins 자산 활용: frontend-developer (리뷰)와 통합
11	- 차단보다 보강: 입력 부족 시 사용자에게 명확한 보완 지시를 주고 stop
12
13	## 입력 / 출력
14
15	### 입력
16	- `docs/prd/PRD_<feature>.md` (필수)
17	- 옵션: `--interview` (디테일 보강 Q&A), `--platform=web\|mobile` (기본 web), `--pages=<list>`
18
19	### 출력 디렉토리: `docs/prd/screens/<feature>/`
20
21	```
22	docs/prd/screens/<feature>/
23	├── 01-IA.md # 정보구조도 (Mermaid flowchart LR + 매핑 테이블)
24	├── 02-USER-FLOW.md # 상세 플로우 (분기 조건 명시)
25	├── 03-SCREEN-SPEC.md # 화면별 명세 (Audience/Auth/States/Components/Microcopy/Responsive)
26	├── 04-WIREFRAME.html # 단일 HTML, Tailwind CDN, anchor 네비, 흑백+의미색만
27	└── 05-DEV-HANDOFF.md # FR ↔ 화면 ↔ 컴포넌트 매핑, /implement 입력
28	```
29
30	## 워크플로우
31
32	```
33	LOAD → [INTERVIEW?] → GENERATE × 5 → REVIEW → HANDOFF
34	```
35
36	`--interview` 플래그가 주어지면 LOAD 직후 단일 턴 배치 질문 단계가 들어간다. 기본은 PRD 추론 모드.
37
38	### Phase 1: LOAD (PRD 파싱)
39
40	1. `docs/prd/PRD_<feature>.md` Read
41	2. 추출 항목:
42	```yaml
43	roles: [author, admin] # §2.3
44	pages: # §5.4 (Has FE Components: Yes만)
45	- route: /
46	audience: [guest, author]
47	auth: optional
48	linked_frs: [FR-001]
49	primary_state: success
50	responsive: [Desktop, Mobile]
51	page_states: # §5.4.1
52	/: [loading, error, success]
53	/submit: [loading, error, success, no-permission]
54	user_flow: <Mermaid source> # §5.5
55	functional_requirements: # §3
56	FR-001: {요약}
57	FR-002: {요약}
58	```
59	3. 검증 게이트:
60	- FE 페이지 0개 → "백엔드 전용 PRD. /implement로 진행" 안내 후 stop
61	- §5.4.1 누락 → "Page State Matrix가 필요합니다" 안내 후 stop
62	- §5.5 누락 → "User Flow가 필요합니다" 안내 후 stop
63	4. 플랫폼 감지 및 자동 전환:
64	- `--platform` 명시값이 있으면 그 값을 그대로 사용 (사용자 의도 우선)
65	- 미지정 + §1 Overview에 모바일 시그널 감지 → 자동으로 `mobile` 모드 전환. "모바일 PRD로 판단되어 `--platform=mobile`로 진행합니다. 웹으로 강제하려면 `--platform=web`을 명시하세요." 안내 출력
66	- 시그널: `React Native`, `RN`, `iOS`, `Android`, `네이티브`, `앱스토어`, `모바일 앱`, `mobile`
67	- ⚠️ 단독 `앱`은 시그널로 쓰지 않는다 — `웹앱`/`web app`에 부분 매칭되어 오탐. `웹앱`만 있으면 `web`
68	- 미지정 + 시그널 없음 → 기본 `web`
69
70	### Phase 2: INTERVIEW (선택, `--interview` 플래그 시에만)
71
72	PRD가 못 다루는 화면 레이어 의사결정을 끌어낸다. 단일 메시지에 5~7개 객관식 질문을 번호 매겨 제시한 뒤 사용자 1회 응답을 받는다(라운드트립 1회로 끝나도록 분할하지 않는다).
73
74	질문 셋(샘플):
75	1. 네비게이션 패턴 — top / side / bottom / drawer
76	2. 정보 밀도 — compact (정보 우선) / spacious (가독성 우선)
77	3. 에러 톤 — 공식적 / 친근한
78	4. 빈 상태 철학 — 일러스트 + CTA / 최소 텍스트 + CTA
79	5. 전환 방식 — page / modal / drawer
80	6. 모바일 우선순위 — desktop-first / mobile-first / parity
81	7. 핵심 후크(첫 화면) 방향 — value-first / action-first / story-first
82
83	응답을 받으면 03-SCREEN-SPEC.md 작성 시 명시적으로 반영.
84
85	플래그가 없으면 이 Phase 건너뜀(추론 모드). PRD에 `TBD` / `???` / 빈 셀이 5건 이상이면 종료 안내에 `--interview` 재실행을 추천한다.
86
87	### Phase 3: GENERATE (산출물 5종 순차 생성)
88
89	각 산출물은 `templates/` 보일러플레이트를 기반으로 PRD 데이터를 주입.
90
91	실행 분기 (토큰 최적화):
92	- 3.1~3.3 (IA, User Flow, Screen Spec): 메인 스레드에서 직접 생성. 짧고 구조적이며 후속 단계에서 참조 빈도가 높음.
93	- 3.4~3.5 (Wireframe HTML, Dev Handoff): subagent로 분기 실행. 가장 큰 출력이며 한 번 생성 후 재참조가 적어 메인 컨텍스트에 누적할 가치가 낮음. 호출 시 Agent 도구로 `general-purpose` subagent에 다음을 전달:
94	- PRD 파일 경로
95	- 01~03 산출물 파일 경로 (subagent가 재읽기)
96	- 사용할 템플릿 경로 (플랫폼 분기 결과)
97	- INTERVIEW 응답이 있다면 결정사항 요약
98	- 출력 파일 경로
99	- subagent는 결과 파일 경로와 검증 요약만 메인 스레드로 반환. 본문 자체는 메인 컨텍스트에 누적시키지 않음.
100	- prompt caching 활용을 위해 PRD 읽기는 LOAD 단계에 고정 (5분 TTL 안에 후속 단계 마무리).
101
102	#### 3.1 `01-IA.md` (정보구조도)
103
104	Mermaid `flowchart LR` + 페이지×기능 매핑 테이블.
105
106	```mermaid
107	flowchart LR
108	Root((<feature>))
109	Root --> Entry[진입]
110	Root --> Create[작성]
111	Root --> Manage[관리]
112	Entry --> Landing["/ (Landing)"]
113	Create --> Submit["/submit"]
114	Create --> My["/my"]
115	Manage --> Admin["/admin"]
116	```
117
118	규칙:
119	- 1Depth ≤ 7개 (Miller's Law)
120	- 모든 페이지에 1+ FR 연결 강제
121	- 페이지-FR 매핑 테이블 필수
122	- mindmap은 사용 금지 (환경별 지원 편차) — `flowchart LR` 통일
123	- 라우트는 `["..."]`로 감싸 파서 안전성 확보
124
125	#### 3.2 `02-USER-FLOW.md` (사용자 플로우)
126
127	PRD §5.5의 Mermaid를 분기 조건까지 명시하여 확장.
128
129	```mermaid
130	flowchart TD
131	Start([진입]) --> Auth{인증 검증}
132	Auth -->\|허용\| Submit["/submit"]
133	Auth -->\|거부\| NoPerm[no-permission 안내]
134	Submit -->\|폼 검증 PASS\| Save[(DB 저장)]
135	Submit -->\|폼 검증 FAIL\| Submit
136	Save -->\|성공\| MyList["/my"]
137	Save -->\|422 검증 실패\| Submit
138	```
139
140	> Mermaid 안전 룰: 라우트(`/`)나 특수문자(`?`, `=`, `:`, `()`)가 포함된 노드 텍스트는 항상 `["..."]` 큰따옴표로 감싼다. shape는 valid한 것만 사용 — 직사각형 `[]`, 둥근 `()`, 원 `(())`, 다이아몬드 `{}`, 실린더 `[(...)]`, 비대칭/사다리꼴 `[/.../]`. `{(...)}`는 존재하지 않는다.
141
142	규칙:
143	- 시나리

People who liked this also viewed

6 picks

Type