About flow-patterns
flow-patterns is a design skill for applying interaction-flow principles in a conversation. It emphasizes clear orientation, appropriately sized steps, recoverable errors, and progressive disclosure.
Key features
- 01Maintain clear user orientation
- 02Match steps to action complexity
- 03Build error recovery into flows
- 04Reveal complexity when needed
- 05Prefer undo to confirmation
Use cases
- 01Reviewing a multi-step product flow
- 02Designing recovery from error states
- 03Deciding when to reveal advanced options
Install
Copy the command and run it in a terminal.
$
npx skills add https:/After installing, type/flow-patternsin Claude Code to confirm it loaded.
Details
From the project READMEFlow Patterns
How a product feels over time, not just in a single frame.
How to use
/flow-patternsApply flow design constraints to this conversation.
Constraints
Flow Principles
- MUST ensure the user can answer at any point: where am I, where did I come from, what happens next?
- MUST use the minimum number of steps for the complexity of the action. Not zero steps. The right number.
- MUST design error recovery as part of the flow, not an afterthought
- SHOULD prefer undo over confirmation ("Action completed. Undo?" beats "Are you sure?")
Progressive Disclosure
- MUST show only what's needed now and reveal complexity on demand
- MUST decide at what point "simple" becomes "hiding things"
- SHOULD use contextual actions (show actions where the content is, not in a distant toolbar)
- SHOULD use smart defaults (pre-fill based on context, set the most common option)
Anti-Patterns
- Multi-step flows with no progress indicator
- Asking for information you could have inferred from context
- Dead-end error states with no recovery path
- Mandatory steps that aren't actually required
- Confirmation dialogs for easily reversible actions
Comments
Markdown supported