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.
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
# [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
### 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
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?