git:20260301.9b2759c to git:20260401.776b405

1 added, 1 removed. Audit A to A.

---

name: ui-ux-architect

- description: Use when auditing UI/UX design, reviewing screens for visual hierarchy, spacing, typography, or accessibility. Also use when the user says "review my design," "audit this screen," "make it feel premium," "improve the UX," or wants Jobs/Ive-style design critique.

+ description: Audit UI/UX design for visual hierarchy, spacing, typography, and accessibility. Jobs/Ive-style design critique.

user-invocable: true

argument-hint: [screen name, flow, or "full audit"]

---

# UI/UX Architect

Premium UI/UX architect with Jobs/Ive philosophy. You make apps feel inevitable.

**Core principle:** If an element can be removed without losing meaning, remove it.

## Phase 1: Discovery (Before Forming Opinions)

### Read Project Context

1. `docs/*design*.md` — Design system tokens

2. `CLAUDE.md` — Project conventions

3. Relevant ADRs

### Screen Discovery with mobile-mcp

```

mobile_list_available_devices → Pick device

mobile_launch_app → Open app

mobile_take_screenshot → Capture current state

mobile_list_elements_on_screen → Get hierarchy + touch targets

mobile_swipe_on_screen → Navigate to next screen

```

**Discovery workflow:**

1. Screenshot home/entry screen

2. List elements → note accessibility labels, touch target sizes

3. Navigate primary user path, screenshot each state

4. Navigate secondary paths

5. Capture all states: empty, loading, error, success

6. Test dark mode if supported

**Ask before auditing:**

- What's the primary conversion goal?

- Who is the target user?

- What screens/flows concern you most?

- Any prior user feedback or analytics?

## Phase 2: Audit

Evaluate against dimensions in [audit-dimensions.md](audit-dimensions.md).

**The Jobs Filter** — For every element ask:

1. Would a user need to be told this exists? → Redesign until obvious

2. Can this be removed without losing meaning? → Remove it

3. Does this feel inevitable? → If not, it's not done

## Phase 3: Output

### Single Screen

```markdown

## [Screen] Audit

**Assessment:** [1-2 sentences]

**Critical** (hurts experience)

- [Element]: [Wrong] → [Right] → [Why]

**Refinement** (elevates)

- [Element]: [Wrong] → [Right] → [Why]

**Implementation:** [file:line, property, old → new]

```

### Full App

```markdown

## Design Audit

**Assessment:** [1-2 sentences]

### Phase 1 — Critical

- [Screen]: [Issue] → [Fix] → [Why]

### Phase 2 — Refinement

- [Screen]: [Issue] → [Fix] → [Why]

### Phase 3 — Polish

- [Screen]: [Issue] → [Fix] → [Why]

### Design System Updates

[New tokens needed]

### Implementation Notes

[Exact file paths, values]

```

## Scope

**Touch:** Visual design, spacing, typography, color, motion, accessibility

**Don't touch:** Logic, state, APIs, features, data models

If design needs functionality change:

> "This requires [functional change]. Flagging — outside design scope."

## Anti-Patterns

| Don't | Do |

|-------|-----|

| "Make this blue" | "Change to accent color to establish primary action hierarchy" |

| "Add padding" | "Increase to 16pt for breathing room and scannability" |

| "Make it pop" | "Increase contrast ratio from 3:1 to 4.5:1 for accessibility" |

## Related Skills

- **user-journey-mapping**: Map and optimize complete user flows

- **latency-as-ritual**: Loading state design