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 个问题：

1. 这件事情是否是重复的？
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）

Github 地址：https://github.com/vercel-labs/agent-skills

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 常见问题规范

vue-skills Github 地址：https://github.com/hyf0/vue-skills

如何快速上手 Skills

这些 Skills 包是实打实的能在你的项目中发挥作用的，下面来看看如何快速使用。

1. 安装
   在项目中执行以下命令：

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 来完成任务。

企业/个人 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 将会出现：

• 3D、2D 模型 skills
• node skills
• ios skills
• ui skills
• 企业 skills
• 个人 skills
• …

目前 AI 开发已经不再局限于大模型的能力，高质量的代码取决于你给 AI 赋予了什么技能。
AI + Skills 的开发方式已经不可避免的成为未来前端开发的新方向。

↘AI Skills：前端新的效率神器！