design-audit

Files (1)

• SKILL.md

SKILL.md (first lines)

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-1`~`min-h-10`, `h-1`~`h-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}`.

From Hbin77/codex-kit, MIT.

More from Hbin77/codex-kit