AI Skills：前端新的效率神器！
近来，AI 领域有个火爆的话题：Skills。
Github 上被疯狂 star 的仓库，很多都是和 skills 有关的。
有的仓库仅仅上线三个月就获得了快 50K 的 star，Skills 的火热可见一斑。
不管是大模型，还是 Cursor、Codex、Claude、Trae、Copilot 等编程 IDE 都在争先支持 Skills。
围绕 Skills，它们在做的就是为了完成一件事情：技能是通过学习和反复练习获得的，而 Skills 是把经验和最佳实践沉淀为 AI 能力，将“知道”转化为“做到”的本领。
详解什么是 Skills
要说清楚什么是 Skills，先来了解一下关于 AI 的 2 个核心概念-- Agent 和 MCP。
关于 Agent
让 Agent 开发一个在线商城平台，要完成购物功能，它只需要考虑用户输入的“我要购买一个商品”指令，并最终完成购买商品这个目标，它并不关心项目是否前后端分离，前端用 vue 还是 react 来实现，后端用 java 还是 php，选什么数据库，也就是说，Agent 不在乎细节。
Agent 是面向目标的。
关于 MCP
我们在开发项目的过程中，一个项目不可能所有的功能都自己实现，往往需要一些第三方的服务，比如短信通知，微信、支付宝支付。而使用这些服务的方式就是通过调用第三方平台的 API，每个平台的都有自己的 API 规则。
而 MCP 就是 AI 的 API，Agent 通过 MCP 来实现调用第三方服务，和第三方服务进行通信。
回到 Skills
讲清楚了 Agent 和 MCP 的概念后，我们知道，AI 在使用 MCP 或者完成一些目标任务时，会产生很多的重复性的工作，我们可以把这些重复性的工作整合成一个工具包，只需要让 AI 调用这个工具包就行，而这个工具包就是 Skills。
这个工具包，可以是前端的组件开发，文件下载，后端 SQL 查询，接口文档生成。所有人都可以使用这些工具包来完成自己工作。
★
简单来说，Skills 通过固定的规则和标准化的能力，来保证结果的稳定和一致。
下面从我们前端的角度出发，来看看 Skills：
开发一个增删改查的功能，你要创建 API 文件，状态管理、路由生成，增删改查的页面开发。想要按照项目或者公司的前端开发规范来完成这些任务，用 AI 来实现的话，仅凭一句提示词：帮我写一个文件管理功能，它可以做出来，但最终结果不是你想要的。
现在你可以使用 增删改查 Skill 来完成这项任务，完全按照你设定的规范来执行，设置帮你把接口联调好，再多的增删改查都能一个 Skill 搞定。
这就是 Skill 的便利性，让你从重复劳动中解放。
Skills 的应用场景
Skills 是经验、规则、最佳实践的积累，它把你“封装组件”、“封装函数”的能力都学会了。
在使用 Skills 时，我们要明确 2 个问题：
- 这件事情是否是重复的？
- 这件事情是否能够标准化？
当你得到肯定答案的时候，就可以考虑使用 Skills 来简化工作。
Skills 最适合的应用场景：
频繁重复性工作：比如增删改查。标准化的输出：基于UI规范，输出标准化的组件或功能页面。知识沉淀：项目或者公司的开发规范，前端的样式规范，色彩和字体的使用规范等。
skills.sh
目前社区已经涌现出了很多官方和个人分享的 Skills。
skills.sh 是 Vercel 发布的一个可视化的 AI Skills 平台，可以说它是AI Skills 界的 NPM。
它汇总了所有的公开 Skills，在上面可以看到 Skills 的信息，下载安装量，其中包括了前端、后端、DevOps、安全等 Skills，能快速检索出你想要的 Skills。
前端 Skills
agent-skills
vercel 推出的 skills 项目：
是 React 和 Next.js 的 Skills 集合。包含 8 个类别共 45 条规则，旨在指导自动化重构和代码生成。
目前 agent-skills 里面包括三个主要的技能集合：
react-best-practices
专门用于 react 和 nextjs：
基于 Vercel 工程团队的 React/Next.js 性能优化指南，含 40+ 分级规则：
适用场景：
- 新组件 / 页面开发
- 数据请求实现
- 代码性能评审、包体积
- 加载速度优化
核心规则：
- 消除请求瀑布（核心）
- 包体积优化（核心）
- 服务端性能
- 客户端数据请求
- 重渲染优化
- ...
都是非常实用的。
web-design-guidelines
对 UI 代码进行多维度合规性审计，含 100+ 规则：
适用场景：
- UI 评审
- 可访问性检查
- 设计审计
- 站点最佳实践校验
核心规则：
- 无障碍适配
- 焦点状态
- 表单设计
- 动画性能
- 排版规范
- 图片优化
- 暗黑模式适配
- ...
解决 AI 开发中的各种 UI 问题。
vercel-deploy-claimable
实现应用一键部署到 Vercel 平台，支持所有权转移：
适用场景：
- 应用部署
- 生产环境发布
- 获取线上预览链接
核心规则：
- 自动识别 40+ 前端框架
- 生成预览 URL 和所有权认领 URL
- 自动过滤无用文件（node_modules/.git）
vue-skills
vue-skills 是 voidzero 团队成员发起的项目：
★
专门为 AI 创建 Vue 技能，以增强 AI 在 Vue 3 开发中的能力。
也就是教 AI 怎么写 Vue3。
vue-skills 中包含 3 个主要的技能集合：
vue-best-practices
核心规则：
- vue3 最佳实践
- Composition API 最佳实践
- vue-router 类型处理
- vue3 代码可维护性
vueuse-best-practices
核心规则：
- VueUse 组合式 API 的最佳实践
- VueUse 常见问题规范
pinia-best-practices
核心规则：
- Vue3 应用中 Pinia的 TypeScript 配置
- Pinia 的最佳实践
- Pinia 常见问题规范
如何快速上手 Skills
这些 Skills 包是实打实的能在你的项目中发挥作用的，下面来看看如何快速使用。
- 安装
在项目中执行以下命令：
csharp
体验AI代码助手
代码解读
复制代码
npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-best-practices
安装过程中会让你确认： 选择支持的 AI 工具。
目前支持的工具包括：
- Antigravity
- Codex
- Cursor
- Gemini CLI
- Trae
启用的范围:
- 项目
- 全局
安装完成后，会自动根据你的提示词来启用 Skills，无需手动操作。
开始编码
接下来你就可以正常进行你的任务了，比如让 AI 帮你开发组件，它会自动调用 Skills 来完成任务。
★
帮我开发一个 segment 组件，要符合 vue3 的最佳实践。
企业/个人 Skills 开发
Skills 这么好用，我们也想自己开发一个 Skills 来提高我们的工作效率。
一个标准的 Skills 文件结构：
perl
体验AI代码助手
代码解读
复制代码
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。
★
自定义 Skill 的一个小技巧是，先让 Skill 能正常运行，再一步步去优化。
新的起点
vercel 率先祭出了 skills.sh 这个平台，更多类 NPM 的 Skills 平台将会如雨后春笋一般出现，AI 也要有自己的 Skills NPM 平台，这势必又是一场话语权的争夺。
而更多的、更高质量的 Skills 将会出现：
- 3D、2D 模型 skills
- node skills
- ios skills
- ui skills
- 企业 skills
- 个人 skills
- ...
目前 AI 开发已经不再局限于大模型的能力，高质量的代码取决于你给 AI 赋予了什么技能。
AI + Skills 的开发方式已经不可避免的成为未来前端开发的新方向。
原文：https://juejin.cn/post/7598807837868539930
