Start a fresh conversation. Replace the highlighted placeholders.
Use ux-flow to design a focused onboarding flow for [target user] to complete [first-value action] in [product], with progressive disclosure, recovery paths, and a clear exit.
Required inputs
[target user]
[first-value action]
[product]
User-approved starter prompt based on a pinned source version; check current skill requirements before running. Task evidence ↗
SKILL.md
name: ux-flowdescription: Design user flows and navigation structure following proven UX patternsrisk: criticalsource: https://github.com/bitjaru/styleseed/tree/main/engine/.claude/skills/ss-flowsource_repo: bitjaru/styleseedsource_type: communitydate_added: 2026-07-01license: MITlicense_source: https://github.com/bitjaru/styleseed/blob/main/LICENSE
UX Flow Designer
When to Use
Use this skill when you need design user flows and navigation structure following proven UX patterns.
When NOT to use
For implementing a single page → use /ss-page after the flow is settled
For copy on each step → use /ss-copy after the structure is settled
For information architecture of an entire product — narrow scope to one flow first
For high-fidelity mockups — this produces a flow map, not pixel-perfect designs
Design a user flow: $0
Description: $ARGUMENTS
Instructions
Read the design system reference:
CLAUDE.md for component inventory
DESIGN-LANGUAGE.md for layout patterns (sections 13-14, 19-20)
components/patterns/ for available building blocks
Apply these UX principles:
Information Architecture
Progressive Disclosure: Show only what's needed at each step. Hide complexity behind logical drill-downs.
Miller's Law: Chunk information into groups of 5-9 items maximum.
Tab Navigation: 3-5 top-level sections via BottomNav
Screen Flow Rules
Every flow must have a clear entry point and clear exit point
Maximum 3 taps to reach any key feature from the home screen
Back navigation must always be available (except root screens)
Error states must provide recovery paths (retry, go back, contact support)
Loading states must use skeleton screens (never spinners in cards)
Page Composition (from DESIGN-LANGUAGE.md)
Follow the Information Pyramid: Hero → KPI Grid → Details → Lists
Each screen should answer ONE primary question
Above the fold: the most important metric or action
Use the 4 section types: Full Card (A), Grid (B), Carousel (C), Hero (D)
Output format:
Flow diagram in ASCII showing screen connections
Screen inventory listing each screen's purpose and key components
Edge cases (empty states, errors, loading) for each screen
Scaffolded pages using PageShell, TopBar, BottomNav patterns
Generate the actual page files using /ss-page conventions.
Example
User request:
Design user flows and navigation structure following proven UX patterns.
Limitations
Use this skill only when the task clearly matches its upstream source and local project context.
Verify commands, generated code, dependencies, credentials, and external service behavior before applying changes.
Do not treat examples as a substitute for environment-specific tests, security review, or user approval for destructive or costly actions.
Execution boundaries
This guide targets an existing StyleSeed project. The listed project paths, components, tokens and /ss-* commands are not bundled in this single-file entrypoint. Discover the actual project root and verify those prerequisites before edits; report absent resources instead of inventing them. Use host-supported invocation and existing project conventions. Layout numbers are design-system choices, not universal usability guarantees. Test keyboard access, responsive overflow and reduced motion on the actual interface.