ui-validatelisted

## Core Goal 4종 UI 검증 check를 단일 인터페이스로 통합한다: | check | 책임 | 출력 파일 | LLM | |---|---|---|---| | `--check hierarchy` | Playwright + DOM saliency + WCAG AA 시각 계층 측정 | `.design/hierarchy-report.json` | ❌ | | `--check motion` | CSS transition vs RESPECT.md motion_language 일관성 | `.design/motion-drift.md` | ❌ | | `--check drift` | N 화면 pHash + DOM 구조 시각 drift 감지 | `.design/ui-drift-report.md` | ❌ | | `--check mobile` | 375/768/1440px 브레이크포인트 Playwright 검증 | `mobile-check-report.md` | ❌ | | `--check tc-gate` | QA_CHECKLIST.md TC-ID별 Playwright 스크린샷 → `harness/ui-evidence/` | `harness/ui-evidence/summary.json` | ❌ | > ⚠️ **`--check` 인자 필수**: 미명시 시 에러 출력 후 사용 가능한 check 목록 안내. auto-run 절대 금지. --- ## Rule 5 준수 — 모든 측정이 결정론 | 검증 | 도구 | LLM | |---|---|---| | fold_density, type_hierarchy, color_60_30_10, whitespace, cta_count | Playwright DOM + pixel | ❌ | | WCAG AA contrast | WebAIM relative luminance 알고리즘 | ❌ | | CSS transition duration/easing 추출 | 정규식 + CSSOM | ❌ | | framer-motion props | AST 파서 | ❌ | | pHash 비교 | imagehash library | ❌ | | 색상 palette | KMeans on screenshot | ❌ | | 브레이크포인트 Playwright | npx playwright test | ❌ | --- ## 실패 처리 원칙 - **각 check는 독립 실패 가능** — 한 check 실패가 다른 check를 막지 않음 - **baseline 없으면 SKIP** (FAIL 아님) — baseline 부재는 데이터 미비이지 위반이 아님 - **타임아웃**: 30초/check — 초과 시 해당 check SKIP + warning - **respect (--mode checkpoint·--mode brief)**는 이 스킬에 통합하지 않음 --- ## Trigger Gate ### Use This Skill When - craft-lint 정적 검증 통과 후 런타임 측정 → `--check hierarchy` - 리디자인 후