design-audit

name	design-audit
description	Audit UI code against ui-ux-pro-max UX guidelines; report by severity

Audit current UI code against the ui-ux-pro-max UX guidelines. Report violations by severity.

Scope

the task/scope the user described when invoking this skill (if none given, ask or infer from context) If no scope provided: 현재 프로젝트 전체 UI 코드 (components, pages, styles).

1. 체크리스트 로드

~/.codex/skills/ui-ux-pro-max/ux-guidelines.md를 로드.

2. 파일 스캔 (rg / grep)

rg(ripgrep)는 lookahead/lookbehind를 지원하지 않는다 — 해당 패턴은 조용히 실패한다. 아래 항목은 2단계 방식으로 검사한다: ① 양성 패턴을 매칭 → ② 매칭된 라인/파일에서 필수 속성의 부재를 별도로 확인.

접근성 위반 (CRITICAL):

• rg 'outline:\s*(none|0)' (포커스 링 제거)
• alt 누락 (2단계): ① <img 매칭 → ② 각 라인에 alt= 유무 확인. 빠른 추출: rg '<img' | rg -v 'alt='. 여러 라인 태그는 결과를 읽어 직접 확인.
• 텍스트 없는 버튼 (2단계): ① <button 매칭 → ② 텍스트 콘텐츠 또는 aria-label/aria-labelledby 유무 확인. 근사 추출: rg '<button' | rg -v 'aria-label|aria-labelledby' 후 육안 확인.

터치 & 인터랙션 (CRITICAL):

• 44pt 미만 버튼: rg 'height:\s*[1-3][0-9]px' 는 그대로 매칭. Tailwind 높이는 (2단계) ① rg 'min-h-[0-9]+|\bh-[0-9]+' 매칭 → ② 값이 44px(Tailwind 11/2.75rem) 미만인지 확인 (min-h-1min-h-10, h-1h-10 위반; min-h-11 이상 통과).
• 호버만 의존 (2단계): ① onMouseEnter 매칭 → ② 같은 요소/파일에 onTouchStart(또는 동등 핸들러) 부재 확인. 근사 추출: rg -L onTouchStart <onMouseEnter 매칭 파일들>.

스타일 선택 (HIGH):

• rg '[🎨🚀⚙️📊💼🔥⭐]' 구조 아이콘에 이모지 사용
• rg 'color:\s*#[0-9a-fA-F]{3,6}' 컴포넌트에 raw hex (토큰 대신)

레이아웃 (HIGH):

• rg 'width:\s*[0-9]+px' 고정 너비
• rg 'user-scalable=no|maximum-scale=1' 접근성 위반
• rg 'height:\s*100vh' (모바일은 dvh 권장)

타이포 & 컬러 (MEDIUM):

• rg 'font-size:\s*1[0-4]px|text-xs' 본문 (16px 미만)
• 줄높이 < 1.4 (2단계): ① rg 'line-height:\s*1(\.[0-9]+)?' 매칭 → ② 값이 1.4 미만인지 확인 (1, 1.0~1.3 위반; 1.4 이상 및 단위 있는 값 통과).

애니메이션 (MEDIUM):

• rg 'transition.*(width|height|top|left|margin)' 성능 안티
• rg 'animation-duration:\s*[5-9][0-9][0-9]+ms' 500ms 초과

네비게이션 (HIGH):

• <BottomNav> 자식 ≥6 (하단 네비 초과)

3. 설정 파일 검증

• design-system/MASTER.md 존재 확인. 없으면 권고.
• Tailwind config 또는 theme 파일에서 semantic token 사용 확인.
• 다크 모드 토큰 쌍 정의 확인.

4. 발견 분류 및 리포트

## Design Audit Report

### Summary
- Total violations: N
- CRITICAL: N | HIGH: N | MEDIUM: N | LOW: N

### CRITICAL (반드시 수정)
[{file}:{line}] 규칙 §{n} "{rule name}"
  위반: {실제 코드}
  해결: {제안}

### HIGH (이번 스프린트 내 수정)
### MEDIUM (백로그)

### Anti-pattern Detection
- AI purple/pink gradients: {count}
- 이모지 아이콘: {count}
- Raw hex: {count}
- 한 계층에 filled + outline 혼용: {발견 시}

### 추천 다음 단계
1. CRITICAL 먼저 수정 (접근성·터치)
2. `/design-system` 실행하여 토큰 정리
3. 수정 후 `/design-audit` 재실행

5. 자동 수정 여부 확인

사용자가 원하면 CRITICAL/HIGH 자동 수정: aria-label 추가 · 이모지 → Lucide/Heroicons · raw hex → semantic token · 터치 타겟 확대.

규칙

• False positive 최소화 (문맥 확인).
• CRITICAL은 주석 포함 상세 설명.
• 수정 가능한 경우 코드 diff 제공.
• 스킬 파일 링크: ~/.codex/skills/ui-ux-pro-max/ux-guidelines.md §{n}.