引言

在《AI时代前端开发指南》中，我们探讨了如何利用 AI 提升个人与团队的产能。如果说大语言模型（LLM）是拥有无限潜力的“最强大脑”，那么 Agent Skills（AI 技能） 就是它的“双手”与“工具箱”。

单纯的对话框交互（Chat）往往止步于“咨询”与“生成”，而引入 Skills 后的 Agent 才能真正触达你的代码仓库、执行终端命令、甚至遵循你团队独有的代码规范。本文将深入解构 Agent Skills 的核心概念，并手把手教你如何打造专属的 AI 技能包。

一、Agent Skills 是什么

简单来说，Agent Skills 是赋予 AI Agent 特定能力的插件包。

想象一下，刚出厂的 LLM 就像一个博学但对你项目一无所知的实习生。它懂 Python、JS，但不懂你们公司的 utils 库；它懂设计模式，但不懂你们团队的 CSS 命名规范。

Skills 的本质就是“上下文（Context）”与“指令（Instruction）”的标准化封装。

通过 Skill，你可以：

  • 注入领域知识：让 AI 瞬间学会某个冷门框架的配置写法（如 hexo-butterfly）。
  • 规范输出风格：强制 AI 按照特定的文档风格（如 Metabase 风格）生成内容。
  • 扩展操作能力：赋予 AI 调用特定工具或 API 的权限。

二、怎么安装使用

在 Trae 等现代 AI IDE 中，使用 Skills 的体验已经做到了极致的“无感化”。

1. 安装

通常，你只需要将技能包放置在特定的配置目录下。以 Trae 为例，技能通常存储在项目根目录的 .trae/skills/ 文件夹中：

1
2
3
4
.trae/
  └── skills/
      ├── docs-write/   # 文档写作技能
      └── git-commit/   # Git 提交规范技能

2. 使用

你不需要背诵复杂的命令。Skill 的触发基于语义理解。

当你对 Agent 说：“帮我写一篇关于 Skills 的文档，风格要通俗易懂”时：

  1. Agent 会分析你的意图（Intent）。
  2. 检索已安装的 Skills，发现 docs-write 的描述与你的需求匹配。
  3. 自动加载该 Skill，将其内部定义的规则应用到当前的对话中。

你也可以显式调用（如果工具支持），例如输入 /docs-write 来强制激活。

三、揭秘内部原理

Agent Skills 看起来很神奇，但其底层原理并不复杂。它其实是 Prompt Engineering（提示词工程） 的一种高级应用形式。

当你激活一个 Skill 时，IDE 实际上在后台做了一次“上下文注入”：

  1. 读取定义：读取 SKILL.md 中的 Front-matter（元数据），获取技能名称和描述。
  2. Prompt 融合：将 SKILL.md 的正文内容作为 System Prompt（系统提示词） 的一部分，发送给 LLM。
  3. 动态上下文：如果 Skill 中使用了 @filename 语法，IDE 还会自动读取引用的文件内容并注入上下文。

例如，当你使用 docs-write 时，AI 的脑海中不仅有你的问题，还多了一份“文档写作指南”。它不再是随意发挥，而是看着“说明书”在干活。

四、如何开发自己的 Skills 技能包

授人以鱼不如授人以渔。开发一个 Skill 并不需要你会写复杂的代码，只需要你会写 Markdown。

步骤 1：创建目录

在 .trae/skills/ 下创建一个新的文件夹，例如 my-code-style。

步骤 2：编写 SKILL.md

在文件夹内创建 SKILL.md 文件。这是 Skill 的核心。

步骤 3：定义元数据与规则

一个标准的 Skill 模版如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
---
name: my-code-style
description: 当用户要求编写 React 组件或进行代码重构时使用。包含团队的组件规范和命名约定。
---

# 团队 React 开发规范

你是一名资深的前端架构师。在编写 React 代码时，必须严格遵守以下规范：

## 1. 组件结构

- 使用函数式组件（Functional Component）。
- 必须使用 TypeScript 接口定义 Props。
- 导出方式统一使用 `export const ComponentName = ...`。

## 2. 样式处理

- 禁止使用内联样式。
- 优先使用 Tailwind CSS，其次是 CSS Modules。

## 3. 示例

正确：
\`\`\`tsx
interface Props {
title: string;
}
export const Card: React.FC<Props> = ({ title }) => (

  <div className="p-4 bg-white">{title}</div>
)
\`\`\`

进阶技巧：引用外部文件

如果你的规范文档很长，或者你想复用项目里现有的 CONTRIBUTING.md，可以使用 @ 语法：

1
2
3
4
5
# 代码规范

请参考项目根目录下的规范文档进行代码生成：

@./../../CONTRIBUTING.md

这样，你的 Skill 就能实时同步项目的最新规范，无需手动维护两份文档。

结语

正如我们在《如何看待前端又双叒叕死了》中所说，AI 不是来取代开发者的，而是来解放生产力的。

Skills 是连接通用大模型与具体业务场景的桥梁。通过构建属于你自己的 Skills 库，你实际上是在把团队的“隐性知识”（如口口相传的规范、最佳实践）转化为可执行的“显性资产”。