wireframe
Installation
SKILL.md
Wireframe: Spec → HTML 와이어프레임
spec 문서로부터 HTML 와이어프레임을 생성한다. Tailwind CDN + CSS 변수로 최소 회색 톤 스타일 적용.
Step 1: 전제 조건
$ARGUMENTS에서 feature명 추출 후 artifacts/<feature>/spec.md 존재 확인.
없으면 "먼저 /spec <feature>를 실행하세요." 출력 후 종료.
Step 2: 시나리오 → 화면 그룹핑 + Layout Structure
spec.md의 ### N. 시나리오를 파싱하고, 시각적으로 구분되는 화면 상태로 그룹핑한다.
- 하나의 화면 = 하나의 시각적으로 구분되는 UI 상태
- 같은 베이스에서 작은 상태 차이만 있는 시나리오는 하나로 묶는다
- 시각적으로 완전히 다른 상태는 별도 화면으로 분리
각 화면의 Layout Structure를 들여쓰기 트리로 작성한다.