# Stepper Wizard Patterns

> Multi-step flows, wizard design, progress indicators, and step validation.

- Skill: `dragoon0x/stepper-wizard-patterns` (Agent Skill)
- Install (CLI): `npx skillmds@latest add dragoon0x/stepper-wizard-patterns`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dragoon0x/stepper-wizard-patterns/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: dragoon0x (https://skillmd.com/u/dragoon0x)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/dragoon0x/stepper-wizard-patterns

---


# Stepper Wizard Patterns

## Stepper Design

### Progress Indication
- Step numbers + labels (Step 1: Account Details).
- Current step highlighted, completed steps checked, upcoming steps dimmed.
- Horizontal on desktop (top of form), vertical on mobile (left sidebar or inline).

### Rules
1. **3-7 steps maximum.** More than 7 = break into sections or simplify.
2. **Allow back navigation** without losing data.
3. **Validate per step**, not at the end.
4. **Save progress** for long forms. Allow resuming later.
5. **Final review step** for important flows (purchases, applications).

### Step Content
- One topic per step. Don't combine "Account Details" with "Billing."
- Front-load easy steps (build momentum with completion).
- Put optional steps last (or allow skipping).

### Buttons
- "Next" / "Back" at the bottom of each step.
- Final step: specific action verb ("Create Account," "Place Order").
- "Save and Continue Later" for long forms.