responsiveness-check
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseResponsiveness Check
响应式布局检测
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.
测试网站布局随视口宽度变化的适配情况。在单个浏览器会话中按断点调整窗口大小，对每个宽度截图，对比相邻尺寸的差异，并报告布局失效的位置。
测试范围：布局响应式表现 —— 内容溢出、堆叠方式、导航切换、内容重排。
非测试范围：通用可访问性（ARIA、语义化HTML、标题层级、色彩对比度）。这些属性不随视口宽度变化，建议使用ux-audit技能进行检测。
Browser Tool Priority
浏览器工具优先级
Before starting, detect available browser tools:
- playwright-cli (preferred) — supports resize, named sessions, and sub-agent parallelism. Run first to load the full command reference.
/playwright-cli - Playwright MCP () —
mcp__plugin_playwright_playwright__*for viewport changes.browser_resize - Chrome MCP () —
mcp__claude-in-chrome__*for viewport changes. Uses the user's logged-in Chrome session.resize_window
If none are available, inform the user and suggest installing playwright-cli or Playwright MCP.
开始检测前，先识别可用的浏览器工具：
- playwright-cli（首选）——支持窗口调整、命名会话和子Agent并行处理。先运行加载完整命令参考。
/playwright-cli - Playwright MCP () —— 用
mcp__plugin_playwright_playwright__*实现视口调整。browser_resize - Chrome MCP () —— 用
mcp__claude-in-chrome__*实现视口调整，使用用户已登录的Chrome会话。resize_window
若没有可用工具，需告知用户并建议安装playwright-cli或Playwright MCP。
Operating Modes
运行模式
Mode 1: Standard Check
模式1：标准检测
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:
- Open the URL in a single browser session (height: 900px)
- Start at 320px. For each breakpoint width: a. Resize the viewport b. Wait briefly for CSS reflow (layout transition) c. Screenshot the above-fold area d. If the page has significant below-fold content, scroll and screenshot e. Run the 8 layout checks (see matrix below) f. Note any issues with severity
- Compare adjacent widths — identify where layout transitions occur
- Write the report
触发指令："check responsive"、"responsiveness check"、"test breakpoints"
测试覆盖全设备范围的8个关键断点：
| 宽度 | 设备场景 |
|---|---|
| 320px | 小屏手机（iPhone SE） |
| 375px | 标准手机（iPhone 14） |
| 768px | 平板竖屏（iPad） |
| 1024px | 平板横屏 / 小屏笔记本 |
| 1280px | 笔记本电脑 |
| 1440px | 桌面电脑 |
| 1920px | 全高清屏幕 |
| 2560px | 超宽屏 / 4K屏幕 |
检测流程：
- 在单个浏览器会话中打开目标URL（窗口高度固定为900px）
- 从320px开始，对每个断点执行以下操作： a. 调整视口宽度 b. 短暂等待CSS重排（布局切换完成） c. 对首屏内容截图 d. 若页面有大量首屏以下内容，滚动后补充截图 e. 执行8项布局检测（见下方检测矩阵） f. 记录问题及严重等级
- 对比相邻宽度的截图，识别布局发生变化的节点
- 生成检测报告
Mode 2: Sweep
模式2：全范围扫描
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).
触发指令："responsive sweep"、"sweep all breakpoints"、"find where it breaks"
从320px到2560px，每间隔160px检测一次（共15个宽度）。采用与标准检测相同的单会话模式，但覆盖更多数据点。此模式用于精准定位布局失效的具体宽度。
检测宽度：320、480、640、800、960、1120、1280、1440、1600、1760、1920、2080、2240、2400、2560
启动前确认：全范围扫描会生成15张截图，属于较长会话，需先向用户确认。
Mode 3: Targeted Range
模式3：指定范围检测
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).
触发指令："check between 768 and 1024"、"test tablet breakpoints"、"focus on mobile widths"
在用户指定的宽度范围内，每间隔80px检测一次。适用于已知存在问题的区域，进行深度排查。
示例："check between 768 and 1024" 会检测以下宽度：768、848、928、1008（额外包含终点1024px）。
Multi-URL
多URL批量检测
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
undefined当需要检测多个URL时（例如："check the homepage, about page, and contact page"）：
- 启动并行子Agent，每个URL对应一个子Agent（而非每个断点对应一个）
- 每个子Agent在独立的命名会话中对目标URL执行标准检测
- 将所有子Agent的检测结果合并为一份报告
undefinedSub-agent pattern (playwright-cli)
Sub-agent pattern (playwright-cli)
playwright-cli -s=page1 open https://example.com/ &
playwright-cli -s=page2 open https://example.com/about &
undefinedplaywright-cli -s=page1 open https://example.com/ &
playwright-cli -s=page2 open https://example.com/about &
undefinedLayout Check Matrix
布局检测矩阵
These 8 checks target issues that actually vary by viewport width:
| # | Check | What to Look For |
|---|---|---|
| 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 |
以下8项检测专门针对随视口宽度变化的问题：
| 序号 | 检测项 | 排查要点 |
|---|---|---|
| 1 | 横向溢出 | 内容宽度超过视口，出现横向滚动条，元素被截断 |
| 2 | 文本溢出 | 文本被中途截断、与相邻元素重叠、字体过小（<12px）导致无法阅读 |
| 3 | 导航切换 | 汉堡菜单在正确宽度下显示/隐藏，两种模式间无“失效”状态 |
| 4 | 内容堆叠 | 多列布局在窄屏时按合理阅读顺序堆叠为单列 |
| 5 | 图片/媒体缩放 | 图片溢出容器、比例失真、缺失响应式适配 |
| 6 | 触控目标 | 移动端宽度（<768px）下，交互元素尺寸<44px —— 按钮、链接、表单输入框等 |
| 7 | 留白平衡 | 移动端过于拥挤（无呼吸空间）、宽屏过于松散（内容淹没在空白中） |
| 8 | CTA可见性 | 各宽度下，主要行动召唤按钮（CTA）无需滚动即可在首屏显示 |
Transition Detection
布局变化检测
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:
- Column count changes (3-col → 2-col → 1-col grid)
- Navigation mode switches (full nav → hamburger, or vice versa)
- Sidebar appears/disappears (content width jumps)
- Grid reflows (cards wrap to next row)
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.
本技能的核心价值是定位布局变化的触发节点，并验证变化是否流畅。
对比相邻宽度的截图时，需标记出现以下变化的宽度：
- 列数变化（3列 → 2列 → 1列网格）
- 导航模式切换（完整导航 → 汉堡菜单，或反之）
- 侧边栏显示/隐藏（内容宽度突变）
- 网格重排（卡片换行）
报告中需明确记录每个变化的精确宽度范围：
| 变化类型 | 起始宽度 | 结束宽度 | 触发范围 |
|---|---|---|---|
| 导航：汉堡菜单 → 完整导航 | 768px | 1024px | 约960px时切换 |
| 网格：1列 → 2列 | 640px | 768px | 约700px时重排 |
| 侧边栏显示 | 1024px | 1280px | 约1100px时出现 |
这能帮助开发者精准设置（或修复）CSS断点。
Severity Levels
严重等级划分
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 |
与ux-audit技能保持一致：
| 严重等级 | 定义 |
|---|---|
| Critical（致命） | 布局完全失效 —— 内容无法阅读、导航不可用、页面无法正常使用 |
| High（高） | 严重布局问题 —— 大面积溢出、关键内容隐藏、切换状态失效 |
| Medium（中） | 明显但不影响使用的问题 —— 间距不合理、轻微溢出、堆叠顺序不佳 |
| Low（低） | 细节优化问题 —— 留白调整、轻微对齐偏差、触控目标尺寸略小 |
Autonomy Rules
自主执行规则
- Just do it: Resize viewport, take screenshots, analyse layout, compare widths
- Brief confirmation: Before sweep mode (15 viewports), before testing 4+ URLs in parallel
- Ask first: Before interacting with forms or clicking through authentication flows
- 直接执行：调整视口、截图、分析布局、对比宽度
- 提前确认：启动全范围扫描（15个视口）、并行检测4个及以上URL时，需先向用户确认
- 先询问再执行：涉及表单交互或身份验证流程时，需先征得用户同意
Report Output
报告输出
Write report to (or inline for single-page quick checks).
docs/responsiveness-check-YYYY-MM-DD.mdSee references/report-template.md for the report structure.
将报告写入（单页面快速检测可直接输出在当前会话）。
docs/responsiveness-check-YYYY-MM-DD.md报告结构参考references/report-template.md。
Reference Files
参考文件
| When | Read |
|---|---|
| Looking up breakpoint details and trouble zones | references/breakpoints.md |
| Writing the responsiveness report | references/report-template.md |
| 使用场景 | 参考文件 |
|---|---|
| 查询断点细节和问题区域 | references/breakpoints.md |
| 编写响应式检测报告 | references/report-template.md |