UI/UX 리뷰 스킬 마켓플레이스 - 4대 권위 기준(NNg, Laws of UX, Apple HIG, WCAG) 기반 분석
npx claudepluginhub galaxy4276/ui-ux-reviewerUI/UX 품질을 NNg 10 Heuristics, Laws of UX, Apple HIG, WCAG 4대 권위 기준으로 분석하고 개선안을 제안하는 스킬. React Native / 모바일 / 웹 컴포넌트 코드 또는 화면 설명을 입력받아 근거 기반 UX 평가와 구체적인 수정 방향을 제시한다.
galaxy4276Analyze UI/UX quality against 4 authoritative standards and get actionable improvement suggestions.
English | 한국어
| 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) |
Run these commands inside Claude Code:
/plugin marketplace add galaxy4276/ui-ux-reviewer
/plugin install ui-ux-reviewer@ui-ux-skills
git clone https://github.com/galaxy4276/ui-ux-reviewer.git
cd ui-ux-reviewer
bash install.sh
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
## 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 | 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 |
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
Claude Code is Anthropic's official CLI. Its plugin system lets you extend Claude with domain-specific knowledge and custom workflows.
MIT