多端文档网站测试工作流

文档网站的 UI 在不同视口下的行为往往难以在代码审查中一眼看穿。桌面端显示正常的排版，到了移动端可能因为断行规则、viewport 设置或导航栏折叠而错位；平板端则常卡在断点之间，既不是完整的手机视图，也不是干净的桌面布局。如果团队只靠手工点击预览，很容易漏掉交互异常或可访问性问题。

核心能力与关键步骤

这个技能将文档站点的多设备检查封装为一套可重复执行的自动化流程，底层依赖 GitHub Agentic Workflows、GitHub Actions 以及 gh-aw 运行时中可用的 Playwright MCP 工具。

• 本地构建验证：先确保文档能按仓库中已有的构建脚本正确产出。
• 多视口加载：在移动、平板和桌面三种尺寸下打开站点，而不是只截一张全宽图。
• 可感知的问题分类：流程会关注布局是否错位、可访问性是否存在明显缺陷，以及关键交互是否按预期响应。
• 结构化报告：问题按设备和关注点归拢，便于直接进入修复任务，而不是散落在截图里。

工作流本身用自然语言 Markdown 编写，并由 GitHub Actions 调度执行，适合直接放在仓库的 .github/workflows 中作为定期检查。

适用边界与注意点

• 仓库必须已经具备可用的文档构建脚本和 GitHub Actions 基础能力。
• 运行时需要能访问 gh-aw 以及 Playwright MCP 工具链。
• 该技能使用 GitHub 官方提供的 multi-device docs tester 工作流作为上游参考，属于 gh-aw 的既有模式，而非零配置开箱即用的黑盒。
• 上游文档明确提示：在仓库中使用 agentic workflows 需要谨慎评估安全边界，保持人工监督，并接受仍可能出现异常的风险。