ux-review
Multi-perspective UX review combining usability heuristics, WCAG accessibility checks, and interaction design analysis. Use when reviewing UI components before release, evaluating user flows for usability issues, conducting design critiques, or auditing accessibility compliance.
- Installs
- 118
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/nickcrew/claude-cortex --skill ux-review- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads ux-review automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
UX Review
Comprehensive user experience review that coordinates usability, accessibility, and interaction design perspectives for thorough analysis of components, flows, or features.
When to Use This Skill
- Reviewing new components or features before release
- Evaluating existing flows for usability issues
- PR reviews that touch UI/UX code
- Design system component reviews
- Onboarding flow or checkout flow optimization
- Avoid using for purely visual/aesthetic reviews — use
ui-design-aestheticsinstead
Workflow
Step 1: Gather Context
Answer these questions before reviewing:
- What is the user trying to accomplish?
- What is this component's role in the larger flow?
- Who are the target users (personas, skill level)?
- What are the success criteria?
Step 2: Run Heuristic Scan (Nielsen's 10)
Evaluate the interface against each heuristic:
| Heuristic | Check |
|---|---|
| Visibility of system status | Does the user always know what's happening? |
| Match with real world | Does it use familiar language and concepts? |
| User control and freedom | Can users undo, go back, escape? |
| Consistency and standards | Does it follow platform conventions? |
| Error prevention | Are mistakes prevented before they happen? |
| Recognition over recall | Is information visible rather than memorized? |
| Flexibility and efficiency | Are there shortcuts for expert users? |
| Aesthetic and minimalist design | Is every element necessary? |
| Error recovery | Are error messages helpful and actionable? |
| Help and documentation | Is guidance available when needed? |
Step 3: Multi-Perspective Analysis
Usability Perspective
- User flow: Is the path to completion clear and efficient?
- Information architecture: Is content organized logically?
- Cognitive load: Is the interface overwhelming?
- Mental models: Does it work like users expect?
Accessibility Perspective (WCAG 2.1 AA)
- Keyboard navigation: Can everything be done without a mouse?
- Screen reader: Is the experience equivalent for assistive tech users?
- Color contrast: Do all text/UI elements meet 4.5:1 ratio?
- Focus management: Is focus order logical, visible, and never trapped?
<!-- Example: Accessible button with proper ARIA -->
<button aria-label="Close dialog" aria-describedby="close-hint">
<svg aria-hidden="true"><!-- icon --></svg>
</button>
<span id="close-hint" class="sr-only">Press Escape to close</span>
Interaction Design Perspective
- State coverage: Are all states handled (loading, empty, error, success)?
- Feedback: Does the user know their action worked?
- Transitions: Are animations purposeful and under 300ms?
- Progressive disclosure: Is complexity revealed appropriately?
Step 4: Prioritize Findings
Categorize every finding:
| Priority | Criteria | Action |
|---|---|---|
| Critical | Blocks usability or fails WCAG AA | Must fix before release |
| High | Significantly degrades experience | Fix in current sprint |
| Enhancement | Improves delight and efficiency | Backlog for next iteration |
| Future | Long-term improvements | Track in roadmap |
Step 5: Produce Review Report
## UX Review: [Component/Flow Name]
### Summary
[2-3 sentence executive summary]
### Critical Issues
- [ ] Issue 1: [Description, impact, WCAG criterion if applicable]
- [ ] Issue 2: [Description, impact]
### Recommendations by Category
#### Usability
| Finding | Impact | Recommendation |
|---------|--------|----------------|
| [Issue] | High/Med/Low | [Fix] |
#### Accessibility
| Finding | WCAG Criterion | Recommendation |
|---------|----------------|----------------|
| [Issue] | [2.x.x Level] | [Fix] |
#### Interaction Design
| Finding | Impact | Recommendation |
|---------|--------|----------------|
| [Issue] | High/Med/Low | [Fix] |
### Next Steps
1. Create issues for critical findings
2. Add accessibility requirements to acceptance criteria
3. Schedule follow-up review after fixes
Focus Area Deep Dives
Use --focus to narrow the review scope:
--focus=ux: User flow mapping, task efficiency, error recovery, learnability--focus=a11y: WCAG 2.1 AA audit, keyboard nav, screen reader, contrast, focus management--focus=interaction: State coverage, feedback timing, micro-interactions, animation review
Best Practices
- Test with real content — Lorem ipsum hides information architecture problems
- Check all states — Empty, loading, error, success, and edge-case states
- Verify keyboard flow — Tab through the entire component without a mouse
- Use browser dev tools — Lighthouse accessibility audit catches low-hanging fruit
- Prioritize ruthlessly — A focused list of critical fixes beats a wall of suggestions
FAQ
What does the ux-review skill do?
Multi-perspective UX review combining usability heuristics, WCAG accessibility checks, and interaction design analysis. Use when reviewing UI components before release, evaluating user flows for usability issues, conducting design critiques, or auditing accessibility compliance.
How do I install ux-review?
Run npx skills add https://github.com/nickcrew/claude-cortex --skill ux-review in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/ux-review/ (personal) or .claude/skills/ux-review/ (project).
Which AI agents can use ux-review?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is ux-review safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains ux-review?
It is published by nickcrew in nickcrew/claude-cortex. It has 118 recorded installs.
More from nickcrew/claude-cortex
react-performance-optimization
nickcrew/claude-cortex
React performance optimization patterns using memoization, code splitting, and efficient rendering strategies. Use when optimizing slow React applications, reducing bundle size, or improving user experience with large datasets.
owasp-top-10
nickcrew/claude-cortex
OWASP Top 10 security vulnerabilities with detection and remediation patterns. Use when conducting security audits, implementing secure coding practices, or reviewing code for common security vulnerabilities.
ui-design-aesthetics
nickcrew/claude-cortex
Generates high-quality, non-generic UI designs with a focus on performance, progressive disclosure, and distinctive aesthetics.
threat-modeling-techniques
nickcrew/claude-cortex
Open the skill to read its SKILL.md instructions.
token-efficiency
nickcrew/claude-cortex
Compressed communication using symbols and abbreviations. Use when context is limited or brevity is needed.
helm-chart-patterns
nickcrew/claude-cortex
Open the skill to read its SKILL.md instructions.
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.