# Ss Flow

> Design user flows and navigation structure following proven UX patterns

- **Type:** Skill
- **Install:** `agentstack add skill-bitjaru-styleseed-ss-flow`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [bitjaru](https://agentstack.voostack.com/s/bitjaru)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [bitjaru](https://github.com/bitjaru)
- **Source:** https://github.com/bitjaru/styleseed/tree/main/engine/.claude/skills/ss-flow
- **Website:** https://styleseed-demo.vercel.app

## Install

```sh
agentstack add skill-bitjaru-styleseed-ss-flow
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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

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.
- **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`, `BottomNav` patterns

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

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [bitjaru](https://github.com/bitjaru)
- **Source:** [bitjaru/styleseed](https://github.com/bitjaru/styleseed)
- **License:** MIT
- **Homepage:** https://styleseed-demo.vercel.app

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-bitjaru-styleseed-ss-flow
- Seller: https://agentstack.voostack.com/s/bitjaru
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.