solmate-skills 2.0.5 → 2.0.7

package/verify-docs/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: verify-docs
-description: 프로젝트 문서가 5단계 구조(01~05)와 메타데이터 표준을 준수하는지 검증합니다. 문서 생성/수정 후, PR 전 사용.
+description: 프로젝트 문서가 5단계 구조(01~05), 메타데이터, Related Documents, Backlog Context Lock, HTML UI Preview Gate, UI-First Gate를 준수하는지 검증합니다. 문서 생성/수정 후, PR 전 사용.
 ---
 
 # 문서 구조 검증
@@ -12,10 +12,11 @@ description: 프로젝트 문서가 5단계 구조(01~05)와 메타데이터 표
 2. 메타데이터 표준 (Created / Last Updated)
 3. Related Documents 섹션
 4. Backlog Context Lock
-5. UI-First Gate
-6. Pre-Code Technical Brief
-7. Rubric-First Writing
-8. rules-product Gate Out 조건
+5. HTML UI Preview Gate
+6. UI-First Gate
+7. Pre-Code Technical Brief
+8. Rubric-First Writing
+9. rules-product Gate Out 조건
 
 ## 실행 시점
 
@@ -64,6 +65,7 @@ AGENTS.md 또는 `docs/01_Concept_Design/00_COLLABORATION_GUIDE.md`를 읽어
 - [ ] 모든 Backlog 작업 항목이 체크박스`[ ]` 또는 `[x]`로 시작하는가?
 - [ ] 각 작업 항목에 `Related Concept Docs`가 있는가?
 - [ ] 각 작업 항목에 `Related UI Docs`가 있는가?
+- [ ] 각 작업 항목에 `Related HTML Preview`가 있는가?
 - [ ] 각 작업 항목에 `Related Technical Docs`가 있는가?
 - [ ] 각 작업 항목에 `Related QA Docs`가 있는가?
 - [ ] 각 작업 항목에 `Implementation Preconditions`가 있는가?
@@ -71,16 +73,32 @@ AGENTS.md 또는 `docs/01_Concept_Design/00_COLLABORATION_GUIDE.md`를 읽어
 - [ ] 각 작업 항목에 `Document Sync Check`가 있는가?
 - [ ] Related 필드의 링크가 상대 경로이거나 `N/A - 사유` 형식인가?
 - [ ] `N/A`만 있고 사유가 없는 항목은 없는가?
+- [ ] `Related HTML Preview`가 상대 경로 링크 또는 `N/A - 사유` 형식인가?
+- [ ] `Implementation Preconditions`에 HTML Preview 사용자 확인 및 피드백 기록이 포함되어 있는가?
 - [ ] `Implementation Preconditions`에 화면/UI 선확인, 사용자 동선 확인, 데이터 흐름 확인, 로딩·빈 상태·오류 상태 확인이 포함되어 있는가?
 - [ ] `Implementation Preconditions` 또는 `Acceptance Criteria`에 데이터 소스, 최소 필드, mutation, 상태 관리 방식, 검증 가능한 acceptance criteria가 포함되어 있는가?
 
 위 항목 중 하나라도 누락되면 Backlog Context Lock은 Fail로 처리한다.
 
-### Step 5: UI-First Gate 검사
+### Step 5: HTML UI Preview Gate 검사
+
+`docs/02_UI_Screens/`와 `docs/02_UI_Screens/previews/`를 함께 확인한다.
+
+체크 항목:
+- [ ] `docs/02_UI_Screens/previews/` 폴더가 있는가?
+- [ ] 주요 화면 또는 사용자 흐름에 대응되는 `.html` 파일이 있는가?
+- [ ] HTML 파일명이 2자리 순번과 목적을 포함하는가? (예: `01_main_flow_preview.html`)
+- [ ] `00_SCREEN_FLOW.md`, `01_UI_DESIGN.md`, 관련 `XX_PROTOTYPE_REVIEW.md` 중 하나 이상이 HTML Preview를 상대 경로로 링크하는가?
+- [ ] UI 문서나 백로그에 HTML Preview 사용자 확인 및 피드백 기록이 있는가?
+
+HTML Preview가 없거나 링크·사용자 확인 기록이 누락되면 HTML UI Preview Gate는 Fail로 처리한다.
+
+### Step 6: UI-First Gate 검사
 
 `docs/02_UI_Screens/`와 `docs/04_Logic_Progress/00_BACKLOG.md`를 함께 확인한다.
 
 체크 항목:
