Skill987 repo starsupdated 6d ago

ss-flow

The ss-flow skill designs user navigation structures and screen sequences by applying established UX principles like progressive disclosure, Hick's Law, and Miller's Law. Use it to map the complete flow architecture for a feature or user journey before creating individual pages, ensuring logical information hierarchy, minimal decision points, and clear entry and exit paths across screens.

View source Repository: styleseed

Install in Claude Code

Copy

git clone --depth 1 https://github.com/bitjaru/styleseed /tmp/ss-flow && cp -r /tmp/ss-flow/skills/ss-flow ~/.claude/skills/ss-flow

Then start a new Claude Code session; the skill loads automatically.

Definition

SKILL.md

# UX Flow Designer
## Registry-first artifact boundary

When `.styleseed/project.json` and `.styleseed/artifacts/index.json` exist, resolve the requested artifact ID first, then read only `.styleseed/bundles/<artifact-id>.md` and `.styleseed/manifests/<artifact-id>.json`. Never fall back to the global legacy bundle for a registry project. Legacy projects may use `.styleseed/effective-rules.md` only when no registry exists.

## 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

1. 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

2. Apply these UX principles:

### Information Architecture
- **Progressive Disclosure**: Show only what's needed at each step. Hide complexity behind logical drill-downs.
- **Cognitive load**: Chunk information around the user's decision; the resolved grammar and content
  density decide the grouping rather than a universal item count.
- **Hick's Law**: Minimize choices per screen while preserving the product's real task vocabulary.

### 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)
- **Navigation**: use the resolved surface adapter; BottomNav is only one possible mobile pattern.

### Screen Flow Rules
- Every flow must have a **clear entry point** and **clear exit point**
- Key features should be reachable with an appropriate number of steps for the product and platform;
  do not impose a universal tap count.
- 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 selected output grammar's information hierarchy; do not impose a Hero → KPI Grid →
  Details → Lists template on unrelated products.
- Each screen should answer ONE primary question when the task calls for it.
- 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 primitives selected by the artifact's adapter and grammar

4. Generate the actual page files using `/ss-page` conventions.