前端工程师经常要做「样式清理」这类事：找出未使用和重复的样式规则。每次都从头写提示词，结果时好时坏；把它做成智能体 Skill，就能让智能体每次按同一套步骤执行，输出结构也更稳定。

背景（虚构）

老陈是一名前端工程师，每周都要做几次样式清理。过去靠复制粘贴提示词，结果不稳定。这次团队把它做成了技能，下面记录一次完整运行。

1. 发出请求

老陈在浏览器、组件库与设计稿中输入：

这是今天的样式文件与页面，按团队的样式清理流程处理一下。

2. 技能被触发

智能体根据技能描述判断任务匹配，加载「样式清理」的完整指令。它先运行技能自带的脚本做预处理，确保后续分析基于准确的数据。

3. 收集选择器

这一步的产出会作为下一步的输入。智能体在“收集选择器”时遇到一处含糊的信息，没有自行猜测，而是标注出来等待确认。

4. 比对使用情况

智能体完成“比对使用情况”，并在中间结果里注明依据，方便老陈回看。

5. 合并重复规则

这一步的产出会作为下一步的输入。智能体在“合并重复规则”时遇到一处含糊的信息，没有自行猜测，而是标注出来等待确认。

6. 提醒动态类名

“提醒动态类名”是最容易出错的环节，技能里专门写了要求，所以智能体给出了清楚的结果与理由。

7. 交付与复核

智能体交付清理建议，末尾列出两条需人工确认的内容。老陈对照原始样式文件与页面抽查关键信息，修正一处表述后采用。

复盘：这次做对了什么

  • 步骤写在技能里，没有遗漏
  • 不确定处被标出，而不是被编造
  • 遵守了「视觉与交互结果要在真实浏览器里确认」
  • 风险较低，但输出仍需快速过目再使用

可以改进的地方

老陈发现智能体对团队内部术语理解不一致，于是在技能目录中加了一份术语表（reference.md），并在 SKILL.md 中写明“遇到术语先查表”。更多改法见定制指南。

什么时候用这个技能

  • 手头有样式文件与页面，需要在较短时间内得到清理建议
  • 同类任务每周出现多次，希望每次处理方式一致
  • 结果要交给同事或上级复核，需要统一的结构和清楚的依据
  • 新人接手这类工作，需要一个可以照着做的标准流程

反过来，如果只是偶尔做一次，或者任务高度依赖现场判断，直接和浏览器、组件库与设计稿里的智能体对话即可，不必专门封装成技能。

交付物结构示例

建议把清理建议固定成下面的结构（示意），方便复核与归档：

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

## 主要内容
- 收集选择器：……
- 比对使用情况：……
- 合并重复规则：……
- 提醒动态类名：……

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

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

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

延伸阅读

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