+- [ ] HTML UI Preview Gate를 통과했는가?
 - [ ] `00_SCREEN_FLOW.md`에 주요 화면, 진입·전환·이탈 동선이 있는가?
 - [ ] `00_SCREEN_FLOW.md` 또는 관련 UI 문서에 화면별 입력·출력 데이터가 있는가?
 - [ ] `01_UI_DESIGN.md` 또는 `XX_PROTOTYPE_REVIEW.md`에 로딩·빈 상태·오류 상태가 있는가?
@@ -89,7 +107,7 @@ AGENTS.md 또는 `docs/01_Concept_Design/00_COLLABORATION_GUIDE.md`를 읽어
 
 구현 판단에 필요한 화면·동선·데이터 흐름이 누락되면 UI-First Gate는 Fail로 처리한다.
 
-### Step 6: Pre-Code Technical Brief 검사
+### Step 7: Pre-Code Technical Brief 검사
 
 `docs/03_Technical_Specs/`와 `docs/04_Logic_Progress/00_BACKLOG.md`를 함께 확인한다.
 
@@ -101,7 +119,7 @@ AGENTS.md 또는 `docs/01_Concept_Design/00_COLLABORATION_GUIDE.md`를 읽어
 
 데이터·API·상태 계약이 없어 구현자가 임의 구조를 만들 수밖에 없으면 Pre-Code Technical Brief는 Fail로 처리한다.
 
-### Step 7: Rubric-First Writing 검사
+### Step 8: Rubric-First Writing 검사
 
 | 레이어 | 기준 |
 |:---|:---|
@@ -111,7 +129,7 @@ AGENTS.md 또는 `docs/01_Concept_Design/00_COLLABORATION_GUIDE.md`를 읽어
 | Technical_Specs (Layer 3) | Functionality, UX (latency), Open-source 언급 (권장) |
 | Logic_Progress (Layer 4) | Functionality, UX 언급 (권장) |
 
-### Step 8: Gate Out 조건 검사
+### Step 9: Gate Out 조건 검사
 
 rules-product 기준으로 각 Phase의 필수 문서 존재 여부를 확인한다.
 
@@ -123,6 +141,8 @@ rules-product 기준으로 각 Phase의 필수 문서 존재 여부를 확인한
 **Phase 2 (UI 설계)**:
 - [ ] `docs/02_UI_Screens/00_SCREEN_FLOW.md`
 - [ ] `docs/02_UI_Screens/01_UI_DESIGN.md`
+- [ ] `docs/02_UI_Screens/previews/` 내 관련 HTML Preview
+- [ ] UI 문서에서 HTML Preview 상대 경로 링크
 - [ ] 화면·동선·데이터 흐름·상태별 UI 확인 기록
 - [ ] Pre-Code Technical Brief 기록
 
@@ -131,7 +151,7 @@ rules-product 기준으로 각 Phase의 필수 문서 존재 여부를 확인한
 - [ ] `docs/04_Logic_Progress/00_ROADMAP.md`
 - [ ] `docs/05_QA_Validation/02_QA_CHECKLIST.md`
 
-### Step 9: 검증 보고서 출력
+### Step 10: 검증 보고서 출력
 
 검사 완료 후 아래 형식으로 결과를 출력한다:
 
@@ -145,6 +165,7 @@ rules-product 기준으로 각 Phase의 필수 문서 존재 여부를 확인한
 | 메타데이터 | Pass / Fail | 누락 파일 목록 |
 | Related Documents | Pass / Fail | 미연결 파일 목록 |
 | Backlog Context Lock | Pass / Fail | 필수 필드 누락 작업 목록 |
+| HTML UI Preview Gate | Pass / Fail | HTML Preview 파일·링크·확인 기록 누락 목록 |
 | UI-First Gate | Pass / Fail | 화면·동선·데이터 흐름 누락 목록 |
 | Pre-Code Technical Brief | Pass / Fail | 데이터·API·상태 계약 누락 목록 |
 | Rubric-First | Pass / Fail | |

package/verify-docs/agents/openai.yaml

@@ -1,4 +1,4 @@
 interface:
   display_name: "Docs Verification"
-  short_description: "Audit documentation structure and metadata"
-  default_prompt: "Use $verify-docs to audit the five-layer docs structure and metadata fields."
+  short_description: "Audit docs, metadata, and HTML previews"
+  default_prompt: "Use $verify-docs to audit five-layer docs, metadata, links, and HTML UI previews."

package/verify-ui/SKILL.md

@@ -1,12 +1,12 @@
 ---
 name: verify-ui
