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

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

skills.sh

社区已涌现多个官方及个人分享的 Skills。skills.sh 是 Vercel 发布的可视化 AI Skills 平台，可视为 AI Skills 领域的 NPM。它汇总了所有公开 Skills，包含前端、后端、DevOps 等分类，支持快速检索。

前端 Skills

agent-skills

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

react-best-practices

专门用于 React 和 Next.js，基于 Vercel 工程团队的性能优化指南，含 40+ 分级规则。 适用场景：新组件/页面开发、数据请求实现、代码性能评审、加载速度优化。 核心规则：消除请求瀑布、包体积优化、服务端性能、客户端数据请求、重渲染优化等。

web-design-guidelines

对 UI 代码进行多维度合规性审计，含 100+ 规则。 适用场景：UI 评审、可访问性检查、设计审计。 核心规则：无障碍适配、焦点状态、表单设计、动画性能、排版规范、图片优化、暗黑模式适配等。

vercel-deploy-claimable

实现应用一键部署到 Vercel 平台，支持所有权转移。 适用场景：应用部署、生产环境发布、获取线上预览链接。 核心规则：自动识别 40+ 前端框架、生成预览 URL 和所有权认领 URL、自动过滤无用文件。

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

vue-skills

vue-skills 由 voidzero 成员发起，专门为 AI 创建 Vue 技能，以增强 AI 在 Vue 3 开发中的能力。

vue-best-practices

核心规则：Vue3 最佳实践、Composition API 最佳实践、vue-router 类型处理、代码可维护性。

vueuse-best-practices

核心规则：VueUse 组合式 API 的最佳实践、常见问题规范。

pinia-best-practices

核心规则：Pinia 的 TypeScript 配置、最佳实践、常见问题规范。

Github 地址：https://github.com/hyf0/vue-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

可设计 CRUD 或 UI 类 Skill。

新的起点

Vercel 推出了 skills.sh 平台，未来将出现更多类似平台。未来将涌现更多高质量 Skills，包括 3D/2D 模型、Node、iOS、UI、企业及个人的 Skills。

AI 开发质量取决于赋予的技能。AI + Skills 的开发方式将成为前端开发新方向。