review-ux-ui

pjt222

업데이트됨 2 days ago

6 조회

디자인design

정보

이 스킬은 닐슨의 휴리스틱, WCAG 2.1 접근성 표준, 사용자 흐름 효율성을 기준으로 인터페이스를 평가하여 포괄적인 UX/UI 리뷰를 수행합니다. 출시 전 사용성 점검, 접근성 감사, 폼/전환 최적화를 위해 설계되었습니다. 개발자는 이를 통해 인지 부하, 키보드/스크린 리더 호환성, 전반적인 상호작용 효과를 분석할 수 있습니다.

빠른 설치

Claude Code

문서

Review UX/UI

Eval UX/UI → usability|access|effectiveness.

Use When

Pre-release usability check
WCAG 2.1 AA|AAA audit
Flow eval → efficiency, err prevention
Form review → conversion
Heuristic eval existing UI
Cognitive load + info arch

In

Required: App (URL|prototype|src)
Required: Target user (role, skill, ctx)
Optional: User research (interview|survey|analytics)
Optional: WCAG target (A|AA|AAA)
Optional: Flows to eval
Optional: Assistive tech (screen reader|switch)

Do

Step 1: Heuristic Eval (Nielsen 10)

#	Heuristic	Q	Rating
1	Status visibility	Sys informs user?
2	Match real world	Familiar lang/concepts?
3	User control/freedom	Undo	redo
4	Consistency	Similar elements behave same?
5	Err prevention	Prevent before occur?
6	Recognition > recall	Options visible?
7	Flex/efficiency	Shortcuts for experts?
8	Aesthetic/minimal	Every element serves purpose?
9	Err recovery	Errs clear, specific, constructive?
10	Help/docs	Easy find?

Severity:

Sev	Desc
0	Not problem
1	Cosmetic
2	Minor
3	Major
4	Catastrophic — fix pre-release

## Heuristic Evaluation Findings
| # | Heuristic | Severity | Finding | Location |
|---|-----------|----------|---------|----------|
| 1 | System status | 3 | No loading indicator during data fetch — users click repeatedly | Dashboard page |
| 3 | User control | 2 | No undo for item deletion — only a confirmation dialog | Item list |
| 5 | Error prevention | 3 | Date field accepts invalid dates (Feb 30) | Booking form |
| 9 | Error recovery | 4 | Form submission error clears all fields | Registration |

→ All 10 evaluated w/ findings + severity.

If err: time-tight → focus 1, 3, 5, 9.

Step 2: Access Audit (WCAG 2.1)

Perceivable

1.1.1 Non-text: Imgs have alt (decorative=alt="")
1.3.1 Info/rels: Semantic HTML (headings, lists, tables, landmarks)
1.3.2 Sequence: DOM order=visual order
1.4.1 Color: Not sole means
1.4.3 Contrast: ≥4.5:1 normal, ≥3:1 large
1.4.4 Resize: 200% no loss
1.4.11 Non-text contrast: UI ≥3:1
1.4.12 Spacing: line 1.5x, letter 0.12em, word 0.16em

Operable

2.1.1 Keyboard: All operable
2.1.2 No trap: Focus never trapped
2.4.1 Skip links: Avail
2.4.3 Focus order: Logical
2.4.7 Focus visible: Indicator clear
2.4.11 Not obscured: Not behind sticky
2.5.5 Target size: ≥24x24px (44x44 touch)

Understandable

Robust

4.1.1 Parsing: Valid HTML
4.1.2 Name/role/val: Custom → ARIA
4.1.3 Status msgs: Announced

→ WCAG 2.1 AA checked w/ pass/fail.

If err: auto-tools first (axe-core, Lighthouse) → manual for judgement.

Step 3: Keyboard + Screen Reader

Keyboard

## Keyboard Navigation Audit
| Task | Completable? | Issues |
|------|-------------|--------|
| Navigate to main content | Yes — skip link works | None |
| Open dropdown menu | Yes | Arrow keys don't work within menu |
| Submit a form | Yes | Tab order skips the submit button |
| Close a modal | No | Escape doesn't close, no visible close button in tab order |
| Use date picker | No | Custom date picker not keyboard accessible |

Screen Reader

NVDA|VoiceOver|TalkBack:

## Screen Reader Audit
| Element | Announced As | Expected | Issue |
|---------|-------------|----------|-------|
| Logo link | "link, image" | "Home, link" | Missing alt text on logo |
| Search input | "edit, search" | "Search products, edit" | Missing label association |
| Nav menu | "navigation, main" | Correct | None |
| Error message | (not announced) | "Error: email is required" | Missing live region |
| Loading spinner | (not announced) | "Loading, please wait" | Missing aria-live or role="status" |

→ Full flows tested keyboard + screen reader.

If err: no SR → inspect ARIA + semantic HTML as proxy.

Step 4: Flow Analysis

## User Flow: Complete a Purchase

### Steps
1. Browse products → 2. View product → 3. Add to cart → 4. View cart →
5. Enter shipping → 6. Enter payment → 7. Review order → 8. Confirm