-description: UI 구현이 docs/02_UI_Screens의 화면 설계, 사용자 동선, 데이터 흐름, 로딩·빈 상태·오류 상태와 일치하는지 검증합니다. React/TSX 화면 구현 후, UI-First Gate 확인 후, 또는 "UI 검증", "UX 확인", "화면이 문서와 맞는지 봐줘" 요청 시 사용합니다.
+description: UI 구현이 docs/02_UI_Screens의 화면 설계, HTML UI Preview, 사용자 동선, 데이터 흐름, 로딩·빈 상태·오류 상태와 일치하는지 검증합니다. React/TSX 화면 구현 후, UI-First Gate 확인 후, 또는 "UI 검증", "UX 확인", "화면이 문서와 맞는지 봐줘" 요청 시 사용합니다.
 argument-hint: "[선택사항: 점검할 화면, 라우트, 컴포넌트 경로]"
 ---
 
 # UI 구현 검증 스킬 (verify-ui)
 
-구현된 화면이 UI-First Gate에서 합의한 화면 구조, 사용자 동선, 데이터 흐름, 상태별 UI를 실제로 반영하는지 검증한다.
+구현된 화면이 HTML UI Preview와 UI-First Gate에서 합의한 화면 구조, 사용자 동선, 데이터 흐름, 상태별 UI를 실제로 반영하는지 검증한다.
 
 ---
 
@@ -14,6 +14,7 @@ argument-hint: "[선택사항: 점검할 화면, 라우트, 컴포넌트 경로]
 
 - React/TSX 화면 또는 컴포넌트 구현 후
 - `rules-workflow` Step 15 사용자 사용 흐름 확인 시
+- HTML UI Preview와 실제 구현 결과의 일치 여부를 확인할 때
 - `docs/02_UI_Screens/` 문서와 구현 결과의 일치 여부를 확인할 때
 - PR 전 UI/UX 회귀 점검 시
 
@@ -26,10 +27,24 @@ argument-hint: "[선택사항: 점검할 화면, 라우트, 컴포넌트 경로]
 ```bash
 git diff --name-only HEAD
 find docs/02_UI_Screens -maxdepth 1 -type f -name '*.md' 2>/dev/null
+find docs/02_UI_Screens/previews -maxdepth 1 -type f -name '*.html' 2>/dev/null
 find . -path '*/src/*' \( -name '*.tsx' -o -name '*.jsx' \) 2>/dev/null
 ```
 
-검증 전 `docs/02_UI_Screens/00_SCREEN_FLOW.md`, `01_UI_DESIGN.md`, 관련 `XX_PROTOTYPE_REVIEW.md`, 백로그 항목의 `Related UI Docs`를 읽는다.
+검증 전 `docs/02_UI_Screens/00_SCREEN_FLOW.md`, `01_UI_DESIGN.md`, 관련 `XX_PROTOTYPE_REVIEW.md`, `docs/02_UI_Screens/previews/*.html`, 백로그 항목의 `Related UI Docs`와 `Related HTML Preview`를 읽는다.
+
+---
+
+## Check 0: HTML UI Preview 기준 확인
+
+- 주요 화면 또는 사용자 흐름에 대응되는 HTML Preview가 있는지 확인한다.
+- UI 문서와 백로그가 HTML Preview를 상대 경로로 링크하는지 확인한다.
+- 구현 결과가 HTML Preview와 의도 없이 크게 달라졌다면 문서 또는 구현 중 어느 쪽이 최신 기준인지 확인한다.
+- 체크:
+  - [ ] 관련 HTML Preview가 존재하는가?
+  - [ ] HTML Preview가 UI 문서 또는 백로그에 링크되어 있는가?
+  - [ ] 사용자 피드백과 보완 사항이 문서 또는 백로그에 반영되어 있는가?
+  - [ ] 구현이 HTML Preview의 정보 위계, CTA, 주요 레이아웃을 유지하는가?
 
 ---
 
@@ -105,6 +120,7 @@ find . -path '*/src/*' \( -name '*.tsx' -o -name '*.jsx' \) 2>/dev/null
 
 ### 문서 동기화 필요
 - 구현이 문서와 다르면 수정할 문서 또는 코드 위치를 명시한다.
+- HTML Preview와 구현이 다르면 최신 기준이 무엇인지 명시하고 문서 또는 코드 수정 대상을 적는다.
 ```
 
 심각도 기준: **높음** (핵심 동선 차단) / **중** (사용성 또는 문서 불일치) / **낮음** (개선 권장)

package/verify-ui/agents/openai.yaml

@@ -1,4 +1,4 @@
 interface:
   display_name: "UI Verification"
-  short_description: "Check UI implementation against screen docs"
-  default_prompt: "Use $verify-ui to compare implemented screens with UI docs, user flows, and state coverage."
+  short_description: "Check UI against docs and HTML previews"
+  default_prompt: "Use $verify-ui to compare implemented screens with UI docs, HTML previews, flows, and states."