聊聊 Agent Skills-前端队长の技术博客

什么是 Agent Skills？
核心区别：Rule 只能“看”，Skill 可以“动”
实战场景：私有 Vue 组件库开发
总结

最近在研究 AI 辅助编程的标准化方案，发现除了我们熟悉的 .cursorrules 和 AGENTS.md 之外，出现了一个新的开放标准：Agent Skills。

很多同学可能会觉得，这不就是换了个名字的 Rule 吗？其实不然。

在实际开发中，我们经常遇到一个痛点：Context Window（上下文窗口）是昂贵的资源。如果在 .cursorrules 里塞入几千行的业务逻辑或组件文档，不仅浪费 Token，还会因为上下文过长导致 AI 变“笨”。

Agent Skills 的出现，就是为了解决“复杂任务下的按需加载”和“携带可执行资源”这两个问题。

什么是 Agent Skills？

简单来说，Agent Skills 是一个按需加载的文件夹。

它的核心逻辑不再是“被动遵守规则”，而是“主动调用能力”。

结构：它不是一个单文件，而是一个包含 SKILL.md（描述文件）和多个辅助资源（脚本、JSON、SQL 文件等）的目录。
机制：Agent 会根据用户的 Prompt 意图，自主判断是否挂载这个 Skill。如果不相关，它就不会占用任何上下文。

核心区别：Rule 只能“看”，Skill 可以“动”

这是大家最容易混淆的地方，对比一下三者：

方案	形态	核心作用	局限性
AGENTS.md	根目录 Markdown 文件	项目索引。告诉 AI 这是个什么项目，目录结构如何。	纯静态文本，只读。
Cursor Rules	`.mdc` 文件	行为约束。告诉 AI 代码风格、缩进、命名规范。	也是纯文本。虽然可以写代码片段，但无法执行复杂逻辑。
Agent Skills	文件夹 (Markdown + 代码)	能力扩展。不仅告诉 AI 怎么做，还能提供脚本让 AI 去跑。	需要 Agent 运行时支持（目前 Claude Code, Cursor 等正在跟进）。

重点在于“资源不限于文档”。

传统的 Rule 只能告诉 AI：“请遵循 A 规范”。而 Agent Skills 可以在文件夹里放一个 validate.py 或者 schema.sql。当 AI 加载这个 Skill 时，它不仅读到了规范，还可以直接读取并执行这个脚本来辅助生成代码，或者基于最新的二进制文件做校验。这是纯文本 Rule 绝对做不到的。

实战场景：私有 Vue 组件库开发

假设公司内部有一套基于 Vue 3 的组件库 @mycorp/ui，没有外网文档。且公司强制要求在提交代码前，必须运行一个特定的 Node.js 脚本来校验 Props 的合法性。

如果用 Rule，你很难描述清楚“运行脚本”这个动作，也没法把脚本塞进 Rule 里。

但使用 Agent Skills，我们可以创建一个 skills/vue-expert/ 文件夹：

1. 目录结构

skills/
└── vue-expert/
    ├── SKILL.md              # 技能说明书
    ├── component-schema.json # 组件的最全属性定义（作为知识库）
    └── verify-props.js       # 【关键】一个用于校验组件属性的工具脚本

2. `SKILL.md` 内容

# MyCorp Vue 开发专家

## 激活时机
当用户涉及 Vue 页面开发、组件修改，或提到 `@mycorp/ui` 时加载。

## 执行流程
1. **组件规范**：
   - 必须使用 `script setup` 语法。
   - 所有 UI 组件只能来自 `@mycorp/ui`。
2. **数据源参考**：
   - 编写组件 Props 时，**必须读取当前目录下的 `component-schema.json`**，严禁臆造属性。
3. **自我校验**：
   - 生成代码后，请参考 `verify-props.js` 的逻辑检查 Props 是否合规（或直接建议用户运行此脚本）。

3. 实际效果对比

场景：用户输入“帮我写一个带有搜索功能的表格页面”。

使用 Rule 时： AI 可能会生成代码，但因为它记不住所有 Props，可能会给 <McTable> 加一个不存在的 searchable="true" 属性。因为 Rule 里很难塞下几百个组件的完整 Schema。
使用 Agent Skills 时：
1. Agent 识别意图，挂载 vue-expert 文件夹。
2. Agent 读取 component-schema.json（平时不占内存，用时才读），准确获取 <McTable> 的属性列表。
3. Agent 读取 verify-props.js，理解了校验逻辑，甚至可以在生成代码的注释里告诉你：“根据 verify-props.js 的规则，这里需要传入 data-source 而不是 data。”

总结

Agent Skills 本质上是AI 的插件系统。

对于简单的代码风格（缩进、分号），继续用 Cursor Rules 就够了。
对于项目层面的整体介绍，用 AGENTS.md。
但如果你需要 AI 掌握复杂的业务流程，或者需要它结合具体的数据文件、脚本工具来工作，那么 Agent Skills 是唯一的解决方案。

它让 AI 从一个“只会读文档的实习生”，变成了一个“会翻阅手册、还会使用工具的高级工程师”。

聊聊 Agent Skills