design-flow

Name: design-flow
Author: Owl-Listener

82stars25forks

How to install design-flow?

owl-listener/inclusive-design-skills/design-flow

$npx -y skills add Owl-Listener/inclusive-design-skills --skill design-flow

Installs into the current project.

Summary

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 th

Files · 1

View on GitHub

SKILL.md

1	# Design Inclusive Interaction Flow
2
3	Design a new interaction flow that supports diverse input methods and
4	provides accessible feedback from the start — not retrofitted after.
5
6	## Process
7
8	### Step 1: Identify All Interactions
9	List every point in the flow where the user must act:
10	- Click/tap a button
11	- Enter text
12	- Make a selection
13	- Navigate between steps
14	- Drag, swipe, or gesture
15	- Respond to a prompt
16
17	### Step 2: Assign Input Methods
18	Using multi-modal-input, for each interaction specify how it works
19	across at least three input methods:
20	- Keyboard: what keys or shortcuts activate it?
21	- Pointer/touch: what is the target size and spacing?
22	- Voice (where applicable): what command triggers it?
23
24	Flag any interaction that only works with one input method.
25
26	### Step 3: Design the Keyboard Layer
27	Using keyboard-navigation, define:
28	- Tab order through all interactive elements
29	- Focus management for modals, dropdowns, and dynamic content
30	- Skip links and landmark navigation
31	- Keyboard shortcuts for frequent actions (document them)
32
33	### Step 4: Specify Targets
34	Using touch-target-design, specify:
35	- Minimum sizes for all interactive elements
36	- Spacing between adjacent targets
37	- Thumb zone placement for mobile primary actions
38
39	### Step 5: Design Feedback
40	Using feedback-and-status, for each interaction specify:
41	- What the user sees (visual feedback)
42	- What a screen reader announces (text alternative)
43	- What happens on success, error, and loading states
44	- How feedback works with colour, icon, and text combined
45
46	## Output
47
48	Deliver an interaction specification that includes:
49	- Flow diagram with interaction points marked
50	- Input method matrix (task × input method)
51	- Focus order map
52	- Target size annotations
53	- Feedback specification per interaction

People who liked this also viewed

6 picks

Type

design-flow

82stars25forks

View on GitHub

How to install design-flow?

owl-listener/inclusive-design-skills/design-flow

$npx -y skills add Owl-Listener/inclusive-design-skills --skill design-flow

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Design Inclusive Interaction Flow
2
3	Design a new interaction flow that supports diverse input methods and
4	provides accessible feedback from the start — not retrofitted after.
5
6	## Process
7
8	### Step 1: Identify All Interactions
9	List every point in the flow where the user must act:
10	- Click/tap a button
11	- Enter text
12	- Make a selection
13	- Navigate between steps
14	- Drag, swipe, or gesture
15	- Respond to a prompt
16
17	### Step 2: Assign Input Methods
18	Using multi-modal-input, for each interaction specify how it works
19	across at least three input methods:
20	- Keyboard: what keys or shortcuts activate it?
21	- Pointer/touch: what is the target size and spacing?
22	- Voice (where applicable): what command triggers it?
23
24	Flag any interaction that only works with one input method.
25
26	### Step 3: Design the Keyboard Layer
27	Using keyboard-navigation, define:
28	- Tab order through all interactive elements
29	- Focus management for modals, dropdowns, and dynamic content
30	- Skip links and landmark navigation
31	- Keyboard shortcuts for frequent actions (document them)
32
33	### Step 4: Specify Targets
34	Using touch-target-design, specify:
35	- Minimum sizes for all interactive elements
36	- Spacing between adjacent targets
37	- Thumb zone placement for mobile primary actions
38
39	### Step 5: Design Feedback
40	Using feedback-and-status, for each interaction specify:
41	- What the user sees (visual feedback)
42	- What a screen reader announces (text alternative)
43	- What happens on success, error, and loading states
44	- How feedback works with colour, icon, and text combined
45
46	## Output
47
48	Deliver an interaction specification that includes:
49	- Flow diagram with interaction points marked
50	- Input method matrix (task × input method)
51	- Focus order map
52	- Target size annotations
53	- Feedback specification per interaction

People who liked this also viewed

6 picks

Type