WinlatorXR
881.97M · 2026-02-04
近来，AI 领域有个火爆的话题：Skills。
Github 上被疯狂 star 的仓库，很多都是和 skills 有关的。
有的仓库仅仅上线三个月就获得了快 50K 的 star，Skills 的火热可见一斑。
不管是大模型，还是 Cursor、Codex、Claude、Trae、Copilot 等编程 IDE 都在争先支持 Skills。
围绕 Skills，它们在做的就是为了完成一件事情：技能是通过学习和反复练习获得的，而 Skills 是把经验和最佳实践沉淀为 AI 能力，将“知道”转化为“做到”的本领。
要说清楚什么是 Skills，先来了解一下关于 AI 的 2 个核心概念-- Agent 和 MCP。
让 Agent 开发一个在线商城平台，要完成购物功能，它只需要考虑用户输入的“我要购买一个商品”指令，并最终完成购买商品这个目标，它并不关心项目是否前后端分离，前端用 vue 还是 react 来实现，后端用 java 还是 php，选什么数据库，也就是说，Agent 不在乎细节。
Agent 是面向目标的。
我们在开发项目的过程中，一个项目不可能所有的功能都自己实现，往往需要一些第三方的服务，比如短信通知，微信、支付宝支付。而使用这些服务的方式就是通过调用第三方平台的 API，每个平台的都有自己的 API 规则。
而 MCP 就是 AI 的 API，Agent 通过 MCP 来实现调用第三方服务，和第三方服务进行通信。
讲清楚了 Agent 和 MCP 的概念后，我们知道，AI 在使用 MCP 或者完成一些目标任务时，会产生很多的重复性的工作，我们可以把这些重复性的工作整合成一个工具包，只需要让 AI 调用这个工具包就行，而这个工具包就是 Skills。
这个工具包，可以是前端的组件开发，文件下载，后端 SQL 查询，接口文档生成。所有人都可以使用这些工具包来完成自己工作。
下面从我们前端的角度出发，来看看 Skills：
开发一个增删改查的功能，你要创建 API 文件，状态管理、路由生成，增删改查的页面开发。想要按照项目或者公司的前端开发规范来完成这些任务，用 AI 来实现的话，仅凭一句提示词：帮我写一个文件管理功能，它可以做出来，但最终结果不是你想要的。
现在你可以使用 增删改查 Skill 来完成这项任务，完全按照你设定的规范来执行，设置帮你把接口联调好，再多的增删改查都能一个 Skill 搞定。
这就是 Skill 的便利性，让你从重复劳动中解放。
Skills 是经验、规则、最佳实践的积累，它把你“封装组件”、“封装函数”的能力都学会了。
在使用 Skills 时，我们要明确 2 个问题：
当你得到肯定答案的时候，就可以考虑使用 Skills 来简化工作。
Skills 最适合的应用场景：
频繁重复性工作：比如增删改查。标准化的输出：基于UI规范，输出标准化的组件或功能页面。知识沉淀：项目或者公司的开发规范，前端的样式规范，色彩和字体的使用规范等。目前社区已经涌现出了很多官方和个人分享的 Skills。
skills.sh 是 Vercel 发布的一个可视化的 AI Skills 平台，可以说它是AI Skills 界的 NPM。
它汇总了所有的公开 Skills，在上面可以看到 Skills 的信息，下载安装量，其中包括了前端、后端、DevOps、安全等 Skills，能快速检索出你想要的 Skills。
vercel 推出的 skills 项目：
是 React 和 Next.js 的 Skills 集合。包含 8 个类别共 45 条规则，旨在指导自动化重构和代码生成。
目前 agent-skills 里面包括三个主要的技能集合：
专门用于 react 和 nextjs：
基于 Vercel 工程团队的 React/Next.js 性能优化指南，含 40+ 分级规则：
适用场景：
核心规则：
都是非常实用的。
对 UI 代码进行多维度合规性审计，含 100+ 规则：
适用场景：
核心规则：
解决 AI 开发中的各种 UI 问题。
实现应用一键部署到 Vercel 平台，支持所有权转移：
适用场景：
核心规则：
Github 地址：github.com/vercel-labs…
vue-skills 是 voidzero 团队成员发起的项目：
也就是教 AI 怎么写 Vue3。
vue-skills 中包含 3 个主要的技能集合：
核心规则：
核心规则：
核心规则：
vue-skills Github 地址：github.com/hyf0/vue-sk…
这些 Skills 包是实打实的能在你的项目中发挥作用的，下面来看看如何快速使用。
在项目中执行以下命令：
npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-best-practices
安装过程中会让你确认： 选择支持的 AI 工具。
目前支持的工具包括：
启用的范围:
安装完成后，会自动根据你的提示词来启用 Skills，无需手动操作。
接下来你就可以正常进行你的任务了，比如让 AI 帮你开发组件，它会自动调用 Skills 来完成任务。
Skills 这么好用，我们也想自己开发一个 Skills 来提高我们的工作效率。
一个标准的 Skills 文件结构：
my-Skill/
├── Skill.md # 必需：核心指令
├── rules/ # 可选：规则设置
│ └── crud.md
├── examples/ # 可选：输入/输出示例
│ ├── input.md
│ └── output.md
├── templates/ # 可选：可复用的模板
│ └── component.tsx
├── LICENSE.txt # 可选：开源协议
└── resources/ # 可选：参考文件、运行脚本或素材
└── style-guide.md
你可以自由的去设计自己的 Skills，一个CRUD的 Skill 或者是项目的 UI Skill。
vercel 率先祭出了 skills.sh 这个平台，更多类 NPM 的 Skills 平台将会如雨后春笋一般出现，AI 也要有自己的 Skills NPM 平台，这势必又是一场话语权的争夺。
而更多的、更高质量的 Skills 将会出现：
目前 AI 开发已经不再局限于大模型的能力，高质量的代码取决于你给 AI 赋予了什么技能。
AI + Skills 的开发方式已经不可避免的成为未来前端开发的新方向。
