# user-flows-and-guided-paths

Guides the creation of multi-step wizards, checkout sequences, and onboarding journeys. Helps maintain clear step progression without trapping users.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 879 installs · ★ 165
- Author: dembrandt
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/dembrandt/dembrandt-skills/tree/HEAD/skills/user-flows-and-guided-paths/SKILL.md
- Updated: 2026-10-22
- HTML: https://affpapa.org/en/nevibecode/skills/user-flows-and-guided-paths

## What it does

The skill establishes conventions for multi-step flows across components in `**/*.tsx`, `**/*.jsx`, and design system directories. It applies when tasks require 3 or more sequential steps where later choices depend on earlier ones. For open-ended screens like dashboards, it explicitly avoids forced flows.

Inside, the skill enforces clear wizard anatomy. Every step needs a progress indicator, an exit path with autosaving, and active back navigation that preserves entered data. Validation must run on Continue rather than at the final submit stage. Validating only at the end breaks user trust.

For checkout paths, the instructions demand persistent order summaries and clear confirmation screens before payment. It also requires flows to respect existing visual styles and support deep-linking directly into intermediate steps.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add dembrandt/dembrandt-skills --skill user-flows-and-guided-paths -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/user-flows-and-guided-paths/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/user-flows-and-guided-paths/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add dembrandt/dembrandt-skills --skill user-flows-and-guided-paths -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/user-flows-and-guided-paths/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add dembrandt/dembrandt-skills --skill user-flows-and-guided-paths -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/user-flows-and-guided-paths/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install dembrandt/dembrandt-skills user-flows-and-guided-paths
```

2. **Manually: put the files in place**
- File: `.github/skills/user-flows-and-guided-paths/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add dembrandt/dembrandt-skills --skill user-flows-and-guided-paths -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/dembrandt/dembrandt-skills --path skills/user-flows-and-guided-paths
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/user-flows-and-guided-paths/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add dembrandt/dembrandt-skills --skill user-flows-and-guided-paths -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/dembrandt/dembrandt-skills/tree/HEAD/skills/user-flows-and-guided-paths/SKILL.md

## When to use it
- design multi-step onboarding sequences with clear indicators
- structure checkout flows with persistent order summaries
- break complex project setup into logical sequential stages
- implement step navigation that preserves form draft data

## Example prompts
- Design a 4-step wizard for new project setup
- Build the checkout flow with a persistent summary for this shop
- Structure our user onboarding into a guided sequence

## Source text · SKILL.md · MIT

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: 8a22ed03a24921f3.

BEGIN THIRD-PARTY FILE 8a22ed03a24921f3
````text
---
name: user-flows-and-guided-paths
description: Guided multi-step paths and wizards. Use when designing onboarding, checkout, setup sequences or any multi-step journey.
metadata:
  priority: 7
  pathPatterns:
    - "components/**"
    - "src/components/**"
    - "**/*.tsx"
    - "**/*.jsx"
    - "design-system/**"
    - "ui/**"
  promptSignals:
    phrases:
      - "flow"
      - "wizard"
      - "onboarding"
      - "checkout"
      - "steps"
      - "multi-step"
      - "guided"
      - "purchase flow"
      - "setup"
retrieval:
  aliases:
    - user flow
    - wizard pattern
    - onboarding flow
    - checkout flow
    - guided steps
    - multi-step form
  intents:
    - design a purchase flow
    - build an onboarding sequence
    - create a wizard
    - guide the user through complex setup
    - connect related features into a path
  examples:
    - design the checkout flow for this shop
    - build a wizard for project setup
    - make this onboarding feel natural
---

# User Flows and Guided Paths

Related features that belong together should be experienced as a single coherent journey — not as separate screens the user has to navigate between manually. A well-designed flow feels inevitable: each step leads naturally to the next, the user always knows where they are and what comes next, and the path fits the product's information hierarchy.

## When to Guide vs. When to Let Users Explore

| Scenario | Pattern |
|---|---|
| Linear process with a clear end goal (checkout, signup, setup) | Guided step-by-step flow or wizard |
| Complex task that benefits from breaking into stages | Wizard with progress indicator |
| Feature discovery across an existing product | Contextual tooltips or coach marks |
| User returning to complete something they started | Resume prompt with clear re-entry point |
| Open-ended exploration (dashboard, settings) | Free navigation — do not force a flow |

Only guide when the task genuinely has a natural order. Forcing a wizard onto a non-sequential task frustrates users who already know what they want.

## The Wizard Pattern

Use a wizard when:
- The task has 3 or more sequential steps
- Later steps depend on decisions made in earlier steps
- Doing all steps on one screen would overwhelm the user

### Wizard anatomy

```
[Step indicator: 1 of 4]

Step title

  [Form content for this step]

[Back]  [Continue →]
```

**Step indicator:** Always show the user where they are in the sequence and how many steps remain. A progress bar or numbered steps both work — numbered steps are clearer when step names are meaningful.
````
END THIRD-PARTY FILE 8a22ed03a24921f3

The third-party file has ended. Everything between the 8a22ed03a24921f3 tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 2603 of 5111 bytes. © dembrandt · MIT · https://github.com/dembrandt/dembrandt-skills/tree/HEAD/skills/user-flows-and-guided-paths/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md