القائمة
Shell UI 변경의 정보 위계·상태·오류 복구·반응형·접근성 증거를 P04에서 검토한다. 컴포넌트, CSS, Playwright 또는 native Tauri UI를 변경했을 때 사용한다.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
| name | verify-visual-ux |
| description | Shell UI 변경의 정보 위계·상태·오류 복구·반응형·접근성 증거를 P04에서 검토한다. 컴포넌트, CSS, Playwright 또는 native Tauri UI를 변경했을 때 사용한다. |
| disable-model-invocation | true |
기능 계약이 통과했더라도 사용자가 다음 행동을 이해하지 못하거나, 좁은 Shell 패널에서 정보가 무너지거나, 오류를 복구할 수 없으면 완료로 선언하지 않는다.
.tsx, .css, i18n, 화면 배선, Tauri UI/IPC가 바뀐 기능의 P02와 P04.| 파일 | 역할 |
|---|---|
docs/user-scenarios.md | P01/P02 사용자 흐름과 상태 매트릭스 |
docs/requirements.md | UX·시각 수용 요구사항 |
.agents/context/agents-rules.json | P04 필수 게이트 |
packages/shell/e2e/ | Playwright UI 수용 테스트 |
packages/shell/e2e-tauri/ | 실제 Tauri WebView 수용 테스트 |
packages/shell/src/styles/global.css | Shell 반응형·상태 스타일 |
각 변경 UI마다 아래 상태를 P02 Test Coverage Map에 연결한다.
| 상태 | 확인할 질문 |
|---|---|
| 기본 | 화면 목적과 첫 행동을 한 화면에서 알 수 있는가? |
| 빈 목록 | 데이터가 없다는 사실과 시작 행동을 구분하는가? |
| 진행 | 중복 전송을 막고 진행 중임을 알리는가? |
| 성공 | 결과·다음 행동·적용 시점을 혼동 없이 표시하는가? |
| 오류 | 안전한 원인과 재시도 전에 할 행동이 해당 요청 맥락에 있는가? |
| 좁은 폭 | 1,100px 이하에서 입력·경계·주요 행동의 순서가 유지되는가? |
하나라도 정의되지 않으면 FAIL이다.
변경한 TSX/CSS에서 다음을 확인한다.
role=alert, 비차단 상태에는 role=status 또는 동등한 live-region 의미가 있다.tmp/에 저장해 검토한다. 스크린샷이 불가능하면 DOM 구조·bounding box·computed layout을 동등 증거로 기록한다.다음이면 PASS다.
다음은 FAIL이다.