Acerca de
Esta habilidad realiza revisiones exhaustivas de UX/UI evaluando interfaces con base en las heurísticas de Nielsen, los estándares de accesibilidad WCAG 2.1 y la eficiencia de los flujos de usuario. Está diseñada para verificaciones de usabilidad previas al lanzamiento, auditorías de accesibilidad y optimización de formularios/conversiones. Los desarrolladores pueden utilizarla para analizar la carga cognitiva, la compatibilidad con teclado/lectores de pantalla y la efectividad general de la interacción.
Instalación rápida
Claude Code
Recomendadonpx 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-uiCopia y pega este comando en Claude Code para instalar esta habilidad
Documentación
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
- 3.1.1 Lang:
langon<html> - 3.2.1 On focus: No surprise
- 3.2.2 On input: No surprise w/o warn
- 3.3.1 Err id: Clear text
- 3.3.2 Labels: Visible
- 3.3.3 Suggest: Fix hint
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
Tab|Shift+Tab|Enter|Space|Arrow|Esc 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
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
- Labels: Visible, associated
- Placeholder: Examples only, not labels
- Input types: Right (email|tel|number|date) for mobile
- Validation timing: Blur|submit, not keystroke
- Err msgs: Specific ("Email needs @") not generic
- Required: Marked clear
- Grouping: Related grouped
- Autocomplete:
autocompleteset - Tab order: Matches visual
- Multi-step: Progress indicator
- Persistence: Data preserved nav-away
→ 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 scaffoldsetup-tailwind-typescript— Tailwind CSS
Repositorio GitHub
Frequently asked questions
What is the review-ux-ui skill?
review-ux-ui is a Claude Skill by pjt222. Skills package instructions and resources that Claude loads on demand, so Claude can perform review-ux-ui-related tasks without extra prompting.
How do I install review-ux-ui?
Use the install commands on this page: add review-ux-ui to Claude Code as a plugin, or clone its repository into your skills directory, then restart Claude so it picks up the skill.
What category does review-ux-ui belong to?
review-ux-ui is in the Design category, tagged design.
Is review-ux-ui free to use?
Yes. review-ux-ui is listed on AIMCP and free to install. It runs inside Claude, so no separate service account is required to use the skill itself.
Habilidades relacionadas
Utilice la habilidad executing-plans cuando tenga un plan de implementación completo para ejecutar en lotes controlados con puntos de revisión. Esta habilidad carga y revisa críticamente el plan, luego ejecuta tareas en pequeños lotes (por defecto 3 tareas) mientras reporta el progreso entre cada lote para la revisión del arquitecto. Esto asegura una implementación sistemática con puntos de control de calidad integrados.
Esta habilidad despacha un subagente revisor de código para analizar los cambios en el código frente a los requisitos antes de proceder. Debe usarse después de completar tareas, implementar funciones principales o antes de fusionar con la rama principal. La revisión ayuda a detectar problemas de forma temprana al comparar la implementación actual con el plan original.
Esta habilidad proporciona una guía integral para que los desarrolladores conecten servidores MCP a Claude Code mediante transportes HTTP, stdio o SSE. Cubre la instalación, configuración, autenticación y seguridad para integrar servicios externos como GitHub, Notion y APIs personalizadas. Úsala al configurar integraciones MCP, al configurar herramientas externas o al trabajar con el Protocolo de Contexto del Modelo de Claude.
Esta habilidad ayuda a los desarrolladores a elegir entre las interfaces web y CLI de Claude Code mediante el análisis de tareas, y luego permite la teletransportación fluida de sesiones entre estos entornos. Optimiza el flujo de trabajo gestionando el estado y el contexto de la sesión al cambiar entre web, CLI o móvil. Úsala para proyectos complejos que requieren diferentes herramientas en varias etapas.