### Assessment
| Step | Friction | Severity | Notes |
|------|---------|----------|-------|
| 1→2 | Low | - | Clear product cards |
| 2→3 | Medium | 2 | "Add to cart" button below the fold on mobile |
| 3→4 | Low | - | Cart icon updates with count |
| 4→5 | High | 3 | Must create account — no guest checkout |
| 5→6 | Low | - | Address autocomplete works well |
| 6→7 | Medium | 2 | Card number field doesn't auto-format |
| 7→8 | Low | - | Clear order summary |

### Flow Efficiency
- **Steps**: 8 (acceptable for e-commerce)
- **Required fields**: 14 (could reduce with address autocomplete + saved payment)
- **Decision points**: 2 (size selection, shipping method)
- **Potential drop-off points**: Step 4→5 (forced account creation)

→ Critical flows mapped, friction rated.

If err: no analytics → assess by step count + complexity.

Step 5: Cognitive Load

Density: Per-screen info appropriate?
Progressive disclosure: Complex revealed gradual?
Chunking: Related grouped (Gestalt)?
Recognition > recall: See vs remember?
Consistency: Similar tasks → similar patterns?
Decision fatigue: Too many choices? (Hick)
Working memory: Remember across steps?

→ Load assessed w/ overload|underload areas.

If err: hard objective → squint test (structure visible squinted?).

Step 6: Form Usability

→ Each form vs checklist + issues documented.

If err: many forms → prioritize high-traffic (registration|checkout|contact).

Step 7: Write Report

## UX/UI Review Report

### Executive Summary
[2-3 sentences: overall usability, most critical issues, strongest aspects]

### Heuristic Evaluation Summary
| Heuristic | Severity | Key Finding |
|-----------|----------|-------------|
[Summary table from Step 1]

### Accessibility Compliance
- **Target**: WCAG 2.1 AA
- **Status**: [X of Y criteria pass]
- **Critical failures**: [List]

### User Flow Analysis
[Key friction points with severity and recommendations]

### Top 5 Improvements (Prioritised)
1. **[Issue]** — Severity: [N] — [Specific recommendation]
2. ...

### What Works Well
1. [Specific positive observation]
2. ...

→ Prioritized, actionable recs w/ severity.

If err: too many issues → split "must fix" (3-4) vs "should fix" (1-2).

Check

All 10 Nielsen rated
WCAG checked (min: 1.1.1, 1.4.3, 2.1.1, 2.4.7, 3.3.1, 4.1.2)
Keyboard tested key flows
SR tested (or ARIA proxy)
≥1 critical flow analyzed
Cognitive load assessed
Forms evaluated
Findings prioritized + actionable

Traps

UX vs visual: UX=how works, visual=how looks. Beautiful UI ≠ good UX.
Happy path only: Errs, empty, loading, edges = where bugs hide.
No real devices: DevTools = proxy. Real catches touch, perf, viewport.
Access afterthought: Late = expensive. Early + continuous.
Personal pref: "I prefer..." ≠ UX feedback. Cite heuristics|research|patterns.

→

review-web-design — visual review (layout, typo, color)
scaffold-nextjs-app — Next.js scaffold
setup-tailwind-typescript — Tailwind CSS

GitHub 저장소

pjt222/agent-almanac

경로: i18n/caveman-ultra/skills/review-ux-ui

agentsagentskillsai-assisted-developmentclaude-codeskillsteams

연관 스킬

executing-plans

디자인

executing-plans 스킬은 검토 체크포인트가 포함된 통제된 배치로 실행할 완전한 구현 계획이 있을 때 사용합니다. 이 스킬은 계획을 불러와 비판적으로 검토한 후, 소규모 배치(기본값 3개 작업)로 작업을 실행하면서 각 배치 사이에 진행 상황을 아키텍트 검토를 위해 보고합니다. 이를 통해 내재된 품질 관리 체크포인트를 갖춘 체계적인 구현이 보장됩니다.

스킬 보기

requesting-code-review

디자인

이 스킬은 코드 변경 사항을 요구 사항에 따라 분석하기 위해 코드 리뷰어 하위 에이전트를 호출합니다. 작업 완료 후, 주요 기능 구현 후, 또는 메인 브랜치에 병합하기 전에 사용해야 합니다. 이 리뷰는 현재 구현체와 원래 계획을 비교하여 문제를 조기에 발견하는 데 도움이 됩니다.

스킬 보기

connect-mcp-server

디자인

이 스킬은 개발자들이 HTTP, stdio 또는 SSE 전송 방식을 통해 MCP 서버를 Claude Code에 연결하는 포괄적인 가이드를 제공합니다. GitHub, Notion 및 사용자 정의 API와 같은 외부 서비스를 통합하기 위한 설치, 구성, 인증 및 보안을 다룹니다. MCP 통합 설정, 외부 도구 구성 또는 Claude의 모델 컨텍스트 프로토콜 작업 시 활용하세요.

스킬 보기

web-cli-teleport

디자인

이 스킬은 작업 분석을 기반으로 개발자가 Claude Code 웹 인터페이스와 CLI 인터페이스 중 선택할 수 있도록 돕고, 두 환경 간 원활한 세션 텔레포트를 가능하게 합니다. 웹, CLI 또는 모바일 환경 전환 시 세션 상태와 컨텍스트를 관리하여 워크플로를 최적화합니다. 다양한 단계에서 서로 다른 도구가 필요한 복잡한 프로젝트에 사용하세요.

스킬 보기