responsiveness-check

Name: responsiveness-check
Author: jezweb

1.4kinstalls96forks

How to install responsiveness-check?

jezweb/claude-skills/responsiveness-check

$npx -y skills add jezweb/claude-skills --skill responsiveness-check

Installs into the current project.

Summary

Test website responsiveness across viewport widths using browser automation. Resizes a single session through breakpoints, screenshots each width, and detects layout transitions (column changes, nav switches, overflow). Produces comparison reports showing exactly where layouts br

Files · 1

View on GitHub

SKILL.md

1	# Responsiveness Check
2
3	Test how a website's layout responds to viewport width changes. Resizes through breakpoints in a single browser session, screenshots each width, compares adjacent sizes, and reports where layouts break.
4
5	What this tests: Layout responsiveness — overflow, stacking, navigation transitions, content reflow.
6
7	What this does NOT test: General accessibility (ARIA, semantic HTML, heading hierarchy, colour contrast). Those don't vary by viewport width — use the ux-audit skill instead.
8
9	## Browser Tool Priority
10
11	Before starting, detect available browser tools:
12
13	1. playwright-cli (preferred) — supports resize, named sessions, and sub-agent parallelism. If installed, run `/playwright-cli` first to load the full command reference.
14	2. Playwright MCP (`mcp__plugin_playwright_playwright__*`) — `browser_resize` for viewport changes.
15	3. Chrome MCP (`mcp__claude-in-chrome__*`) — `resize_window` for viewport changes. Uses the user's logged-in Chrome session.
16
17	If none are available, inform the user and suggest installing playwright-cli or Playwright MCP.
18
19	## Operating Modes
20
21	### Mode 1: Standard Check
22
23	When: "check responsive", "responsiveness check", "test breakpoints"
24
25	Test 8 key breakpoints that cover the device spectrum:
26
27	\| Width \| Device Context \|
28	\|-------\|---------------\|
29	\| 320px \| Small phone (iPhone SE) \|
30	\| 375px \| Standard phone (iPhone 14) \|
31	\| 768px \| Tablet portrait (iPad) \|
32	\| 1024px \| Tablet landscape / small laptop \|
33	\| 1280px \| Laptop \|
34	\| 1440px \| Desktop \|
35	\| 1920px \| Full HD \|
36	\| 2560px \| Ultra-wide / 4K \|
37
38	Process:
39
40	1. Open the URL in a single browser session (height: 900px)
41	2. Start at 320px. For each breakpoint width:
42	a. Resize the viewport
43	b. Wait briefly for CSS reflow (layout transition)
44	c. Screenshot the above-fold area
45	d. If the page has significant below-fold content, scroll and screenshot
46	e. Run the 8 layout checks (see matrix below)
47	f. Note any issues with severity
48	3. Compare adjacent widths — identify where layout transitions occur
49	4. Write the report
50
51	### Mode 2: Sweep
52
53	When: "responsive sweep", "sweep all breakpoints", "find where it breaks"
54
55	Test every 160px from 320 to 2560 (15 widths total). Same single-session approach as Standard — just more data points. This is the mode for finding the exact width where a layout breaks.
56
57	Widths: 320, 480, 640, 800, 960, 1120, 1280, 1440, 1600, 1760, 1920, 2080, 2240, 2400, 2560
58
59	Briefly confirm before starting sweep mode (15 screenshots is a meaningful session).
60
61	### Mode 3: Targeted Range
62
63	When: "check between 768 and 1024", "test tablet breakpoints", "focus on mobile widths"
64
65	Test a user-specified range at 80px increments. Use when a known trouble zone needs detailed investigation.
66
67	Example: "check between 768 and 1024" tests: 768, 848, 928, 1008 (plus 1024 as endpoint).
68
69	### Multi-URL
70
71	When testing multiple URLs (e.g., "check the homepage, about page, and contact page"):
72
73	- Launch parallel sub-agents, one per URL (not per breakpoint)
74	- Each sub-agent runs a standard check on its URL in its own named session
75	- Combine results into a single report
76
77	```
78	# Sub-agent pattern (playwright-cli)
79	playwright-cli -s=page1 open https://example.com/ &
80	playwright-cli -s=page2 open https://example.com/about &
81	```
82
83	## Layout Check Matrix
84
85	These 8 checks target issues that actually vary by viewport width:
86
87	\| # \| Check \| What to Look For \|
88	\|---\|-------\|-----------------\|
89	\| 1 \| Horizontal overflow \| Content wider than viewport — horizontal scrollbar appears, elements cut off \|
90	\| 2 \| Text overflow \| Text truncated mid-word, overlapping adjacent elements, font size unreadable (< 12px) \|
91	\| 3 \| Navigation transition \| Hamburger menu appears/disappears at correct width, no "broken" state between modes \|
92	\| 4 \| Content stacking \| Multi-column layouts stack to single column in logical reading order on narrow widths \|
93	\| 5 \| Image/media scaling \| Images overflow container, distorted aspect ratios, missing responsive sizing \|
94	\| 6 \| Touch targets \| Interactive elements < 44px on mobile widths (< 768px) — buttons, links, form inputs \|
95	\| 7 \| Whitespace balance \| Too cramped on mobile (no breathing room), too sparse on wide screens (content lost in space) \|
96	\| 8 \| CTA visibility \| Primary call-to-action visible above the fold at each width without scrolling \|
97
98	## Transition Detection
99
100	The unique value of this skill is **finding where layout transitions happe

