ux-flow

Solid

Design user flows and screen structure using StyleSeed UX patterns such as progressive disclosure, hub-and-spoke navigation, and information pyramids.

AI & Automation 39,227 stars 6374 forks Updated today MIT

Install

View on GitHub

Quality Score: 97/100

Stars 20%
100
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
98
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

# UX Flow ## Overview Part of [StyleSeed](https://github.com/bitjaru/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: 1. An ASCII flow diagram 2. A screen inventory with each screen's purpose 3. Edge cases for loading, empty, and error states 4. Recommended page scaffold...

Details

Author
sickn33
Repository
sickn33/antigravity-awesome-skills
Created
4 months ago
Last Updated
today
Language
Python
License
MIT

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Listed

ux-flows

When the user wants to design user experience flows for a SaaS product. Use when the user says "user flow," "UX flow," "user journey," "task flow," "how should users navigate," "interaction design," "usability," "user experience," "flow diagram," or needs help mapping how users move through a feature or product. For individual page layouts, see wireframes. For visual design, see ui-design. For interactive demos, see prototype.

1 Updated 1 months ago
lucaspedrozaem
AI & Automation Listed

map-user-flow

Maps multi-step in-product flows — screens, decisions, transitions, platform-native touchpoints (dock, menu bar, widgets, notifications, Live Activity), edge cases, and error states for a feature or user journey. Use when designing or auditing a feature spanning multiple screens, states, or platforms. Not for visual brand design (use create-brand), landing-page architecture (use brief-landing-page), or technical architecture (use architect-system).

10 Updated 2 days ago
hungv47
AI & Automation Featured

draft-flow

Use when asked to design a user flow, map how a user moves through a feature, create a wireframe or flow diagram, or document interaction design for a product brief. Examples: "design the flow for X", "map out the user journey", "create a wireframe for this feature", "how should the UX work for this".

2,266 Updated today
jeremylongshore
Web & Frontend Listed

user-flows-and-guided-paths

Related features and tasks — such as purchase flows, onboarding, or multi-step configuration — should be designed as natural, guided paths that feel coherent and fit the product hierarchy. Use wizards for complex sequential tasks. Use when designing flows, onboarding, checkout, setup sequences, or any multi-step user journey.

12 Updated today
dembrandt
AI & Automation Solid

user-flow-diagram

Generate user flow diagrams and flowcharts using Mermaid and other formats

1,034 Updated today
a5c-ai