Agent Skills › bitjaru/styleseed › ss-flow

ss-flow

GitHub

用于设计用户流程与导航结构，遵循UX模式。通过应用渐进式披露、米勒定律等原则，生成ASCII流程图、屏幕清单及边缘情况处理，为后续页面实现提供清晰的信息架构和交互逻辑。

engine/.claude/skills/ss-flow/SKILL.md bitjaru/styleseed

Trigger Scenarios

需要设计用户操作流程规划应用导航结构优化信息层级与交互路径

Install

npx skills add bitjaru/styleseed --skill ss-flow -g -y

More Options

Non-standard path

npx skills add https://github.com/bitjaru/styleseed/tree/main/engine/.claude/skills/ss-flow -g -y

Use without installing

npx skills use bitjaru/styleseed@ss-flow

指定 Agent (Claude Code)

npx skills add bitjaru/styleseed --skill ss-flow -a claude-code -g -y

安装 repo 全部 skill

npx skills add bitjaru/styleseed --all -g -y

预览 repo 内 skill

npx skills add bitjaru/styleseed --list

SKILL.md

Frontmatter

{
    "name": "ss-flow",
    "description": "Design user flows and navigation structure following proven UX patterns",
    "allowed-tools": "Read, Write, Edit, Grep, Glob, Bash",
    "argument-hint": "[flow-name] [description]"
}

UX Flow Designer

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.