From agent-almanac
Reviews UX/UI with Nielsen's heuristics, WCAG 2.1 accessibility, keyboard and screen reader audits, user flow analysis, and form usability evaluation. Use before release or to assess accessibility compliance.
How this skill is triggered — by the user, by Claude, or both
Slash command
/agent-almanac:review-ux-uiThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Evaluate user experience and interface design for usability, accessibility, and effectiveness.
Evaluate user experience and interface design for usability, accessibility, and effectiveness.
Evaluate the 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? |
For each heuristic, rate severity of violations:
| Severity | Description |
|---|---|
| 0 | Not a usability problem |
| 1 | Cosmetic — fix if time allows |
| 2 | Minor — low priority fix |
| 3 | Major — important to fix, high priority |
| 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 |
Expected: All 10 heuristics evaluated with specific findings and severity ratings. On failure: If time-constrained, focus on heuristics 1, 3, 5, and 9 (most impactful for user experience).
alt="")lang attribute set on <html>Expected: WCAG 2.1 AA criteria systematically checked with pass/fail per criterion. On failure: Use automated tools (axe-core, Lighthouse) for initial scan, then manual testing for criteria that require human judgement.
Using only Tab, Shift+Tab, Enter, Space, Arrow keys, and Escape:
## 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 |
Test with NVDA (Windows), VoiceOver (macOS/iOS), or 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" |
Expected: Complete task flows tested with keyboard-only and screen reader. On failure: If a screen reader is unavailable, inspect ARIA attributes and semantic HTML as a proxy.
Map and evaluate key user 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)
Expected: Critical user flows mapped with friction points identified and rated. On failure: If user analytics are unavailable, assess flows based on task complexity and number of steps.
Expected: Cognitive load assessed with specific areas of overload or underload identified. On failure: If cognitive load is difficult to assess objectively, use the "squint test" — squint at the screen and see if the structure and hierarchy are still apparent.
For each form in the application:
autocomplete attributes set for standard fields (name, email, address, cc-number)Expected: Each form assessed against the checklist with specific issues documented. On failure: If there are many forms, prioritize the highest-traffic forms (registration, checkout, contact).
## 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. ...
Expected: Review provides prioritised, actionable recommendations with severity ratings. On failure: If the review surfaces too many issues, categorise into "must fix" (severity 3-4) and "should fix" (severity 1-2).
review-web-design — visual design review (layout, typography, colour — complementary to UX)scaffold-nextjs-app — Next.js application scaffoldingsetup-tailwind-typescript — Tailwind CSS for design system implementationnpx claudepluginhub pjt222/agent-almanacEvaluates user interfaces using Nielsen's 10 usability heuristics to identify violations like poor system status visibility, inconsistency, and error-prone designs. Reports severity, location, and fixes for UX reviews.
Evaluates UI flows and screens against Nielsen's 10 usability heuristics, flags friction points, and recommends fixes. Useful for UX reviews, audits, and design critiques.
Audits UI screens against Nielsen's heuristics and mobile UX best practices, prioritizing usability issues with remediation suggestions.