引言
最近在 GitHub 上闲逛时，发现了一个有趣的项目------vuejs-ai/skills。这是一个专门为 Vue 3 开发设计的 Agent Skills 库，短短时间就收获了 1.8k+ Star。
这让我注意到一个趋势：Skills 正在成为 AI 编程领域的新热点。从 Anthropic 官方推出 Claude Skills，到 OpenAI、Cursor、VS Code 等巨头纷纷跟进，这个概念正在快速流行。
那么，Skills 到底是什么？它和我们熟悉的 Prompt、MCP 有什么区别？为什么值得关注？
💡 更多技术分享，欢迎访问我的博客：叁木の小屋
一句话理解 Skills
Skills = 给通用 AI 装上"专业技能包"
想象一下，你新招了一位聪明但缺乏经验的同事。他学习能力很强，但对你所在领域的最佳实践、常见陷阱、团队规范一无所知。你会怎么做？
你会给他准备一份"工作交接文档"------包含标准流程、工具使用说明、历史案例、避坑指南。
Skills 就是这份文档的数字化版本。它让通用 AI 在处理特定任务时，能够参考专业知识，输出更符合预期的结果。
Skills vs MCP vs Prompt vs Rules：四者什么关系？
这是最容易混淆的地方，让我用一个实际场景来解释：
假设你想让 AI 帮你分析 GitHub 上某个仓库的代码质量。
| 概念 | 角色 | 示例 |
|---|---|---|
| Prompt | 描述你想做什么 | "帮我分析这个仓库的代码质量" |
| MCP | 连接外部工具和数据 | 让 AI 能访问 GitHub API、读取代码 |
| Rules | 定义静态规则和约束 | "所有代码必须使用 TypeScript"、"禁止 any 类型" |
| Skills | 告诉 AI 怎么分析 | 代码审查的标准、关注点、输出格式 |
Rules 和 Skills 的区别
这是很多人困惑的地方：
Rules 是静态的规则约束，类似于"员工手册"------告诉 AI 什么能做、什么不能做。它通常用于定义编码规范、禁止事项、强制要求等。
Skills 是动态的能力扩展，类似于"培训课程"------教 AI 如何完成某类任务。它包含方法论、最佳实践、示例等。
举个例子：
- Rule: "所有 Vue 组件必须使用
<script setup>语法" - Skill: "如何设计一个可复用的 Vue 组件，包括 props 定义、emits 声明、插槽使用等"
协作流程
Prompt 表达意图 → Rules 约束行为 → Skills 提供方法论 → MCP 获取数据 → AI 执行任务
四者不是竞争关系，而是互补关系。
核心设计：渐进式披露
Skills 最精妙的设计是渐进式披露------不一次性把所有内容塞给 AI，而是分三层按需加载。
为什么这样设计？
如果你把所有指令都写在 Prompt 里，上下文会变得很长，AI 反而容易"糊涂"。Skills 的做法是：只在需要的时候，加载需要的内容。
三层结构
yaml
Level 1: 元数据（始终加载）
├── name: "vue-best-practices"
└── description: "Vue 3 最佳实践..."
→ AI 启动时就知道"我有这个能力"
Level 2: 指令（触发时加载）
└── SKILL.md 的具体内容
→ AI 决定使用这个 Skill 时才读取
Level 3: 资源（按需加载）
├── scripts/ # 执行脚本
├── references/ # 参考文档
└── assets/ # 模板文件
→ 执行到特定步骤时才调用好处：你可以安装几十个 Skills，但每次对话只会加载相关的几个，不会撑爆上下文窗口。
一个 Skill 长什么样？
来看一个实际的例子。下面是 vuejs-ai/skills 项目中的一个 Skill 结构：
bash
vue-best-practices/
├── SKILL.md # 核心指令文件
├── scripts/ # 可选：执行脚本
├── references/ # 可选：参考文档
└── assets/ # 可选：模板、资源SKILL.md 的内容示例：
markdown
---
name: vue-best-practices
description: Vue 3 + Composition API + TypeScript 最佳实践。
适用于组件开发、状态管理、性能优化。
---
# Vue 3 最佳实践
## 核心原则
1. 优先使用 Composition API 而非 Options API
2. 使用 shallowRef 替代 ref 处理大型响应式对象
3. 组件拆分遵循单一职责原则
## 常见陷阱
- 避免在 setup 中使用 this
- 不要忘记解包 .value
- watchEffect 中的响应式依赖要明确
## 代码规范
[具体规范内容...]可以看到，写一个 Skill 不需要编程，只需要会写文档。这就是 Skills 的魅力------它降低了 AI 应用开发的门槛。
vuejs-ai/skills 项目一览
这个项目是 Vue 生态的 Skills 合集，包含了 8 个实用技能：
| Skill | 用途 |
|---|---|
vue-best-practices |
Vue 3 + Composition API 最佳实践 |
vue-router-best-practices |
Vue Router 4 路由配置 |
vue-pinia-best-practices |
Pinia 状态管理 |
vue-testing-best-practices |
Vitest + Playwright 测试 |
vue-jsx-best-practices |
Vue JSX 语法 |
vue-debug-guides |
调试 Vue 3 问题 |
create-adaptable-composable |
创建可复用的 composables |
安装方式
bash
# 方式一：npx 一键安装
npx skills add vuejs-ai/skills
# 方式二：Claude Code Marketplace
/plugin marketplace add vuejs-ai/skills
/plugin install vue-best-practices@vue-skills怎么用？
安装完成后，不需要任何额外操作。Skills 会自动生效：
方式一：自动触发
直接正常对话，AI 会根据你的需求自动调用相关 Skill：
css
你：帮我写一个 Vue 3 的 Todo 组件
AI：[自动加载 vue-best-practices，按照最佳实践生成代码]方式二：显式指定
如果想确保使用某个 Skill，可以在提示词中明确指出：
你：用 vue skill，帮我写一个响应式的用户列表组件查看已安装的 Skills：
bash
# 在 Claude Code 中
/skills安装后，当你让 AI 写 Vue 代码时，它会自动参考这些最佳实践。
如何创建自己的 Skill？
Skills 的价值不仅在于使用别人的，更在于创建属于自己或团队的技能包。
存放位置
| 位置 | 路径 | 适用场景 |
|---|---|---|
| 个人 | ~/.claude/skills/ |
自己所有项目可用 |
| 项目 | .claude/skills/ |
团队共享 |
| 插件 | 随插件发布 | 社区分发 |
创建步骤
bash
# 1. 创建目录
mkdir -p .claude/skills/my-skill
# 2. 创建 SKILL.md
# 编写元数据和指令
# 3. 重启 Claude Code，自动识别写作技巧
description 是关键------它决定了 AI 什么时候触发这个 Skill。要写得具体：
yaml
# 好的写法
description: Vue 3 组件开发最佳实践。当用户创建组件、
使用 Composition API、或提到 Vue 时触发。
# 不好的写法
description: 帮助写 Vue 代码支持 Skills 的工具
目前支持 Agent Skills 的主流工具：
- Claude Code - Anthropic 官方，功能最完善
- Cursor - 热门 AI IDE
- VS Code + Copilot - 微软生态
- Trae CN - 字节跳动出品
- OpenCode - 开源社区
随着 Skills 标准化（agentskills.io），未来会有更多工具支持。
精选资源
官方
- agentskills.io - Skills 规范
- anthropics/skills - Anthropic 官方合集
社区
- vuejs-ai/skills - Vue 3 技能包
- antfu/skills - Anthony Fu 维护
- vercel-labs/skills - Vercel 官方
写在最后
Skills 的本质是知识的模块化和可复用。它让 AI Agent 从"聪明的实习生"进化为"经过培训的专业同事"。
对于开发者而言，Skills 提供了一种新的可能性：你不需要成为 AI 专家，只需要把你的专业知识文档化，就能让 AI 按照你的标准工作。
如果你有团队积累的最佳实践、代码规范、常见问题解决方案，不妨试试把它们打包成一个 Skill------这可能比你想象中更简单。