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

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.

Más de este repositorio

mismo repositorio

ss-verify

bitjaru/styleseed

The VISUAL gate — render the UI, screenshot it, and score what you actually SEE, not what the code says. Catches the tells that only show up in pixels (dead whitespace, cramping, a hero that doesn't dominate, fonts that didn't load, real rendered color, the squint "does this look AI-made" test) — the things /ss-score can't read from source. Renders empty/loading/error states too, then fixes and re-renders until it passes. Use as the final gate on any screen you can render.

2026-07-09670

ss-dial

bitjaru/styleseed

Turn ONE design axis up or down as a coordinated, deterministic transform — "denser", "sharper corners", "more muted", "bolder", "flatter", "livelier". Not a vibe the model reinterprets each time; a defined ramp that moves many tokens together, respects the guardrails (8px grid, a11y floors, single accent, nested-radius), updates the lock, and re-runs the gate. Use this when a human saying "more X" would otherwise get an inconsistent one-off.

2026-07-08670

ss-motion

bitjaru/styleseed

Apply a named StyleSeed motion to a component — either one of the 5 personality seeds (Spring/Silk/Snap/Float/Pulse × entrance/exit/hover/press/layout) or a distinctive keyword move from the motion library (toggle-flip, toggle-curtain, reveal-blur, pop-in, shimmer, …). Translates vibe words into framer-motion code from one source of truth.

2026-07-08670

ss-score

bitjaru/styleseed

Score a UI file's design quality 0-100 against StyleSeed's design language — per-category breakdown, the worst offenders, and a prioritized fix list. A quantified version of /ss-review.

2026-07-08670

ss-restyle

bitjaru/styleseed

Re-style a project to a named aesthetic — swiss, editorial, technical, warm-dtc, minimal-mono, brutalist-lite. A preset is a *coordinate* across the dial axes (radius + density + color + weight + motion) plus a font, accent family, and one signature move — applied coherently as a single identity, written to the lock, and re-gated. This is for mood words ("more editorial") that aren't one axis; for a single axis use /ss-dial.

2026-07-06670

ss-build

bitjaru/styleseed

Build a screen the way the StyleSeed reference demo was built — one command that ENFORCES the full loop (lock the look → build → score → fix to ≥80 → only then show). Use this instead of building UI free-hand; it closes the gap between "knows the rules" and "actually followed them."

2026-07-06670

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.