By galaxy4276
UI/UX 품질을 NNg 10 Heuristics, Laws of UX, Apple HIG, WCAG 4대 권위 기준으로 분석하고 개선안을 제안하는 스킬. React Native / 모바일 / 웹 컴포넌트 코드 또는 화면 설명을 입력받아 근거 기반 UX 평가와 구체적인 수정 방향을 제시한다.
npx claudepluginhub galaxy4276/ui-ux-reviewer --plugin ui-ux-reviewerAnalyze 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
Ultra-compressed communication mode. Cuts ~75% of tokens while keeping full technical accuracy by speaking like a caveman.
Comprehensive UI/UX design plugin for mobile (iOS, Android, React Native) and web applications with design systems, accessibility, and modern patterns
Creative skill for generating algorithmic and generative art. Produces visual designs using mathematical patterns, fractals, and procedural generation.
Frontend design skill for UI/UX implementation
Humanise text and remove AI writing patterns. Detects and fixes 24 AI tell-tales including inflated language, promotional tone, AI vocabulary, filler phrases, sycophantic tone, and formulaic structure.
Expert guidance for Next.js Cache Components and Partial Prerendering (PPR). Proactively activates in projects with cacheComponents: true, providing patterns for 'use cache' directive, cacheLife(), cacheTag(), cache invalidation, and parameter permutation rendering.