People who liked this also viewed

6 picks

Type

responsiveness-check

1.4kinstalls96forks

View on GitHub

How to install responsiveness-check?

jezweb/claude-skills/responsiveness-check

$npx -y skills add jezweb/claude-skills --skill responsiveness-check

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Responsiveness Check
2
3	Test how a website's layout responds to viewport width changes. Resizes through breakpoints in a single browser session, screenshots each width, compares adjacent sizes, and reports where layouts break.
4
5	What this tests: Layout responsiveness — overflow, stacking, navigation transitions, content reflow.
6
7	What this does NOT test: General accessibility (ARIA, semantic HTML, heading hierarchy, colour contrast). Those don't vary by viewport width — use the ux-audit skill instead.
8
9	## Browser Tool Priority
10
11	Before starting, detect available browser tools:
12
13	1. playwright-cli (preferred) — supports resize, named sessions, and sub-agent parallelism. If installed, run `/playwright-cli` first to load the full command reference.
14	2. Playwright MCP (`mcp__plugin_playwright_playwright__*`) — `browser_resize` for viewport changes.
15	3. Chrome MCP (`mcp__claude-in-chrome__*`) — `resize_window` for viewport changes. Uses the user's logged-in Chrome session.
16
17	If none are available, inform the user and suggest installing playwright-cli or Playwright MCP.
18
19	## Operating Modes
20
21	### Mode 1: Standard Check
22
23	When: "check responsive", "responsiveness check", "test breakpoints"
24
25	Test 8 key breakpoints that cover the device spectrum:
26
27	\| Width \| Device Context \|
28	\|-------\|---------------\|
29	\| 320px \| Small phone (iPhone SE) \|
30	\| 375px \| Standard phone (iPhone 14) \|
31	\| 768px \| Tablet portrait (iPad) \|
32	\| 1024px \| Tablet landscape / small laptop \|
33	\| 1280px \| Laptop \|
34	\| 1440px \| Desktop \|
35	\| 1920px \| Full HD \|
36	\| 2560px \| Ultra-wide / 4K \|
37
38	Process:
39
40	1. Open the URL in a single browser session (height: 900px)
41	2. Start at 320px. For each breakpoint width:
42	a. Resize the viewport
43	b. Wait briefly for CSS reflow (layout transition)
44	c. Screenshot the above-fold area
45	d. If the page has significant below-fold content, scroll and screenshot
46	e. Run the 8 layout checks (see matrix below)
47	f. Note any issues with severity
48	3. Compare adjacent widths — identify where layout transitions occur
49	4. Write the report
50
51	### Mode 2: Sweep
52
53	When: "responsive sweep", "sweep all breakpoints", "find where it breaks"
54
55	Test every 160px from 320 to 2560 (15 widths total). Same single-session approach as Standard — just more data points. This is the mode for finding the exact width where a layout breaks.
56
57	Widths: 320, 480, 640, 800, 960, 1120, 1280, 1440, 1600, 1760, 1920, 2080, 2240, 2400, 2560
58
59	Briefly confirm before starting sweep mode (15 screenshots is a meaningful session).
60
61	### Mode 3: Targeted Range
62
63	When: "check between 768 and 1024", "test tablet breakpoints", "focus on mobile widths"
64
65	Test a user-specified range at 80px increments. Use when a known trouble zone needs detailed investigation.
66
67	Example: "check between 768 and 1024" tests: 768, 848, 928, 1008 (plus 1024 as endpoint).
68
69	### Multi-URL
70
71	When testing multiple URLs (e.g., "check the homepage, about page, and contact page"):
72
73	- Launch parallel sub-agents, one per URL (not per breakpoint)
74	- Each sub-agent runs a standard check on its URL in its own named session
75	- Combine results into a single report
76
77	```
78	# Sub-agent pattern (playwright-cli)
79	playwright-cli -s=page1 open https://example.com/ &
80	playwright-cli -s=page2 open https://example.com/about &
81	```
82
83	## Layout Check Matrix
84
85	These 8 checks target issues that actually vary by viewport width:
86
87	\| # \| Check \| What to Look For \|
88	\|---\|-------\|-----------------\|
89	\| 1 \| Horizontal overflow \| Content wider than viewport — horizontal scrollbar appears, elements cut off \|
90	\| 2 \| Text overflow \| Text truncated mid-word, overlapping adjacent elements, font size unreadable (< 12px) \|
91	\| 3 \| Navigation transition \| Hamburger menu appears/disappears at correct width, no "broken" state between modes \|
92	\| 4 \| Content stacking \| Multi-column layouts stack to single column in logical reading order on narrow widths \|
93	\| 5 \| Image/media scaling \| Images overflow container, distorted aspect ratios, missing responsive sizing \|
94	\| 6 \| Touch targets \| Interactive elements < 44px on mobile widths (< 768px) — buttons, links, form inputs \|
95	\| 7 \| Whitespace balance \| Too cramped on mobile (no breathing room), too sparse on wide screens (content lost in space) \|
96	\| 8 \| CTA visibility \| Primary call-to-action visible above the fold at each width without scrolling \|
97
98	## Transition Detection
99
100	The unique value of this skill is **finding where layout transitions happe

People who liked this also viewed

6 picks

Type