# Design Flow

> Design an interaction flow with inclusive input and output options from the start. Chains: multi-modal-input, keyboard-navigation, touch-target-design, feedback-and-status. Use when designing a new feature, flow, or interface and you want to build inclusive interaction in from the beginning.

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

---


# Design 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