用途:测试网站在不同视口宽度下的布局响应性,覆盖溢出、堆叠、导航过渡与内容回流。不测试通用无障碍项(ARIA、语义 HTML、标题层级、对比度),那类内容不随宽度变化,可改用 ux-audit 技能。
工具优先级:先检测可用浏览器工具。首选 playwright-cli(支持 resize、命名会话、子代理并行),安装后先运行 /playwright-cli 加载命令参考;其次是 Playwright MCP(browser_resize);再次是 Chrome MCP(resize_window,使用已登录会话)。均不可用时提示用户安装。
运行模式:标准检查测 8 个关键断点(320、375、768、1024、1280、1440、1920、2560px),单会话高 900px,逐档调整视口、等待 CSS 回流、截图,运行 8 项布局检查并标注严重级别,对比相邻宽度定位过渡。扫描模式从 320 到 2560 每 160px 测一次(共 15 档),用于精确定位断裂宽度,开始前需简要确认。定向范围模式按用户指定区间以 80px 步进测试。多 URL 时按 URL 启动并行子代理,各自命名会话,结果合并为一份报告,如:playwright-cli -s=page1 open https://example.com/。
8 项检查:水平溢出、文字溢出、导航过渡、内容堆叠、图片/媒体缩放、触摸目标(移动端 <44px)、留白平衡、CTA 首屏可见性。过渡检测记录列数变化、导航模式切换、侧栏出现/消失、网格回流发生的精确宽度区间。严重级别分 Critical、High、Medium、Low。
自主性:调整视口、截图、分析、对比可自行执行;扫描模式和 4 个以上 URL 并行前需简要确认;操作表单或认证流程前须先询问。报告写入 docs/responsiveness-check-YYYY-MM-DD.md,模板见 references/report-template.md,断点细节见 references/breakpoints.md。