Agent skill

ux-flow-creation

Generate user experience flow documentation following the UX-FLOW template. Use when designing UI flows, documenting user journeys, or when the user asks for UX documentation.

Stars 163
Forks 31

Install this agent skill to your Project

npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/ux-flow-creation

SKILL.md

UX Flow Creation Skill

Purpose: Generate comprehensive user experience documentation following the project template. Creates consistent UX docs that link to related API and feature documentation.

Trigger

When: User requests UX documentation OR new feature needs UI design Context Needed: Feature requirements, user personas, screen designs MCP Tools: mcp_payment-syste_search_full_text, read_file

Required Sections

markdown
# [Feature] - UX Flow

## User Personas

- Primary: [persona]
- Secondary: [persona]

## Screens

1. [Screen Name]
   - Purpose: ...
   - Key elements: ...
   - Interactions: ...

## User Journeys

### Happy Path

1. User does X
2. System responds with Y
3. User sees Z

### Error Handling

- Scenario: ...
- Display: ...
- Recovery: ...

Screen Documentation Format

markdown
### Screen: [Name]

**Purpose:** [What this screen accomplishes]

**Entry Points:**

- From: [Previous screen]
- Trigger: [User action]

**Key Elements:**
| Element | Type | Behavior |
|:--------|:-----|:---------|
| [name] | button | [action] |

**Exit Points:**

- To: [Next screen]
- Condition: [What triggers navigation]

Accessibility Checklist

  • Keyboard navigation
  • Screen reader support
  • Color contrast (WCAG AA)
  • Touch targets (44x44px min)
  • Focus indicators

Reference

  • 06-UX-FLOW-TEMPLATE.md
  • VISUAL-IDENTITY.md

Expand your agent's capabilities with these related and highly-rated skills.

Didn't find tool you were looking for?

Be as detailed as possible for better results