design-flow

Q: How do I install design-flow?

Run npx skills add https://github.com/owl-listener/inclusive-design-skills --skill design-flow in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/design-flow/ (personal) or .claude/skills/design-flow/ (project).

by owl-listener

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.

Installs: 72
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/owl-listener/inclusive-design-skills --skill design-flow

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads design-flow automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

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

FAQ

What does the design-flow skill do?

How do I install design-flow?

Run npx skills add https://github.com/owl-listener/inclusive-design-skills --skill design-flow in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/design-flow/ (personal) or .claude/skills/design-flow/ (project).

Which AI agents can use design-flow?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is design-flow safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains design-flow?

It is published by owl-listener in owl-listener/inclusive-design-skills. It has 72 recorded installs.