review-ux-ui
정보
이 스킬은 닐슨의 휴리스틱, WCAG 2.1 접근성 감사, 사용자 흐름 분석을 활용하여 포괄적인 UX/UI 리뷰를 수행합니다. 출시 전 사용성 점검, 접근성 준수 평가, 인터페이스 휴리스틱 평가를 위해 설계되었습니다. 개발자는 이를 통해 인지 부하, 양식 사용성, 키보드/스크린 리더 호환성을 체계적으로 평가할 수 있습니다.
빠른 설치
Claude Code
추천npx skills add pjt222/agent-almanac -a claude-code/plugin add https://github.com/pjt222/agent-almanacgit clone https://github.com/pjt222/agent-almanac.git ~/.claude/skills/review-ux-uiClaude Code에서 이 명령을 복사하여 붙여넣어 스킬을 설치하세요
문서
Review UX/UI
Judge UX and UI for usability, accessibility, effectiveness.
When Use
- Usability review before release
- Check WCAG 2.1 AA or AAA compliance
- Judge user flows for efficiency, error prevention
- Review form design for usability, conversion
- Heuristic eval of existing interface
- Assess cognitive load, info architecture
Inputs
- Required: App to review (URL, prototype, source code)
- Required: Target user description (roles, skill, context)
- Optional: User research findings (interviews, surveys, analytics)
- Optional: WCAG target (A, AA, AAA)
- Optional: Specific flows or tasks
- Optional: Assistive tech to test (screen reader, switch)
Steps
Step 1: Heuristic Eval (Nielsen 10)
Rate interface against each heuristic.
| # | Heuristic | Key Question | Rating |
|---|---|---|---|
| 1 | Visibility of system status | Does the system always inform users about what is happening? | |
| 2 | Match between system and real world | Does the system use familiar language and concepts? | |
| 3 | User control and freedom | Can users easily undo, redo, or exit unwanted states? | |
| 4 | Consistency and standards | Do similar elements behave the same way throughout? | |
| 5 | Error prevention | Does the design prevent errors before they occur? | |
| 6 | Recognition rather than recall | Are options, actions, and information visible or easily retrievable? | |
| 7 | Flexibility and efficiency of use | Are there shortcuts for experienced users without confusing novices? | |
| 8 | Aesthetic and minimalist design | Does every element serve a purpose? Is there unnecessary clutter? | |
| 9 | Help users recognize, diagnose, and recover from errors | Are error messages clear, specific, and constructive? | |
| 10 | Help and documentation | Is help available and easy to find when needed? |
Rate severity per violation.
| Severity | Description |
|---|---|
| 0 | No problem |
| 1 | Cosmetic — fix if time |
| 2 | Minor — low priority |
| 3 | Major — important fix |
| 4 | Catastrophic — must fix before 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 |
Got: All 10 heuristics rated with findings and severity.
If fail: Time short? Focus on heuristics 1, 3, 5, 9 — biggest impact.
Step 2: Accessibility Audit (WCAG 2.1)
Perceivable
- 1.1.1 Non-text content: All images have alt text (decorative
alt="") - 1.3.1 Info and relationships: Semantic HTML (headings, lists, tables, landmarks)
- 1.3.2 Meaningful sequence: DOM order matches visual
- 1.4.1 Use of colour: Color not sole info carrier
- 1.4.3 Contrast: Text contrast ≥ 4.5:1 (normal), ≥ 3:1 (large)
- 1.4.4 Resize text: Text resizes to 200% without breaking
- 1.4.11 Non-text contrast: UI components, graphics ≥ 3:1
- 1.4.12 Text spacing: Works with line height 1.5x, letter 0.12em, word 0.16em
Operable
- 2.1.1 Keyboard: All function works via keyboard
- 2.1.2 No keyboard trap: Focus never trapped
- 2.4.1 Skip links: Skip nav for keyboard users
- 2.4.3 Focus order: Tab order logical, predictable
- 2.4.7 Focus visible: Focus indicator clearly visible
- 2.4.11 Focus not obscured: Focused element not hidden behind sticky/overlays
- 2.5.5 Target size: Targets ≥ 24x24px (44x44px touch)
Understandable
- 3.1.1 Language of page:
langattr set on<html> - 3.2.1 On focus: Focus no surprise changes
- 3.2.2 On input: Input no surprise changes without warning
- 3.3.1 Error identification: Errors clear in text
- 3.3.2 Labels or instructions: Form inputs have visible labels
- 3.3.3 Error suggestion: Error msgs suggest fix
Robust
- 4.1.1 Parsing: HTML valid (no dup IDs, proper nesting)
- 4.1.2 Name, role, value: Custom components have ARIA roles
- 4.1.3 Status messages: Dynamic changes announced to screen readers
Got: WCAG 2.1 AA criteria checked pass/fail per criterion.
If fail: Use auto tools (axe-core, Lighthouse) for first scan, then manual for human-judgment criteria.
Step 3: Keyboard and Screen Reader Audit
Keyboard Navigation Test
With Tab, Shift+Tab, Enter, Space, Arrow, Escape only.
## 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 Test
Test with NVDA (Win), VoiceOver (mac/iOS), TalkBack (Android).
## 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" |
Got: Full task flows tested with keyboard and screen reader.
If fail: No screen reader? Inspect ARIA attrs, semantic HTML as proxy.
Step 4: Analyse User Flows
Map and judge key flows.
## 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)
Got: Critical flows mapped with friction points, ratings.
If fail: No analytics? Judge flows by task complexity, step count.
Step 5: Assess Cognitive Load
- Info density: Right amount per screen?
- Progressive disclosure: Complex info revealed gradual?
- Chunking: Related items grouped visual (Gestalt)?
- Recognition over recall: Users see options vs remember?
- Consistent patterns: Similar tasks use similar interactions?
- Decision fatigue: Too many choices at once? (Hick's law)
- Working memory: Need remember info across steps?
Got: Cognitive load assessed with overload/underload areas named.
If fail: Hard to judge objective? Use "squint test" — squint at screen, check structure and hierarchy still apparent.
Step 6: Review Form Usability
For each form.
- Labels: Every input has visible, associated label
- Placeholder text: Examples only, not labels
- Input types: Right HTML types (email, tel, number, date) for mobile
- Validation timing: Errors on blur or submit, not every keystroke
- Error messages: Specific ("Email must include @") not generic ("Invalid input")
- Required fields: Marked clear (mark optional if most required)
- Field grouping: Related fields grouped visual (name, address, payment)
- Autocomplete:
autocompleteattrs set for standard fields - Tab order: Logical, matches visual layout
- Multi-step forms: Progress indicator shows current, total steps
- Persistence: Form data preserved if user navigates away
Got: Each form checked against list with issues documented.
If fail: Many forms? Prioritize highest-traffic (registration, checkout, contact).
Step 7: Write UX/UI Review
## 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. ...
Got: Review gives prioritized, actionable recs with severity.
If fail: Too many issues? Split into "must fix" (severity 3-4) and "should fix" (1-2).
Checks
- All 10 Nielsen heuristics rated
- WCAG 2.1 criteria checked (min: 1.1.1, 1.4.3, 2.1.1, 2.4.7, 3.3.1, 4.1.2)
- Keyboard nav tested for key flows
- Screen reader tested (or ARIA/semantic HTML as proxy)
- At least one critical flow analyzed
- Cognitive load assessed
- Form usability evaluated
- Findings prioritized by severity, actionable recs
Pitfalls
- Confuse UX with visual design: UX = how it works; visual = how it looks. Beautiful UI can have bad UX. Eval both but distinguish.
- Test only happy path: Error states, empty states, loading, edge cases — UX problems hide there.
- Ignore real devices: Dev tools responsive = proxy. Real devices catch touch, performance, viewport issues.
- Accessibility as afterthought: Late = expensive. Evaluate early, continuous.
- Personal preference as feedback: "I would prefer..." not UX feedback. Cite heuristics, research, patterns.
See Also
review-web-design— visual review (layout, typography, color)scaffold-nextjs-app— Next.js scaffoldingsetup-tailwind-typescript— Tailwind CSS design system
GitHub 저장소
연관 스킬
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 또는 모바일 환경 전환 시 세션 상태와 컨텍스트를 관리하여 워크플로를 최적화합니다. 다양한 단계에서 서로 다른 도구가 필요한 복잡한 프로젝트에 사용하세요.