How do I install the UX Flow skill?

Run npx skillmds add thedixitjain/ux-flow in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

What does the UX Flow skill do?

Design user flows and navigation structure following proven UX patterns It is listed under Web & Frontend on SkillMD.

Is UX Flow safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: makes network calls. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with UX Flow?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is UX Flow free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published UX Flow?

thedixitjain (@thedixitjain) published this skill. Their other Agent Skills are listed on their SkillMD profile.

UX Flow by thedixitjain — Agent Skill

Name: UX Flow
Rating: 4.5 (4 reviews)
Author: thedixitjain

File contents

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.
Hick's Law: Minimize choices per screen. Fewer options = faster decisions.

Navigation Patterns

Hub & Spoke: Dashboard → detail pages → back to dashboard (default for mobile apps)
Linear Flow: Step 1 → Step 2 → Step 3 (for forms, onboarding, checkout)
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.

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.

Source: sickn33/agentic-awesome-skills → skills/ux-flow/SKILL.md

Also appears in: sickn33/agentic-awesome-skills/plugins/agentic-awesome-skills/skills/ux-flow/SKILL.md, sickn33/agentic-awesome-skills/plugins/agentic-awesome-skills-claude/skills/ux-flow/SKILL.md

---name: ux-flowdescription: Design user flows and navigation structure following proven UX patterns--- # 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 1. 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 2. 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. - **Hick's Law**: Minimize choices per screen. Fewer options = faster decisions. ### Navigation Patterns - **Hub & Spoke**: Dashboard → detail pages → back to dashboard (default for mobile apps) - **Linear Flow**: Step 1 → Step 2 → Step 3 (for forms, onboarding, checkout) - **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) 3. 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 4. Generate the actual page files using `/ss-page` conventions. ## 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. --- **Source:** [`sickn33/agentic-awesome-skills`](https://github.com/sickn33/agentic-awesome-skills) → `skills/ux-flow/SKILL.md` **Also appears in:** `sickn33/agentic-awesome-skills/plugins/agentic-awesome-skills/skills/ux-flow/SKILL.md`, `sickn33/agentic-awesome-skills/plugins/agentic-awesome-skills-claude/skills/ux-flow/SKILL.md`

Frequently asked questions