UX Designer

When to Apply

• Planning or conducting user research
• Creating wireframes, mockups, or prototypes
• Designing user flows and task flows
• Building personas or user journey maps
• Writing UX microcopy and interface text
• Reviewing designs for usability and accessibility
• Structuring information architecture
• Creating design system components

How to Use This Skill

rules/

Quick Start

1. Review AGENTS.md for a complete compilation of all rules with examples
2. Reference specific rules from

   rules/

   directory for deep dives
3. Follow priority order: User Needs → Accessibility → Usability → Visual Hierarchy → Consistency

Available Rules

UX Design Process

1. Discover & Research (CRITICAL)

• Conduct user interviews and surveys
• Analyze existing analytics and heatmaps
• Perform competitive analysis
• Create empathy maps and identify pain points

2. Define (CRITICAL)

• Build user personas grounded in real data
• Map user journeys end-to-end
• Define problem statements using "How Might We" framing
• Prioritize features by user impact and feasibility

3. Ideate & Design (HIGH)

• Sketch multiple concepts before committing
• Create low → mid → high-fidelity wireframes
• Design responsive layouts for all breakpoints

4. Prototype & Test (HIGH)

• Build interactive prototypes for key flows
• Conduct moderated and unmoderated usability tests
• Measure task success rate, time on task, and error rate
• Iterate based on findings

5. Handoff & Iterate (MEDIUM)

• Prepare detailed design specifications with all states
• Document interaction states and edge cases
• Review implemented designs against specs

Deliverable Templates

Persona Template

## [Persona Name]
**Age:** [Age] | **Occupation:** [Job Title] | **Location:** [City]

### Goals
- [Primary goal related to the product]
- [Secondary goal]

### Pain Points
- [Frustration with current solutions]
- [Unmet need]

### Behaviors
- [How they currently solve the problem]
- [Technology comfort level]

> "[A representative quote that captures their mindset]"

User Flow Template

## Flow: [Task Name]
**Goal:** [What the user is trying to accomplish]
**Entry Point:** [Where the user starts]
**Success Criteria:** [What indicates task completion]

### Steps
1. **[Screen/State]** → User action → [Next screen/state]
2. **[Screen/State]** → User action → [Success state]

### Error States
- **[Error condition]** → [Recovery path]

### Decision Points
- **[Decision]** → Path A: [outcome] | Path B: [outcome]

Design Review Output Format

## Design Review: [Screen/Feature Name]

### Usability Issues 🔴
1. **[Issue title]** (Severity: Critical/Major/Minor)
   - **What:** [Description of the problem]
   - **Why it matters:** [Impact on user experience]
   - **Recommendation:** [Specific fix or improvement]

### Accessibility Concerns 🟠
1. **[Issue title]**
   - **WCAG Criterion:** [Specific guideline reference]
   - **Required fix:** [How to resolve]

### Improvement Opportunities 🟡
1. **[Suggestion]** — Current: [what exists] → Proposed: [what's better]

### Strengths ✅
- [What's working well and should be preserved]

Worked Example

User Prompt

"I'm building a SaaS onboarding flow. New users sign up, verify their email, set up their workspace, and invite team members. Can you review this plan and give me UX feedback?"

Agent Response (applying UX rules)

Step 1 — Research Check (from research.md)

• Do users need a workspace? Interview 5-8 target users to confirm this matches their mental model. Ask: "Walk me through setting up a new tool at work."
• Build a persona to focus the flow. Example: "Alex, a team lead onboarding 4 people, wants to get the tool running in under 5 minutes."

Step 2 — Flow Analysis (from interaction-design.md)

Sign Up → Workspace Setup → [Optional] Invite Team → Dashboard
              ↑                    ↑
          Progress bar         "Skip for now"
          Step 1 of 3          link available

Email verification runs in background → banner until confirmed

Step 3 — Accessibility Review (from accessibility.md)

• All form inputs have visible labels (not just placeholders)
• "Continue" buttons have minimum 44×44px touch targets
• Error messages are descriptive: "Workspace name must be 3-50 characters" not "Invalid input"
• Progress indicator is conveyed to screen readers via

  aria-live

• Color is not the only indicator of current step (use number + label)

Step 4 — Visual Hierarchy (from visual-design.md)

• Primary CTA ("Continue") should be the most visually dominant element — full-width, high contrast
• Skip links ("Skip for now") should be visually secondary — text-only, muted color
• Form fields should use consistent 8px spacing with clear section grouping
• Limit each screen to one primary action to reduce decision fatigue

Summary