ux-flow
Creates coherent user journeys and information architecture before building screen components.
Install
mkdir -p .claude/skills/ux-flow && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/13376" && unzip -o skill.zip -d .claude/skills/ux-flow && rm skill.zipInstalls to .claude/skills/ux-flow
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Design user flows and screen structure using StyleSeed UX patterns such as progressive disclosure, hub-and-spoke navigation, and information pyramids.Key capabilities
- →Plan onboarding, checkout, or account management flows
- →Design screen structures for new features spanning multiple screens
- →Define entry and exit points for user flows
- →Apply progressive disclosure to reveal complexity when needed
- →Utilize hub-and-spoke navigation for dashboards
- →Ensure back navigation for non-root screens
How it works
The skill uses StyleSeed UX patterns and information architecture principles to define user journeys, screen inventory, and navigation structures before component implementation.
Inputs & outputs
When to use ux-flow
- →Planning app navigation
- →Designing onboarding flows
- →Structuring complex UI tasks
About this skill
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
When not to use it
- →The task is not related to designing user flows or screen structure
- →The task involves only a single isolated page without navigation logic
- →The task is to build components before defining navigation logic
Limitations
- →It focuses on designing flows before screens
- →It uses proven UX patterns to define entry points, exits, screen inventory, and navigation structure
- →It is for planning onboarding, checkout, account management, dashboards, or drill-down flows
How it compares
This skill prioritizes designing user flows and screen structures before building components, ensuring a coherent user journey from the outset, unlike a component-first approach.
Compared to similar skills
ux-flow side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| ux-flow (this skill) | 0 | 4mo | No flags | Intermediate |
| ui-ux-pro-max | 1,909 | 5mo | Review | Intermediate |
| penpot-uiux-design | 27 | 6mo | Review | Advanced |
| ui-ux-designer | 41 | 4mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
ui-ux-pro-max
nextlevelbuilder
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient.
penpot-uiux-design
github
Comprehensive guide for creating professional UI/UX designs in Penpot using MCP tools. Use this skill when: (1) Creating new UI/UX designs for web, mobile, or desktop applications, (2) Building design systems with components and tokens, (3) Designing dashboards, forms, navigation, or landing pages, (4) Applying accessibility standards and best practices, (5) Following platform guidelines (iOS, Android, Material Design), (6) Reviewing or improving existing Penpot designs for usability. Triggers: "design a UI", "create interface", "build layout", "design dashboard", "create form", "design landing page", "make it accessible", "design system", "component library".
ui-ux-designer
sickn33
Create interface designs, wireframes, and design systems. Masters user research, accessibility standards, and modern design tools. Specializes in design tokens, component libraries, and inclusive design. Use PROACTIVELY for design systems, user flows, or interface optimization.
interactive-portfolio
davila7
Expert in building portfolios that actually land jobs and clients - not just showing work, but creating memorable experiences. Covers developer portfolios, designer portfolios, creative portfolios, and portfolios that convert visitors into opportunities. Use when: portfolio, personal website, showcase work, developer portfolio, designer portfolio.
paywall-upgrade-cro
davila7
When the user wants to create or optimize in-app paywalls, upgrade screens, upsell modals, or feature gates. Also use when the user mentions "paywall," "upgrade screen," "upgrade modal," "upsell," "feature gate," "convert free to paid," "freemium conversion," "trial expiration screen," "limit reached screen," "plan upgrade prompt," or "in-app pricing." Distinct from public pricing pages (see page-cro) — this skill focuses on in-product upgrade moments where the user has already experienced value.
aesthetic
mrgoonie
Create aesthetically beautiful interfaces following proven design principles. Use when building UI/UX, analyzing designs from inspiration sites, generating design images with ai-multimodal, implementing visual hierarchy and color theory, adding micro-interactions, or creating design documentation. Includes workflows for capturing and analyzing inspiration screenshots with chrome-devtools and ai-multimodal, iterative design image generation until aesthetic standards are met, and comprehensive design system guidance covering BEAUTIFUL (aesthetic principles), RIGHT (functionality/accessibility), SATISFYING (micro-interactions), and PEAK (storytelling) stages. Integrates with chrome-devtools, ai-multimodal, media-processing, ui-styling, and web-frameworks skills.