About design-flow
design-flow is a design skill for specifying accessible interaction flows across input methods. It produces a flow diagram, input matrix, focus order, target sizes, and feedback requirements.
Key features
- 01Maps user interactions across a flow
- 02Specifies keyboard, pointer, touch, and voice input
- 03Defines focus order and modal behavior
- 04Sets interactive target sizes and spacing
- 05Plans visual and screen-reader feedback
Use cases
- 01Designing an accessible multi-step form
- 02Reviewing whether tasks work without a mouse
- 03Specifying feedback for loading, errors, and success
Install
Copy the command and run it in a terminal.
npx skills add https:/After installing, type/design-flowin Claude Code to confirm it loaded.
Details
From the project READMEDesign Inclusive Interaction Flow
Design a new interaction flow that supports diverse input methods and provides accessible feedback from the start — not retrofitted after.
Process
Step 1: Identify All Interactions
List every point in the flow where the user must act:
- Click/tap a button
- Enter text
- Make a selection
- Navigate between steps
- Drag, swipe, or gesture
- Respond to a prompt
Step 2: Assign Input Methods
Using multi-modal-input, for each interaction specify how it works across at least three input methods:
- Keyboard: what keys or shortcuts activate it?
- Pointer/touch: what is the target size and spacing?
- Voice (where applicable): what command triggers it?
Flag any interaction that only works with one input method.
Step 3: Design the Keyboard Layer
Using keyboard-navigation, define:
- Tab order through all interactive elements
- Focus management for modals, dropdowns, and dynamic content
- Skip links and landmark navigation
- Keyboard shortcuts for frequent actions (document them)
Step 4: Specify Targets
Using touch-target-design, specify:
- Minimum sizes for all interactive elements
- Spacing between adjacent targets
- Thumb zone placement for mobile primary actions
Step 5: Design Feedback
Using feedback-and-status, for each interaction specify:
- What the user sees (visual feedback)
- What a screen reader announces (text alternative)
- What happens on success, error, and loading states
- How feedback works with colour, icon, and text combined
Output
Deliver an interaction specification that includes:
- Flow diagram with interaction points marked
- Input method matrix (task × input method)
- Focus order map
- Target size annotations
- Feedback specification per interaction