responsive-review

Name: responsive-review
Author: Owl-Listener

82stars25forks

How to install responsive-review?

owl-listener/inclusive-design-skills/responsive-review

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

Installs into the current project.

Summary

Review responsive and flexible layout for accessibility across devices, zoom levels, and orientations. Chains: responsive-accessibility, flexible-typography, information-density. Use when testing an existing interface across screen sizes and zoom levels for accessibility.

Files · 1

View on GitHub

SKILL.md

1	# Responsive Accessibility Review
2
3	Test whether an interface maintains accessibility across the full
4	range of screen sizes, zoom levels, and orientations that real
5	users encounter.
6
7	## Process
8
9	### Step 1: Viewport Testing
10	Test the interface at these viewport widths:
11	- 320px (small mobile)
12	- 375px (standard mobile)
13	- 768px (tablet)
14	- 1024px (small desktop / tablet landscape)
15	- 1280px (standard desktop)
16	- 1440px+ (large desktop)
17
18	At each viewport, using responsive-accessibility, document:
19	- Content that overflows or is hidden
20	- Interactive elements that are unreachable
21	- Touch targets below 44×44px on touch viewports
22	- Navigation that doesn't adapt
23	- Functionality that disappears entirely
24
25	### Step 2: Zoom Testing
26	At 1280px viewport, test at:
27	- 100% (baseline)
28	- 150% (common for low vision users)
29	- 200% (WCAG requirement)
30
31	Document:
32	- Horizontal scrolling that appears
33	- Text that overflows containers
34	- Overlapping elements
35	- Sticky headers that consume excessive space
36	- Modals or tooltips that go off-screen
37
38	### Step 3: Typography Scaling
39	Using flexible-typography, test with system font size at maximum.
40	Document:
41	- Text that doesn't scale
42	- Containers that clip or truncate text
43	- Layout that breaks when text grows
44	- Fixed-height elements that don't expand
45
46	### Step 4: Orientation Testing
47	Test in both portrait and landscape. Document:
48	- Content that only works in one orientation
49	- Orientation lock that prevents rotation
50	- Layout that breaks or wastes space in one orientation
51
52	### Step 5: Density Check
53	Using information-density, at each viewport verify:
54	- Is the default density appropriate for the device?
55	- Can users adjust density?
56	- Does compact density maintain minimum touch targets?
57	- Does spacious density work without excessive scrolling?
58
59	## Output
60
61	Deliver a responsive accessibility report:
62
63	1. Viewport matrix — pass/fail at each viewport width for
64	core tasks
65	2. Zoom results — issues at 150% and 200%
66	3. Typography results — text scaling failures
67	4. Orientation results — portrait/landscape issues
68	5. Fix list — prioritised by severity, grouped by:
69	- Fixes that affect all viewports
70	- Fixes specific to mobile
71	- Fixes specific to zoom

People who liked this also viewed

6 picks

Type

responsive-review

82stars25forks

View on GitHub

How to install responsive-review?

owl-listener/inclusive-design-skills/responsive-review

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

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Responsive Accessibility Review
2
3	Test whether an interface maintains accessibility across the full
4	range of screen sizes, zoom levels, and orientations that real
5	users encounter.
6
7	## Process
8
9	### Step 1: Viewport Testing
10	Test the interface at these viewport widths:
11	- 320px (small mobile)
12	- 375px (standard mobile)
13	- 768px (tablet)
14	- 1024px (small desktop / tablet landscape)
15	- 1280px (standard desktop)
16	- 1440px+ (large desktop)
17
18	At each viewport, using responsive-accessibility, document:
19	- Content that overflows or is hidden
20	- Interactive elements that are unreachable
21	- Touch targets below 44×44px on touch viewports
22	- Navigation that doesn't adapt
23	- Functionality that disappears entirely
24
25	### Step 2: Zoom Testing
26	At 1280px viewport, test at:
27	- 100% (baseline)
28	- 150% (common for low vision users)
29	- 200% (WCAG requirement)
30
31	Document:
32	- Horizontal scrolling that appears
33	- Text that overflows containers
34	- Overlapping elements
35	- Sticky headers that consume excessive space
36	- Modals or tooltips that go off-screen
37
38	### Step 3: Typography Scaling
39	Using flexible-typography, test with system font size at maximum.
40	Document:
41	- Text that doesn't scale
42	- Containers that clip or truncate text
43	- Layout that breaks when text grows
44	- Fixed-height elements that don't expand
45
46	### Step 4: Orientation Testing
47	Test in both portrait and landscape. Document:
48	- Content that only works in one orientation
49	- Orientation lock that prevents rotation
50	- Layout that breaks or wastes space in one orientation
51
52	### Step 5: Density Check
53	Using information-density, at each viewport verify:
54	- Is the default density appropriate for the device?
55	- Can users adjust density?
56	- Does compact density maintain minimum touch targets?
57	- Does spacious density work without excessive scrolling?
58
59	## Output
60
61	Deliver a responsive accessibility report:
62
63	1. Viewport matrix — pass/fail at each viewport width for
64	core tasks
65	2. Zoom results — issues at 150% and 200%
66	3. Typography results — text scaling failures
67	4. Orientation results — portrait/landscape issues
68	5. Fix list — prioritised by severity, grouped by:
69	- Fixes that affect all viewports
70	- Fixes specific to mobile
71	- Fixes specific to zoom

People who liked this also viewed

6 picks

Type