ui-visual-reviewlisted

# UI Visual Review ## Purpose E2E 테스트가 PASS 했어도 시각적 회귀(layout shift, 색상/간격 변화, 빈 화면, 잘림)는 functional test가 못 잡는다. 본 skill은: 1. 핵심 사용자 화면을 자동 캡처 2. 이전 baseline과 diff 3. 에이전트가 명백한 regression 1차 판정 4. 사용자가 최종 승인 → 새 baseline 채택 또는 수정 요청 GoalTrack의 `docs/screenshots/` 수동 패턴(mvp-home / v3-search / v4-wiki 등)을 자동화한 형태. ## When to Invoke | 트리거 | 행동 | |--------|------| | `/uzys:test` PASS + UI Track(csr-*/ssr-*/full) | 본 skill 호출 권유 | | `/uzys:review` UI 변경 PR | visual diff 결과 review 입력으로 | | 의도적 디자인 변경 후 baseline 갱신 | "approve all" 옵션 | | Track이 data/tooling/executive | **skip** — UI 없음 | ## Pre-conditions - Playwright 또는 chrome-devtools MCP 사용 가능 (UI Track 설치 시 기본 포함) - 앱이 로컬에서 기동 가능 (예: `pnpm dev`, `docker-compose up`) - 핵심 화면 URL 리스트가 정의됨 (없으면 본 skill 첫 실행 시 사용자 질의) ## Process ### 1. 화면 리스트업 (한 번만) `docs/visual-pages.json` 부재 시 사용자에게 핵심 화면을 묻는다 (5-10개 권장): ```json { "base_url": "http://localhost:3000", "pages": [ { "id": "login", "path": "/login", "wait_for": "form" }, { "id": "home", "path": "/", "wait_for": "main", "auth": "user1" }, { "id": "detail", "path": "/items/sample", "auth": "user1" }, { "id": "settings", "path": "/settings", "auth": "user1" } ], "viewports": [ { "name": "desktop", "width": 1440, "height": 900 }, { "name": "mobile", "width": 375, "height": 812 } ] } ``` `auth` 키는 `docs/visual-auth.example.json`(별도 시크릿)에서 매핑. ### 2. 캡처 각 page × viewport 조합으로 스크린샷 캡처. chrome-devtools MCP 사용 예: ``` for page in pages: n