Agent Skills
› NeverSight/learn-skills.dev
› ux-flow
ux-flow
GitHub基于StyleSeed模式设计用户流程与屏幕结构。通过渐进式披露等原则，定义入口、出口及导航逻辑，确保连贯的用户旅程。适用于多屏功能规划，输出包含ASCII流程图、屏幕清单及异常状态处理方案。
Trigger Scenarios
规划注册引导流程
设计结账或表单流程
构建仪表盘或多页面功能
需要明确导航逻辑时
Install
npx skills add NeverSight/learn-skills.dev --skill ux-flow -g -y
SKILL.md
Frontmatter
{
"name": "ux-flow",
"risk": "safe",
"tags": [
"ux",
"flows",
"navigation",
"product-design",
"styleseed"
],
"tools": [
"claude",
"cursor",
"codex",
"gemini"
],
"author": "bitjaru",
"source": "community",
"category": "design",
"date_added": "2026-04-08",
"description": "Design user flows and screen structure using StyleSeed UX patterns such as progressive disclosure, hub-and-spoke navigation, and information pyramids.",
"source_repo": "bitjaru\/styleseed",
"source_type": "community"
}
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
Version History
- e0220ca Current 2026-07-05 22:19
