specify

Name: specify
Author: Owl-Listener

28installs25forks

How to install specify?

owl-listener/inclusive-design-skills/specify

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

Installs into the current project.

Summary

Specify adaptive behaviour for an interface. Chains: user-preference-respect, responsive-accessibility, flexible-typography, colour-independence, simplified-views, information-density. Use when designing a new interface and you want to build adaptability in from the start.

Files · 1

View on GitHub

SKILL.md

1	# Specify Adaptive Behaviour
2
3	Define how an interface adapts to diverse user needs — preferences,
4	screen conditions, and cognitive requirements — as part of the
5	design specification, not as a retrofit.
6
7	## Process
8
9	### Step 1: Define Preference Responses
10	Using user-preference-respect, specify how the interface responds
11	to each system preference:
12	- prefers-reduced-motion: what changes
13	- prefers-contrast: what changes
14	- prefers-color-scheme: what changes
15	- forced-colors: what changes
16	- prefers-reduced-transparency: what changes
17
18	### Step 2: Define Responsive Behaviour
19	Using responsive-accessibility, specify:
20	- Breakpoints and what reflows at each
21	- Behaviour at 200% zoom
22	- Orientation support
23	- Touch target sizing at each breakpoint
24
25	### Step 3: Define Typography Behaviour
26	Using flexible-typography, specify:
27	- Type scale with relative units
28	- Line height and spacing values
29	- Behaviour when user scales text to 200%
30	- Dark mode typography adjustments
31
32	### Step 4: Define Colour Strategy
33	Using colour-independence, specify:
34	- How every colour-encoded meaning has a second encoding
35	- Status indicator design (colour + icon + text)
36	- Chart and data visualisation colour strategy
37	- Greyscale test results
38
39	### Step 5: Define View Options
40	Using simplified-views and information-density, specify:
41	- What simplified view contains vs full view
42	- How users toggle between views
43	- Available density levels
44	- Default density per viewport and context
45
46	## Output
47
48	Deliver an adaptive behaviour specification:
49	1. Preference response table — each system preference and the
50	interface's response
51	2. Responsive behaviour map — what changes at each breakpoint
52	and zoom level
53	3. Typography specification — scale, units, spacing, scaling
54	behaviour
55	4. Colour independence audit — every colour-dependent element
56	and its second encoding
57	5. View and density options — what's available and how users
58	control it

People who liked this also viewed

6 picks

Type

specify

28installs25forks

View on GitHub

How to install specify?

owl-listener/inclusive-design-skills/specify

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

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Specify Adaptive Behaviour
2
3	Define how an interface adapts to diverse user needs — preferences,
4	screen conditions, and cognitive requirements — as part of the
5	design specification, not as a retrofit.
6
7	## Process
8
9	### Step 1: Define Preference Responses
10	Using user-preference-respect, specify how the interface responds
11	to each system preference:
12	- prefers-reduced-motion: what changes
13	- prefers-contrast: what changes
14	- prefers-color-scheme: what changes
15	- forced-colors: what changes
16	- prefers-reduced-transparency: what changes
17
18	### Step 2: Define Responsive Behaviour
19	Using responsive-accessibility, specify:
20	- Breakpoints and what reflows at each
21	- Behaviour at 200% zoom
22	- Orientation support
23	- Touch target sizing at each breakpoint
24
25	### Step 3: Define Typography Behaviour
26	Using flexible-typography, specify:
27	- Type scale with relative units
28	- Line height and spacing values
29	- Behaviour when user scales text to 200%
30	- Dark mode typography adjustments
31
32	### Step 4: Define Colour Strategy
33	Using colour-independence, specify:
34	- How every colour-encoded meaning has a second encoding
35	- Status indicator design (colour + icon + text)
36	- Chart and data visualisation colour strategy
37	- Greyscale test results
38
39	### Step 5: Define View Options
40	Using simplified-views and information-density, specify:
41	- What simplified view contains vs full view
42	- How users toggle between views
43	- Available density levels
44	- Default density per viewport and context
45
46	## Output
47
48	Deliver an adaptive behaviour specification:
49	1. Preference response table — each system preference and the
50	interface's response
51	2. Responsive behaviour map — what changes at each breakpoint
52	and zoom level
53	3. Typography specification — scale, units, spacing, scaling
54	behaviour
55	4. Colour independence audit — every colour-dependent element
56	and its second encoding
57	5. View and density options — what's available and how users
58	control it

People who liked this also viewed

6 picks

Type