AI Skills：前端开发的新效率工具与应用

近期，AI 领域出现热门话题：Skills。GitHub 上相关仓库获得大量 Star，热度可见一斑。

不管是大模型，还是 Cursor、Codex、Claude、Trae、Copilot 等编程 IDE 都在支持 Skills。围绕 Skills，它们旨在将经验和最佳实践沉淀为 AI 能力，将'知道'转化为'做到'。

详解什么是 Skills

要了解 Skills，需先了解 AI 的两个核心概念：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 是经验、规则、最佳实践的积累，封装了组件和函数的能力。使用时明确两个问题：

1. 这件事情是否是重复的？
2. 这件事情是否能够标准化？

得到肯定答案时，可考虑使用 Skills 简化工作。最适合的应用场景：

• 频繁重复性工作：比如增删改查。
• 标准化的输出：基于 UI 规范，输出标准化的组件或功能页面。
• 知识沉淀：项目或公司的开发规范，前端的样式规范，色彩和字体的使用规范等。

skills.sh

社区已涌现出很多官方和个人分享的 Skills。skills.sh 是 Vercel 发布的可视化 AI Skills 平台，可以说是 AI Skills 界的 NPM。它汇总所有公开 Skills，可查看信息、下载安装量，涵盖前端、后端、DevOps、安全等，能快速检索所需 Skills。

前端 Skills

agent-skills

Vercel 推出的 skills 项目，是 React 和 Next.js 的 Skills 集合。包含 8 个类别共 45 条规则，旨在指导自动化重构和代码生成。目前包括三个主要技能集合：

react-best-practices

专门用于 React 和 Next.js：基于 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。包含 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 文件结构：

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 的开发方式已成为未来前端开发的新方向。