Vercel发布代理商技能：一款针对AI编码代理商的包管理器，包含10年React和Next.js优化规则。

Vercel发布了agent-skills，这是一套将最佳实践玩本转换为可重复使用的AI编码代理技能的技能集合。该项目遵循Agent Skills规范，并首先关注React和Next.js的性能、网页设计审查，以及Vercel上的可声明部署。技能可以通过类似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属性、表单控件不正确的标签关联、当用户请求减少运动时动画的使用不当、图像上缺失alt文本或懒加载，以及其他在手动审查中容易遗漏的问题。

3. vercel-deploy-claimable

这个技能将代理审查循环与部署连接起来。它可以打包当前项目为一个tarball，根据package.json自动检测框架，并在Vercel上创建部署。该脚本可以识别40多个框架，并支持静态HTML站点。

技巧返回两个URL。一个是为部署网站提供的预览URL。另一个是声明URL。声明URL允许用户或团队将其部署附加到Vercel账户，而无需共享原始环境中从凭证。

安装和集成流程

技能可以通过命令行安装。启动公告强调了简单的路径：

复制代码

npx skills i vercel-labs/agent-skills

此命令获取agent-skills存储库并将其准备为技能包。

Vercel及其周边生态系统还提供一个名为add-skill的CLI，它旨在将技能与特定代理连接起来。一个典型的流程如下：

复制代码

npx add-skill vercel-labs/agent-skills

add-skill通过检查其配置目录来扫描安装的编码代理。例如，Claude Code使用.claude目录，而Cursor使用.cursor以及家目录下的一个目录。然后CLI将所选技能安装到每个工具的正确skills文件夹中。

您可以通过非交互模式调用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、可选的scripts和references的文件夹，以便不同的AI编码代理可以消费相同的技能布局。
该存储库目前提供了3个技能，react-best-practices针对React和Next.js性能，web-design-guidelines针对UI和UX审查，以及vercel-deploy-claimable用于在Vercel上创建可声明的部署。
react-best-practices编码了40多条规则，分8个类别，按影响排序，并提供具体的代码示例，使代理可以执行结构化的性能审查，而不是基于提示的临时检查。
web-design-guidelines提供了100多条规则，涵盖了可访问性、焦点处理、表单、动画、排版、图像、性能、导航、深色模式、触摸交互和国际化，使代理能够执行系统的UI质量检查。
技能可以通过如npx skills i vercel-labs/agent-skills和npx add-skill vercel-labs/agent-skills的命令安装，然后从代理特定的skills目录中发现，将最佳实践库转化为可重复使用、受版本控制的建设性模块，适用于AI编码工作流程。