Quick UX self-review during implementation. Usage: /design:check [file path or current changes]
Analyzes UI code for common UX issues like copy quality and state handling, providing actionable fixes.
/plugin marketplace add get-mellow/claude-plugins/plugin install mellow-engineering@mellow-plugins[file path or 'current' for uncommitted changes]A lightweight self-review for UX quality during implementation. Run this before committing UI code.
If argument is a file path:
Read: [file path]
If argument is "current" or empty:
git diff --name-only | grep -E '\.(swift|tsx?)$'
Use the consolidated design-reviewer agent for quick feedback:
Task design-reviewer(mode: "quick-check"): "Quick design check on [file]"
Quick design check on this file:
File: [content]
Check for:
## Copy Quality
1. Button labels specific? (not "OK", "Submit", "Yes")
2. Error messages helpful? (what happened + what to do)
3. Empty states have guidance? (not just "No items")
4. Verbs consistent? (Create/Add, Delete/Remove, etc.)
5. Loading text appropriate? (or just spinner for <2s)
## State Handling
1. Empty state handled? (when no data exists)
2. Loading state visible? (skeleton or spinner)
3. Error state with retry? (not silent failure)
4. All switch cases covered? (exhaustive)
5. Boolean flags vs enum? (prefer enum for >2 states)
Only report issues found, skip if good.
Format: P1/P2/P3 with line number and suggested fix.
Provide a brief summary:
## Design Check: [filename]
**Status:** ✅ Good / ⚠️ Minor Issues / ❌ Issues Found
### Issues (if any)
**P2: [Issue]**
- Line [X]: [description]
- Fix: [suggestion]
### Quick Fixes
1. [Actionable fix 1]
2. [Actionable fix 2]
Run /design:check before:
[ ] Empty state with illustration + CTA
[ ] Loading state with skeleton/spinner
[ ] Error state with message + retry
[ ] Success state with content
[ ] Buttons: [Verb] [Object] format
[ ] Errors: What + Why + What to do
[ ] Empty: Title + Subtitle + CTA
[ ] Placeholders: Examples not labels
Generic button:
// ❌ Before
Button("OK") { }
// ✅ After
Button("Save Note") { }
Missing error state:
// ❌ Before
if isLoading { ProgressView() }
else { ContentView() }
// ✅ After
switch state {
case .loading: LoadingView()
case .error(let e): ErrorView(error: e, retry: retry)
case .success(let data): ContentView(data: data)
}
Vague error:
// ❌ Before
Text("Error")
// ✅ After
VStack {
Text("Couldn't save note")
Text("Check your connection and try again")
Button("Retry") { retry() }
}
/workflows:review