Ss Flow
- 224 installs
- 868 repo stars
- Updated August 3, 2026
- bitjaru/styleseed
ss-flow is a Claude Code skill that designs user flows and navigation structure following proven UX patterns.
About
ss-flow is a StyleSeed skill that designs a user flow and its navigation structure using established UX patterns. A developer uses it before implementing individual pages to map screens, entry and exit points, and edge cases for one flow. It outputs an ASCII flow diagram, a screen inventory, and scaffolded pages using the design system's shell patterns.
- Designs user flows and navigation structure from proven UX patterns
- Applies progressive disclosure, Miller's Law, and Hick's Law
- Outputs an ASCII flow map, screen inventory, and scaffolded pages
Ss Flow by the numbers
- 224 all-time installs (skills.sh)
- Ranked #909 of 1,880 Design & UI/UX skills by installs in the Skillselion catalog
- Data as of Aug 5, 2026 (Skillselion catalog sync)
ss-flow capabilities & compatibility
- Capabilities
- user flow design · navigation design · information architecture · page scaffold
- Use cases
- ui design · frontend
What ss-flow says it does
Design user flows and navigation structure following proven UX patterns
Maximum **3 taps** to reach any key feature from the home screen
**Flow diagram** in ASCII showing screen connections
npx skills add https://github.com/bitjaru/styleseed --skill ss-flowAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 224 |
|---|---|
| repo stars | ★ 868 |
| Last updated | August 3, 2026 |
| Repository | bitjaru/styleseed ↗ |
What it does
Design a single user flow and navigation map, then scaffold its pages using StyleSeed shells.
Who is it for?
Mapping one user flow and its navigation before building the pages
Skip if: Implementing a single page (use ss-page after), copy on each step (use ss-copy), or pixel-perfect mockups
When should I use this skill?
You need to structure the screens and navigation for a flow before coding pages
What you get
A flow diagram, screen inventory, edge cases, and scaffolded page files
- ASCII flow diagram
- Screen inventory
- Edge-case list per screen
By the numbers
- Chunks information into groups of 5-9 items (Miller's Law)
- Targets a maximum of 3 taps to any key feature
Files
UX Flow Designer
When NOT to use
- For implementing a single page → use
/ss-pageafter the flow is settled - For copy on each step → use
/ss-copyafter 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.mdfor component inventoryDESIGN-LANGUAGE.mdfor 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,BottomNavpatterns
4. Generate the actual page files using /ss-page conventions.
Related skills
Frontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.716k165k
Web Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.498k29.6k
Lark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst389k16k
Sleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k476
Design Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.301k69.4k
Ui Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.290k112kFAQ
What does ss-flow output?
An ASCII flow diagram, a screen inventory with each screen's purpose, edge cases per screen, and scaffolded pages using PageShell, TopBar, and BottomNav.
What UX principles does it apply?
Progressive disclosure, Miller's Law, Hick's Law, and navigation patterns like hub and spoke, linear flow, and tab navigation.