Vercel发布了agent-skills，这是一套将最佳实践手册转化为AI编码代理可复用技能的集合。该项目遵循Agent Skills规范，首先专注于React和Next.js性能、网页设计审查以及在某平台的的可认领部署。技能通过一个类似于npm的命令安装，随后在正常的编码流程中被兼容的代理发现。
Agent Skills格式
Agent Skills是一种用于为AI代理打包能力的开放格式。一个技能是一个包含指令和可选脚本的文件夹。该格式的设计使得不同的工具能够理解相同的布局。
在vercel-labs/agent-skills中，一个典型的技能包含三个主要组件：
- SKILL.md：包含描述该技能功能和行为的自然语言指令。
- scripts目录：包含代理可以调用以检查或修改项目的辅助命令。
- references目录（可选）：包含额外的文档或示例。
react-best-practices技能还会将其单独的规则文件编译成一个单独的AGENTS.md文件。该文件针对代理进行了优化，将所有规则聚合到一个文档中，可以在代码审查或重构期间作为知识源加载。这消除了为每个项目进行临时提示工程的需要。
vercel-labs/agent-skills中的核心技能
该仓库目前提供了三个针对常见前端工作流程的主要技能：
1. react-best-practices 该技能将React和Next.js性能指导编码为一个结构化的规则库。它包含超过40条规则，分为8个类别。这些规则涵盖了诸如消除网络瀑布流、减少捆绑包大小、服务器端性能、客户端数据获取、重渲染行为、渲染性能和JavaScript微优化等领域。 每条规则都包含一个影响评级。关键问题列在前面，然后是影响较小的更改。规则通过具体的代码示例来表达，展示了一个反模式和一个修正版本。当兼容的代理审查React组件时，它可以将发现直接映射到这些规则上。
2. web-design-guidelines 该技能专注于用户界面和用户体验质量。它包含超过100条规则，涵盖可访问性、焦点处理、表单行为、动画、排版、图像、性能、导航、深色模式、触摸交互和国际化。 在审查期间，代理可以使用这些规则来检测缺失的ARIA属性、表单控件不正确的标签关联、用户请求减少运动时对动画的误用、图像缺少替代文本或延迟加载，以及其他在手动审查中容易遗漏的问题。
3. vercel-deploy-claimable 该技能将代理审查循环与部署连接起来。它可以将当前项目打包成tarball，基于package.json自动检测框架，并在某平台上创建部署。该脚本可以识别超过40种框架，并且还支持静态HTML站点。 该技能返回两个URL。一个是已部署站点的预览URL。另一个是认领URL。认领URL允许用户或团队将部署附加到他们的某平台账户，而无需共享原始环境的凭据。
安装和集成流程
可以从命令行安装技能。发布公告强调了一个简单的路径：
npx skills i vercel-labs/agent-skills
该命令获取agent-skills仓库并将其准备为一个技能包。
某平台及周边生态系统还提供了一个add-skill CLI，旨在将技能连接到特定的代理。典型的流程如下：
npx add-skill vercel-labs/agent-skills
add-skill通过检查配置目录来扫描已安装的编码代理。例如，Claude Code使用.claude目录，而Cursor使用.cursor和主文件夹下的目录。然后，CLI会将选定的技能安装到每个工具的正确技能文件夹中。
您可以在非交互模式下调用add-skill以精确控制安装内容。例如，您可以为Claude Code仅在全局级别安装React技能：
npx add-skill vercel-labs/agent-skills --skill react-best-practices -g -a claude-code -y
您也可以在安装前列出可用的技能：
npx add-skill vercel-labs/agent-skills --list
安装后，技能存储在代理特定的目录中，例如~/.claude/skills或.cursor/skills。代理发现这些技能，读取SKILL.md，然后能够将相关的用户请求路由到正确的技能。
部署后，用户通过自然语言进行交互。例如，“审查此组件是否存在React性能问题”或“检查此页面的可访问性问题”。代理检查已安装的技能，并在适当的时候使用react-best-practices或web-design-guidelines。
关键要点
- vercel-labs/agent-skills实现了Agent Skills规范，将每个能力打包成包含SKILL.md、可选脚本和参考资料的文件夹，这样不同的AI编码代理就可以使用相同的技能布局。
- 该仓库目前提供了3个技能：用于React和Next.js性能的react-best-practices、用于UI和UX审查的web-design-guidelines，以及用于在某平台上创建可认领部署的vercel-deploy-claimable。
- react-best-practices编码了超过40条规则，分为8个类别，按影响排序，并提供具体的代码示例，这使得代理能够运行结构化的性能审查，而不是基于临时提示的检查。
- web-design-guidelines提供了超过100条规则，涵盖可访问性、焦点处理、表单、动画、排版、图像、性能、导航、深色模式、触摸交互和国际化，使代理能够进行系统化的UI质量检查。
- 技能通过诸如
npx skills i vercel-labs/agent-skills和npx add-skill vercel-labs/agent-skills等命令安装，然后从代理特定的技能目录中被发现，从而将最佳实践库转化为AI编码工作流中可复用、版本可控的构建块。
