/design-check

Design Quick Check

A lightweight self-review for UX quality during implementation. Run this before committing UI code.

Step 1: Identify What to Check

{{argument}}

If argument is a file path:

Read: [file path]

If argument is "current" or empty:

git diff --name-only | grep -E '\.(swift|tsx?)$'

Step 2: Run Design Reviewer

Use the consolidated design-reviewer agent for quick feedback:

Task design-reviewer(mode: "quick-check"): "Quick design check on [file]"

Design Reviewer Prompt

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.

Step 3: Quick Summary

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]

When to Use This

Run /design:check before:

• Committing a new Screen or View
• Adding UI copy (labels, errors, empty states)
• Implementing loading/error states

Quick Reference

State Checklist

[ ] Empty state with illustration + CTA
[ ] Loading state with skeleton/spinner
[ ] Error state with message + retry
[ ] Success state with content

Copy Checklist

[ ] Buttons: [Verb] [Object] format
[ ] Errors: What + Why + What to do
[ ] Empty: Title + Subtitle + CTA
[ ] Placeholders: Examples not labels

Common Fixes

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() }
}

Important Notes

• This is a QUICK check, not a full review
• For thorough review, use /workflows:review
• Focus on immediately actionable feedback
• Skip praise, just report issues