「响应式检查」是前端工程师的高频任务。它的输入通常是页面地址，期望得到的是问题截图与修复建议。这类有固定流程、又需要一点判断力的工作，很适合封装成智能体 Skill。

通用版的「响应式检查」能覆盖大多数情况，但每个团队都有自己的习惯。下面列出最值得调整的几个地方。

可调参数一览

参数默认可以怎么改
输出格式问题截图与修复建议改成团队模板、表格或固定小标题
详略程度适中给领导看的精简版 / 给执行者看的详细版
语气风格中性按团队文风、对外或对内调整
严格程度标注不确定项提高到“任何推断都要给依据”
步骤4 步增加团队特有的检查步骤

改写示例：description

通用版：

检查页面在不同屏幕宽度下的布局问题。当用户提到响应式检查时使用。

团队版（示意）：

按本团队规范进行响应式检查：先读取 reference.md 中的模板与术语表，再处理页面地址。当团队成员提到响应式检查或上传相关材料时使用。

改写示例：增加团队步骤

## 步骤
1. 设定断点
2. 逐一截图
3. 标出溢出与遮挡
4. 给出样式修改
5. 对照 reference.md 中的团队检查表逐项确认
6. 按团队模板输出，并在开头写一句结论

按角色出多个版本

同一个技能可以为不同角色准备变体：新人版写得更细，并解释每一步的理由；熟手版只保留关键检查点。也可以在一个技能里用参数区分，例如“简版/详版”。

定制时别丢掉的东西

  • 领域底线：视觉与交互结果要在真实浏览器里确认
  • 缺信息先提问
  • 需人工确认清单
  • 风险较低，但输出仍需快速过目再使用

改完后记得重跑测试用例，团队共享时参考团队落地。

交付物结构示例

建议把问题截图与修复建议固定成下面的结构（示意），方便复核与归档：

## 结论
一句话说明最重要的发现或结果

## 主要内容
- 设定断点：……
- 逐一截图：……
- 标出溢出与遮挡：……
- 给出样式修改：……

## 依据
- 引用输入中的具体位置或数据

## 需人工确认
- ……（没有则写“无”）

结构固定之后，复核的人只要先看“结论”和“需人工确认”两部分，就能快速判断结果能否使用。

平台选择建议

同一个「响应式检查」技能可以落在不同平台上，选择时主要看你在哪里工作、要不要执行代码、要不要接外部系统：

  • LangChain / LangGraph 工具：LangChain 用 @tool 装饰器把函数变成工具。详见LangChain / LangGraph 工具 版
  • Claude Code Skill：Claude Code 的 Agent Skills 以文件夹为单位：一个 SKILL.md（YAML 头写 name 与 description）加上可选的脚本和参考资料。智能体平时只看到 description。详见Claude Code Skill 版
  • GitHub Copilot 指令与提示文件：GitHub Copilot 支持仓库级自定义指令文件 .github/copilot-instructions.md。详见GitHub Copilot 指令与提示文件 版

这个技能需要运行本地脚本（解析文件、调用命令行工具等），要求运行环境允许执行代码，可据此排除不支持相应能力的平台。

延伸阅读

说明：文中的配置、代码与目录结构均为示意，用于说明思路；各平台的入口、字段名与能力会更新，落地前请以对应官方文档为准。示例中的数据与场景为虚构，不代表真实案例。