responsiveness-check by jezweb/claude-skills
npx skills add https://github.com/jezweb/claude-skills --skill responsiveness-check测试网站布局如何响应视口宽度变化。在单个浏览器会话中遍历断点调整尺寸,截取每个宽度下的屏幕截图,比较相邻尺寸,并报告布局出现问题的位置。
测试内容:布局响应性——溢出、堆叠、导航过渡、内容重排。
不测试内容:通用无障碍性(ARIA、语义化 HTML、标题层级、色彩对比度)。这些不随视口宽度变化——请改用 ux-audit 技能。
开始前,检测可用的浏览器工具:
/playwright-cli 以加载完整的命令参考。mcp__plugin_playwright_playwright__*)——使用 browser_resize 进行视口更改。mcp__claude-in-chrome__*)——使用 resize_window 进行视口更改。使用用户已登录的 Chrome 会话。如果以上工具均不可用,请通知用户并建议安装 playwright-cli 或 Playwright MCP。
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
适用场景:"check responsive"、"responsiveness check"、"test breakpoints"
测试覆盖设备范围的 8 个关键断点:
| 宽度 | 设备上下文 |
|---|---|
| 320px | 小尺寸手机(iPhone SE) |
| 375px | 标准手机(iPhone 14) |
| 768px | 平板竖屏(iPad) |
| 1024px | 平板横屏 / 小型笔记本电脑 |
| 1280px | 笔记本电脑 |
| 1440px | 台式机 |
| 1920px | 全高清 |
| 2560px | 超宽屏 / 4K |
流程:
适用场景:"responsive sweep"、"sweep all breakpoints"、"find where it breaks"
从 320 到 2560 每 160px 测试一次(共 15 个宽度)。采用与标准模式相同的单会话方法——只是数据点更多。此模式用于查找布局发生问题的精确宽度。
宽度:320、480、640、800、960、1120、1280、1440、1600、1760、1920、2080、2240、2400、2560
在开始扫描模式前简要确认(15 张截图是一个有意义的会话)。
适用场景:"check between 768 and 1024"、"test tablet breakpoints"、"focus on mobile widths"
以 80px 为增量测试用户指定的范围。当已知问题区域需要详细调查时使用。
示例:"check between 768 and 1024" 测试:768、848、928、1008(加上 1024 作为端点)。
当测试多个 URL 时(例如,"check the homepage, about page, and contact page"):
# 子代理模式(playwright-cli)
playwright-cli -s=page1 open https://example.com/ &
playwright-cli -s=page2 open https://example.com/about &
这 8 项检查针对实际随视口宽度变化的问题:
---|---|---
1 | 水平溢出 | 内容宽度超过视口——出现水平滚动条,元素被截断
2 | 文本溢出 | 文本在单词中间被截断,与相邻元素重叠,字体大小不可读(< 12px)
3 | 导航过渡 | 汉堡菜单在正确宽度出现/消失,模式之间没有"破损"状态
4 | 内容堆叠 | 多列布局在窄宽度下按逻辑阅读顺序堆叠为单列
5 | 图片/媒体缩放 | 图片溢出容器,宽高比失真,缺少响应式尺寸调整
6 | 触摸目标 | 移动宽度(< 768px)下交互元素 < 44px——按钮、链接、表单输入框
7 | 留白平衡 | 移动端过于拥挤(没有呼吸空间),宽屏过于稀疏(内容在空间中丢失)
8 | 行动号召可见性 | 主要行动号召在每个宽度下无需滚动即可在首屏可见
此技能的独特价值在于发现布局过渡发生的位置以及过渡是否流畅。
比较相邻宽度的屏幕截图时,标记出现以下情况的任何宽度:
报告每个过渡发生的精确宽度范围:
| 过渡 | 从 | 到 | 宽度范围 |
|---|---|---|---|
| 导航:汉堡菜单 → 完整 | 768px | 1024px | 约 960px 切换 |
| 网格:1 列 → 2 列 | 640px | 768px | 约 700px 重排 |
| 侧边栏出现 | 1024px | 1280px | 约 1100px 显示 |
这告诉开发者应在何处设置(或修复)他们的 CSS 断点。
与 ux-audit 保持一致:
| 严重性 | 含义 |
|---|---|
| 严重 | 布局损坏——内容不可读,导航无法访问,页面无法使用 |
| 高 | 重大布局问题——严重溢出,关键内容隐藏,过渡损坏 |
| 中 | 明显但可用——间距尴尬,轻微溢出,堆叠顺序不理想 |
| 低 | 细节优化——留白微调,轻微对齐问题,触摸目标略有不足 |
将报告写入 docs/responsiveness-check-YYYY-MM-DD.md(或对于单页快速检查,以内联方式输出)。
报告结构请参阅 references/report-template.md。
| 时机 | 查阅 |
|---|---|
| 查找断点详情和问题区域时 | references/breakpoints.md |
| 撰写响应式报告时 | references/report-template.md |
每周安装量
382
仓库
GitHub 星标数
643
首次出现
2026 年 2 月 24 日
安全审计
安装于
gemini-cli349
opencode349
github-copilot348
codex348
kimi-cli346
amp346
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.
What this tests : Layout responsiveness — overflow, stacking, navigation transitions, content reflow.
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.
Before starting, detect available browser tools:
/playwright-cli first to load the full command reference.mcp__plugin_playwright_playwright__*) — browser_resize for viewport changes.mcp__claude-in-chrome__*) — resize_window for viewport changes. Uses the user's logged-in Chrome session.If none are available, inform the user and suggest installing playwright-cli or Playwright MCP.
When : "check responsive", "responsiveness check", "test breakpoints"
Test 8 key breakpoints that cover the device spectrum:
| Width | Device Context |
|---|---|
| 320px | Small phone (iPhone SE) |
| 375px | Standard phone (iPhone 14) |
| 768px | Tablet portrait (iPad) |
| 1024px | Tablet landscape / small laptop |
| 1280px | Laptop |
| 1440px | Desktop |
| 1920px | Full HD |
| 2560px | Ultra-wide / 4K |
Process :
When : "responsive sweep", "sweep all breakpoints", "find where it breaks"
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.
Widths: 320, 480, 640, 800, 960, 1120, 1280, 1440, 1600, 1760, 1920, 2080, 2240, 2400, 2560
Briefly confirm before starting sweep mode (15 screenshots is a meaningful session).
When : "check between 768 and 1024", "test tablet breakpoints", "focus on mobile widths"
Test a user-specified range at 80px increments. Use when a known trouble zone needs detailed investigation.
Example: "check between 768 and 1024" tests: 768, 848, 928, 1008 (plus 1024 as endpoint).
When testing multiple URLs (e.g., "check the homepage, about page, and contact page"):
Launch parallel sub-agents , one per URL (not per breakpoint)
Each sub-agent runs a standard check on its URL in its own named session
Combine results into a single report
playwright-cli -s=page1 open https://example.com/ & playwright-cli -s=page2 open https://example.com/about &
These 8 checks target issues that actually vary by viewport width :
---|---|---
1 | Horizontal overflow | Content wider than viewport — horizontal scrollbar appears, elements cut off
2 | Text overflow | Text truncated mid-word, overlapping adjacent elements, font size unreadable (< 12px)
3 | Navigation transition | Hamburger menu appears/disappears at correct width, no "broken" state between modes
4 | Content stacking | Multi-column layouts stack to single column in logical reading order on narrow widths
5 | Image/media scaling | Images overflow container, distorted aspect ratios, missing responsive sizing
6 | Touch targets | Interactive elements < 44px on mobile widths (< 768px) — buttons, links, form inputs
7 | Whitespace balance | Too cramped on mobile (no breathing room), too sparse on wide screens (content lost in space)
8 | CTA visibility | Primary call-to-action visible above the fold at each width without scrolling
The unique value of this skill is finding where layout transitions happen and whether they're clean.
When comparing screenshots at adjacent widths, flag any width where:
Report the exact width range where each transition occurs:
| Transition | From | To | Width Range |
|---|---|---|---|
| Nav: hamburger → full | 768px | 1024px | Switches at ~960px |
| Grid: 1-col → 2-col | 640px | 768px | Reflows at ~700px |
| Sidebar appears | 1024px | 1280px | Shows at ~1100px |
This tells the developer exactly where to set (or fix) their CSS breakpoints.
Consistent with ux-audit:
| Severity | Meaning |
|---|---|
| Critical | Layout is broken — content unreadable, navigation inaccessible, page unusable |
| High | Significant layout issue — major overflow, key content hidden, broken transition |
| Medium | Noticeable but usable — awkward spacing, minor overflow, suboptimal stacking order |
| Low | Polish — whitespace tweaks, slight alignment issues, minor touch target shortfalls |
Write report to docs/responsiveness-check-YYYY-MM-DD.md (or inline for single-page quick checks).
See references/report-template.md for the report structure.
| When | Read |
|---|---|
| Looking up breakpoint details and trouble zones | references/breakpoints.md |
| Writing the responsiveness report | references/report-template.md |
Weekly Installs
382
Repository
GitHub Stars
643
First Seen
Feb 24, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykWarn
Installed on
gemini-cli349
opencode349
github-copilot348
codex348
kimi-cli346
amp346
GitHub Actions 官方文档查询助手 - 精准解答 CI/CD 工作流问题
22,500 周安装