review-ux-ui

pjt222

Mis à jour Yesterday

Designdesign

À propos

Cette compétence effectue des audits complets d'UX/UI en évaluant les interfaces selon les heuristiques de Nielsen, les normes d'accessibilité WCAG 2.1 et l'efficacité des parcours utilisateur. Elle est conçue pour les vérifications d'utilisabilité pré-lancement, les audits d'accessibilité et l'optimisation des formulaires et de la conversion. Les développeurs peuvent l'utiliser pour analyser la charge cognitive, la compatibilité clavier/lecteur d'écran et l'efficacité globale des interactions.

Installation rapide

Claude Code

Recommandé

Principal

npx skills add pjt222/agent-almanac -a claude-code

Commande PluginAlternatif

/plugin add https://github.com/pjt222/agent-almanac

Git CloneAlternatif

git clone https://github.com/pjt222/agent-almanac.git ~/.claude/skills/review-ux-ui

Copiez et collez cette commande dans Claude Code pour installer cette compétence

Documentation

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

Dépôt GitHub

pjt222/agent-almanac

Chemin: i18n/caveman-ultra/skills/review-ux-ui

agentsagentskillsai-assisted-developmentclaude-codeskillsteams

Compétences associées

executing-plans

Design

Utilisez la compétence executing-plans lorsque vous disposez d'un plan de mise en œuvre complet à exécuter par lots contrôlés avec des points de contrôle de revue. Elle charge et examine le plan de manière critique, puis exécute les tâches par petits lots (3 tâches par défaut) tout en rapportant la progression entre chaque lot pour une revue par l'architecte. Cela garantit une mise en œuvre systématique avec des points de contrôle de qualité intégrés.

Voir la compétence

requesting-code-review

Design

Cette compétence délègue un sous-agent réviseur de code pour analyser les modifications apportées au code par rapport aux exigences avant de poursuivre. Elle doit être utilisée après avoir terminé des tâches, implémenté des fonctionnalités majeures, ou avant une fusion vers la branche principale. La revue aide à détecter précocement les problèmes en comparant l'implémentation actuelle avec le plan initial.

Voir la compétence

connect-mcp-server

Design

Cette compétence fournit un guide complet permettant aux développeurs de connecter des serveurs MCP à Claude Code via les transports HTTP, stdio ou SSE. Elle couvre l'installation, la configuration, l'authentification et la sécurité pour intégrer des services externes tels que GitHub, Notion et des API personnalisées. Utilisez-la lors de la configuration d'intégrations MCP, de la configuration d'outils externes ou du travail avec le Protocole de Contexte de Modèle de Claude.

Voir la compétence

web-cli-teleport

Design

Cette compétence aide les développeurs à choisir entre les interfaces Web et CLI de Claude Code en fonction de l'analyse des tâches, puis permet une téléportation transparente des sessions entre ces environnements. Elle optimise le flux de travail en gérant l'état et le contexte de la session lors du passage entre le web, la CLI ou le mobile. Utilisez-la pour des projets complexes nécessitant différents outils à diverses étapes.

Voir la compétence