| name | ux-flow |
| description | Design user flows and screen structure using StyleSeed UX patterns such as progressive disclosure, hub-and-spoke navigation, and information pyramids. |
| category | design |
| risk | safe |
| source | community |
| source_repo | bitjaru/styleseed |
| source_type | community |
| date_added | 2026-04-08 |
| author | bitjaru |
| tags | ["ux","flows","navigation","product-design","styleseed"] |
| tools | ["claude","cursor","codex","gemini"] |
UX Flow
Overview
Part of StyleSeed, this skill designs
flows before screens. It uses proven UX patterns to define entry points, exits,
screen inventory, and navigation structure so the implementation has a coherent
user journey instead of a pile of disconnected pages.
When to Use
- Use when planning onboarding, checkout, account management, dashboards, or
drill-down flows
- Use when a new feature spans multiple screens or modal states
- Use when users need a clear path through a task instead of a single isolated
page
- Use when the UI needs navigation logic before components are built
How It Works
Information Architecture Principles
- progressive disclosure: reveal complexity only when needed
- Miller's Law: chunk content into manageable groups
- Hick's Law: minimize decision overload on each screen
Common Navigation Models
- hub and spoke for dashboards and detail views
- linear flow for onboarding, forms, and checkout
- tab navigation for 3 to 5 top-level areas
Flow Rules
- every flow has a clear entry point
- every flow has a clear exit or success condition
- key features should usually be reachable within three taps from home
- non-root screens need back navigation
- loading, empty, and error states need explicit recovery paths
Output
Provide:
- An ASCII flow diagram
- A screen inventory with each screen's purpose
- Edge cases for loading, empty, and error states
- Recommended page scaffolds and reusable patterns to implement next
Best Practices
- Optimize for clarity before density
- Let one screen answer one primary question
- Keep escape hatches visible for risky or destructive steps
- Define state transitions before drawing detailed layouts
Additional Resources
Limitations
- Use this skill only when the task clearly matches the scope described above.
- Do not treat the output as a substitute for environment-specific validation,
testing, or expert review.
- Stop and ask for clarification if required inputs, permissions, safety
boundaries, or success criteria are missing.
