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 或者是项目的UISkill。