ui-ux-reviewer

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