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）

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 包是实打实的能在你的项目中发挥作用的，下面来看看如何快速使用。

1. 安装

在项目中执行以下命令：

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