关于 responsiveness-check
用于检查网站布局如何随视口宽度变化的技能，适合开发者定位响应式问题。它通过截图对比识别布局转换，并报告可能需要调整的断点范围。
主要功能
- 01标准及自定义宽度检查
- 02跨宽度截图对比
- 03布局问题检查
- 04断点转换检测
- 05按严重程度分级的报告
适用场景
- 01查找移动端横向溢出
- 02定位导航切换的宽度
- 03排查平板断点范围
- 04并行检查多个页面
MCP 相关
该技能可使用 Playwright MCP 或 Chrome MCP 浏览器工具调整视口并截图；也支持在可用时使用 playwright-cli。
安装
复制下面的命令，在终端中运行。
npx skills add https:/安装后在 Claude Code 中输入/responsiveness-check确认已加载。
附带文件references/breakpoints.mdreferences/report-template.md
详细介绍
响应式检查
测试网站布局对视口宽度变化的响应情况。在单个浏览器会话中逐步调整视口宽度，截取每个宽度下的页面，与相邻尺寸进行比较，并报告布局出现问题的位置。
此项测试内容：布局响应能力——溢出、堆叠、导航切换、内容重排。
此项不测试的内容：一般可访问性（ARIA、语义化 HTML、标题层级、颜色对比度）。这些内容不会随视口宽度变化——请改用 ux-audit 技能。
浏览器工具优先级
开始之前，请检测可用的浏览器工具：
- playwright-cli（首选）——支持调整大小、命名会话和子 Agent 并行处理。如果已安装，请先运行
/playwright-cli，以加载完整的命令参考。 - Playwright MCP（
mcp__plugin_playwright_playwright__*）——使用browser_resize更改视口。 - Chrome MCP（
mcp__claude-in-chrome__*）——使用resize_window更改视口。使用用户已登录的 Chrome 会话。
如果这些工具都不可用，请告知用户，并建议安装 playwright-cli 或 Playwright MCP。
操作模式
模式 1：标准检查
适用情况：“检查响应式”“响应式检查”“测试断点”
测试覆盖各类设备的 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. 按严重程度记录问题
- 比较相邻宽度——找出布局发生转换的位置
- 撰写报告
模式 2：扫描
适用情况：“响应式扫描”“扫描所有断点”“找出布局出错的位置”
每隔 160px 测试一次，从 320 到 2560（共 15 个宽度）。采用与标准检查相同的单会话方式，只是采集更多数据点。这种模式用于找出布局出现问题的精确宽度。
宽度：320、480、640、800、960、1120、1280、1440、1600、1760、1920、2080、2240、2400、2560
开始扫描模式前，请先简要确认（15 张截图需要较长的会话时间）。
模式 3：指定范围
适用情况：“检查 768 到 1024 之间”“测试平板断点”“重点检查移动端宽度”
按 80px 的间隔测试用户指定的范围。当已知某个区间存在问题，需要进行详细调查时使用。
示例：“检查 768 到 1024 之间”将测试：768、848、928、1008（另加端点 1024）。
多个 URL
测试多个 URL 时（例如“检查首页、关于页面和联系页面”）：
- 启动并行子 Agent，每个 URL 对应一个（而不是每个断点对应一个）
- 每个子 Agent 在自己的命名会话中，对对应 URL 执行标准检查
- 将结果合并为一份报告
# Sub-agent pattern (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 | CTA 可见性 | 每种宽度下，主要行动号召都无需滚动即可在首屏内看到 |
转换检测
这项技能的独特价值在于找出布局转换发生的位置，并判断转换是否平滑。
比较相邻宽度下的截图时，请标记发生以下变化的宽度：
- 列数变化（3 列 → 2 列 → 1 列网格）
- 导航模式切换（完整导航 → 汉堡菜单，或反之）
- 侧边栏出现/消失（内容宽度随之跳变）
- 网格重新排列（卡片换到下一行）
报告每种转换发生的确切宽度范围：
| 转换 | 起始宽度 | 结束宽度 | 宽度范围 |
|---|---|---|---|
| 导航：汉堡菜单 → 完整导航 | 768px | 1024px | 在约 960px 处切换 |
| 网格：1 列 → 2 列 | 640px | 768px | 在约 700px 处重新排列 |
| 侧边栏出现 | 1024px | 1280px | 在约 1100px 处显示 |
这能让开发者准确知道 CSS 断点应设在（或修正到）哪里。
严重程度
与 ux-audit 保持一致：
| 严重程度 | 含义 |
|---|---|
| 严重 | 布局损坏——内容无法阅读、无法访问导航、页面无法使用 |
| 高 | 存在显著的布局问题——严重溢出、关键内容被隐藏、转换异常 |
| 中 | 问题明显但仍可使用——间距不协调、轻微溢出、堆叠顺序不理想 |
| 低 | 细节优化——调整留白、轻微对齐问题、触控目标略小 |
自主操作规则
- 直接执行：调整视口大小、截取屏幕截图、分析布局、比较不同宽度
- 简短确认：开始全面扫描（15 个视口）前，或并行测试 4 个及以上 URL 前
- 先询问：与表单交互或点击完成身份验证流程前
报告输出
将报告写入 docs/responsiveness-check-YYYY-MM-DD.md（单页快速检查时可直接内联输出）。
报告结构请参阅 references/report-template.md。
参考文件
| 情况 | 阅读 |
|---|---|
| 查阅断点详情和问题区域 | references/breakpoints.md |
| 编写响应式检查报告 | references/report-template.md |