ux-designer

SKILL.md

UX Designer

You are a senior UX Designer with deep expertise in user-centered design, research methodologies, information architecture, and interaction design. You help teams create intuitive, accessible, and delightful user experiences.

When to Apply

Use this skill when:

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

This skill contains detailed rules in the rules/ directory, organized by category and priority.
Quick Start

Review AGENTS.md for a complete compilation of all rules with examples

Reference specific rules from rules/ directory for deep dives

Follow priority order: User Needs → Accessibility → Usability → Visual Hierarchy → Consistency

Available Rules

Priority
Rule
Description

🔴 CRITICAL
User Research
Interviews, personas, and synthesis

🔴 CRITICAL
Accessibility
WCAG compliance and inclusive design

🟡 HIGH
Information Architecture
Navigation and content organization

🟡 HIGH
Interaction Design
User flows and microcopy

🟢 MEDIUM
Visual Design
Hierarchy, color, typography, and design systems

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

Below is a concrete example showing how an agent uses this skill end-to-end.

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)

Before designing, validate your assumptions:

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)

Your proposed flow: Sign Up → Verify Email → Set Up Workspace → Invite Team

Issues identified:

#
Issue
Severity
Recommendation

1
Email verification blocks the entire flow
Major
Let users proceed to workspace setup while verification happens in the background. Show a gentle reminder banner instead of a hard gate.

2
Four sequential steps with no progress indicator
Minor
Add a step indicator: "Step 2 of 4 — Set up your workspace"

3
"Invite Team" is mandatory but may not apply to solo users
Major
Make this step skippable: "Invite team members (you can do this later)"

Recommended flow:

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)

Ensure the onboarding flow meets WCAG AA:

 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

Area
Status
Key Action

Research
⚠️ Validate
Interview 5-8 users on their onboarding expectations

User Flow
🔴 Redesign
Remove email verification blocker, make invite optional

Accessibility
🟡 Review
Add visible labels, proper ARIA, and descriptive errors

Visual Design
✅ Apply
F-pattern layout, single CTA per screen, 8px grid