UI/UX Reviewer — Claude Code Plugin
Analyze UI/UX quality against 4 authoritative standards and get actionable improvement suggestions.
English | 한국어
Evaluation Standards
| Standard | Description |
|---|---|
| NNg 10 Heuristics | Jakob Nielsen's 10 usability heuristics |
| Laws of UX | Psychology-based UX laws (Fitts's, Hick's, Miller's, and more) |
| Apple HIG | Apple Human Interface Guidelines for mobile |
| WCAG 2.2 | Web Content Accessibility Guidelines (Level A / AA) |
Installation
Option 1: Claude Code Marketplace (Recommended)
Run these commands inside Claude Code:
/plugin marketplace add galaxy4276/ui-ux-reviewer
/plugin install ui-ux-reviewer@ui-ux-skills
Option 2: Manual (Legacy Standalone)
git clone https://github.com/galaxy4276/ui-ux-reviewer.git
cd ui-ux-reviewer
bash install.sh
Usage
After installation, use any of the following triggers in Claude Code:
ux review
ui audit
is this screen okay?
any accessibility issues?
review this component
check this against NNg
apply Laws of UX
Sample Output
## UI/UX Review: ProfileCard
### Summary
Structure is solid overall, but accessibility and touch target sizes need improvement.
### Issues
| # | Severity | Standard | Issue | Suggestion |
|---|----------|--------------|------------------------------|------------------------------|
| 1 | 🔴 | WCAG 1.1.1 | Missing accessibilityLabel | Add descriptive label |
| 2 | 🟡 | Fitts's Law | Button is 32×32pt | Expand to minimum 44×44pt |
| 3 | 🟢 | NNg #1 | No loading feedback | Add skeleton UI |
### What's Working Well
- Safe Area correctly applied
- Status expressed with color + text + icon combination
Severity Levels
| Severity | Meaning |
|---|---|
| 🔴 Critical | Blocks usage, accessibility failure, risk of data loss |
| 🟡 Warning | Degrades usability, may increase drop-off rate |
| 🟢 Suggestion | Nice to improve, but not required |
Repository Structure
ui-ux-reviewer/
├── .claude-plugin/
│ ├── plugin.json # Claude Code plugin metadata
│ └── marketplace.json # Marketplace catalog
├── skills/
│ └── ui-ux-reviewer/
│ ├── SKILL.md # Skill definition
│ └── references/
│ ├── nngroup.md # NNg 10 Heuristics (detailed)
│ ├── laws-of-ux.md # Laws of UX (detailed)
│ ├── apple-hig.md # Apple HIG mobile guide
│ └── wcag.md # WCAG accessibility checklist
├── install.sh # Legacy manual install script
└── README.md
What is Claude Code?
Claude Code is Anthropic's official CLI. Its plugin system lets you extend Claude with domain-specific knowledge and custom workflows.
License
MIT