| name | inspect-app |
| description | 구현된 앱의 기능, UX, 디자인을 종합 검수하는 스킬. PRD 대비 기능 완성도, 화면 흐름, 디자인 가이드라인 준수, 접근성, 엣지 케이스를 점검한다. '앱 검수', '기능 점검', 'UX 검토', '디자인 QA', '출시 전 점검' 요청 시 반드시 이 스킬을 사용할 것. |
Inspect App — 앱 종합 검수 스킬
구현된 앱을 PRD, 디자인 시스템 기준으로 종합 검수하는 스킬.
Trigger
- "앱 검수", "기능 점검", "QA 해줘"
- "UX 검토", "디자인 QA"
- "출시 전 점검", "앱 리뷰해줘"
Input
- PRD:
_workspace/plan/prd.md
- 디자인 시스템:
_workspace/design/design-system.md
- 구현 코드:
src/, app/
Steps
Step 1: 기능 완성도 검수
- PRD의 유저 스토리를 체크리스트로 변환
- 각 유저 스토리에 해당하는 코드 파일 매핑
- 구현 여부 확인 (PASS/FAIL/PARTIAL)
- API 타입과 UI 타입의 경계면 교차 비교
Step 2: UX 흐름 검증
app/ 디렉토리의 라우트 구조 분석- 화면 간 네비게이션 연결 확인
- 에러 상태, 로딩 상태, 빈 상태 처리 확인
- 키보드 회피(KeyboardAvoidingView) 확인
Step 2.5: 런타임 검증 (sim-use)
- 시작 전 sim-use 설치 확인 → 없으면 설치 (
command -v sim-use || brew install lycorp-jp/tap/sim-use && sim-use init --client claude --dest .claude/skills)
- 시뮬레이터에서 앱 실행 후
sim-use ui → tap @N/type/swipe → sim-use ui로 observe-act-verify
- PRD happy path를 실제 조작으로 밟아 화면 전환/상태 처리 검증 (정본: CLAUDE.md "시뮬레이터 런타임 테스트")
- 설치 불가 시 skip 표시 후 정적 검수만 진행
Step 3: 디자인 일관성 검수
- 디자인 시스템의 토큰 값과 실제 className 비교
- 하드코딩된 색상, 폰트 크기, 스페이싱 탐지
- 컴포넌트 variant 사용 일관성 확인
Step 4: 접근성 점검
- 터치 타겟 크기 (최소 44x44)
- accessibilityLabel 설정 여부
- 색상 대비(contrast ratio) 확인
Step 5: 엣지 케이스 탐지
- 긴 텍스트 / 빈 데이터 / 대량 데이터
- 이미지 로드 실패 대응
- 네트워크 오프라인 대응
- 빠른 연속 입력 방어
Step 6: 보고서 생성
- 종합 점수 (0~100)
- CRITICAL / WARNING / INFO 분류
- 각 이슈에 파일:라인, 설명, 수정 방법 포함
_workspace/qa/inspection-report.md에 저장
Agent Delegation
| Step | Agent |
|---|
| 1-6 | app-inspector |
QA Reviewer와의 역할 분담
- qa-reviewer: 코드 품질, TypeScript 타입 안전성, FSD 규칙, lint/format
- app-inspector: 기능 완성도, UX 흐름, 디자인 일관성, 접근성
