mcpField
S
ss-flow

ss-flow

github.com/bitjaruDesign & UI993827 installsUpdated today
Repository

About ss-flow

ss-flow is a StyleSeed UX design skill for mapping a single user flow and producing scaffolded page files. It applies the project's design rules and covers screen structure, navigation, and edge states.

Key features

  1. 01Registry-first artifact resolution
  2. 02ASCII flow diagrams
  3. 03Screen purpose and component inventory
  4. 04Empty, error, and loading state planning
  5. 05Scaffolded page generation

Use cases

  1. 01Map an onboarding or checkout flow
  2. 02Define screen connections before page implementation
  3. 03Plan recovery paths for errors and empty states

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/bitjaru/styleseed --skill ss-flow

After installing, type/ss-flowin Claude Code to confirm it loaded.

Details

From the project README

Before this workflow, follow the once-per-session update preflight.

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)

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

  2. Generate the actual page files using /ss-page conventions.

Comments

Markdown supported