一个简单的指南，只需一条命令就能教您的 AI 编码助手 40 多种性能模式

Guillermo Rauch 今天早上宣布：Vercel 正在推出 skills —— 一个用于 AI 编码助手的包管理器（是的，又一个包管理器）。一条命令，您的 AI 代理就知道 10 多年的 React 和 Next.js 优化模式。

不仅如此 —— 您可以将其用于任何性质的任何技能：前端、后端、DevOps、安全。只要您能命名，只要命令能获取，就可以安装。

以下是设置方法、盒子里实际有什么，以及如果您使用 React 构建项目，这为什么重要。

1、快速入门

只需几秒钟即可开始。

步骤 1：安装 skills

npx add-skill vercel-labs/agent-skills

这会将 Vercel 策展的技能安装到您的本地环境。CLI 会自动检测您安装了哪些 AI 编码工具。

步骤 2：选择您的范围

安装程序会询问您希望技能在全局可用（所有项目）还是仅当前项目可用：

• 全局（~/.claude/skills/、~/.cursor/skills/ 等）——随处可用
• 项目（.claude/skills/、.cursor/skills/ 等）——仅限此代码库

步骤 3：开始编码

开始提示，开始相信。

就是这样。您的 AI 助手现在可以访问 40 多条 React 性能规则、Web 设计指南和部署助手。当您要求它审查组件或编写数据获取模式时，它会自动利用这些技能。

支持： Claude Code、Cursor、OpenCode、VS Code（带有 Copilot）、OpenAI Codex CLI、Gemini CLI 等。

2、刚刚发生了什么

Guillermo Rauch（Vercel 的 CEO）最近发推文：

我们正在推出 skills —— "AI 技能的 npm"。很高兴看到一个开放的、代理无关的技能生态系统蓬勃发展。

几个小时内，推文获得了 110,000 多次观看和 2,300 多个赞。React 社区注意到了。但这不仅仅是一个 Vercel 公告 —— 这是一个在整个行业中悄悄构建了几个月的生态系统的公开发布。

该存储库是 vercel-labs/agent-skills，它包含开箱即用的三个技能：

仅 React 最佳实践技能就非常充实。它与我在上周关于 Vercel 的 40 多条规则的文章中解析的内容相同 —— 但现在打包供机器直接消费。

3、Agent Skills 标准

以下是将其与又一个 .cursorrules 文件或 AGENTS.md 区分开来的原因：它是一个具有跨工具支持的开放标准。

Agent Skills 格式起源于 Anthropic 的 Claude Code，然后作为开放规范发布。越来越多的工具现在支持它：

SKILLS.md 现在几乎被所有地方采用。

技能如何工作：

技能是带有 SKILL.md 文件的文件夹 —— 带有 YAML 前置数据的 markdown。有意保持简单：

---
name: react-best-practices
description: React 和 Next.js 性能优化指南 
  来自 Vercel Engineering。在编写、审查或 
  重构 React/Next.js 代码时使用。
---

# React 最佳实践

## 何时应用
在以下情况下参考这些指南：
- 编写新的 React 组件或 Next.js 页面
- 实现数据获取（客户端或服务端）
- 审查代码是否存在性能问题

## 按优先级排序的规则类别
| 优先级 | 类别 | 影响 |
|----------|----------|--------|
| 1 | 消除瀑布 | 关键 |
| 2 | 包大小优化 | 关键 |
...

渐进式披露 是聪明的一点。当您的 AI 代理启动时，它只加载每个技能的 name 和 description —— 大约各 100 个 token。完整的指令仅在代理确定技能与您的当前任务匹配时加载。保持上下文窗口精简。

该规范位于 agentskills.io。治理由 Anthropic、Vercel 和社区贡献者共享。

4、几小时内生态系统的采用

在 Rauch 宣布后的几个小时内，其他项目开始发布自己的技能。

Better Auth —— 流行的身份验证库 —— 立即发布：

npx skills add better-auth/skills

Beka（Better Auth 的维护者）转发并引用了 Rauch 的公告，展示了库作者可以多快地将他们的领域专业知识打包供 AI 消费。

预计这种模式会加速。如果您维护一个库，您现在可以发布一个技能，教 AI 助手如何正确使用它 —— 正确的模式、常见的陷阱、安全陷阱。这是机器真正会阅读的文档。

如果您打算策划自己的技能，只需在公共存储库上遵循此结构。

your-skill-library/
├── README.md                          # 所有技能的概述
├── skills/                            # 主要技能目录
│   ├── skill-name-1/                  # 单个技能文件夹
│   │   ├── SKILL.md                   # 主要代理指令（必需）
│   │   ├── README.md                  # 人类可读的文档
│   │   ├── metadata.json              # 技能元数据（可选）
│   │   ├── rules/                     # 规则文件（如果技能是基于规则的）
│   │   │   ├── _sections.md          # 部分元数据
│   │   │   ├── _template.md          # 新规则的模板
│   │   │   └── area-description.md   # 个别规则
│   │   ├── scripts/                   # 辅助脚本（可选）
│   │   ├── references/                # 支持文档（可选）
│   │   └── AGENTS.md                  # 编译的输出（如果生成）
│   │
│   ├── skill-name-2/
│   │   ├── SKILL.md
│   │   └── ... 
│   │
│   └── skill-name-n. zip              # 技能也可以压缩
│
├── packages/                          # 构建工具和实用程序（可选）
│   └── ... 
│
└── . github/                           # GitHub 工作流（可选）

从公共 GitHub 存储库安装技能：

npx add-skill username/repository

安装存储在某地的技能：

# 从本地路径安装
npx add-skill /path/to/your/skill-folder

# 或相对路径
npx add-skill ../my-skills-repo

从直接 URL 安装：

npx add-skill https://raw.githubusercontent.com/user/repo/main/skills/my-skill/

关于先前工作的说明： 一些人指出 Agent Skills 格式看起来很像 AI 代理工具空间中的现有工作。足够公平 —— 这个标准不是凭空出现的。新颖之处在于跨工具支持的组合、Anthropic 的参与以及 Vercel 的分发覆盖范围。您将其视为建立在先前工作之上还是将其商品化取决于您的立场。

5、这对开发者生态系统意味着什么

前端、后端、DevOps、SysOps、InfoSec：只要您能命名，就有相应的技能。

Vercel 有着制定 React 生态系统采用的标准的历史记录。Next.js 模式成为 React 模式。Vercel 约定成为行业约定。

这是 Vercel 的举措，旨在塑造 AI 助手如何理解 React —— 他们通过开放标准而不是专有格式来实现这一点。

为什么这很重要？

跨工具可移植性。 同一技能适用于 Claude Code、Cursor、VS Code、OpenCode 和其他工具。没有供应商锁定。一次编写模式，在团队工作的任何地方使用它们。

打包了机构知识。 react-best-practices 中的 45 条 React 规则代表了 Vercel 多年的生产经验。通常存在于高级工程师头脑中、分散的 wiki 中或在人员离开时消失的东西。现在它是版本控制和机器可读的。

一个新的文档层。 库一直为人类提供 README。现在它们可以为 AI 提供技能。当 AI 助手帮助初级开发人员连接身份验证时，它可以利用 Better Auth 的技能在第一次尝试时就获得正确的模式。

如果您上周阅读了我的文章 —— Inside Vercel's react-best-practices: 40+ Rules Your AI Copilot Now Knows —— 这是后续。这些规则现在距离支持该标准的每个 AI 编码工具只有一条 npx 命令。

6、技能如何流动：从存储库到您的 AI 代理

非常简单，对吧？

工作原理如下：

1. 发现 —— 技能存在于 Git 存储库中。add-skill CLI 从 GitHub、GitLab 或任何 Git URL 获取。
2. 安装 —— 技能被复制到工具特定的目录。每个工具都知道去哪里查找。
3. 激活 —— 代理在启动时仅加载元数据。当您的任务与技能的描述匹配时，完整内容按需加载。
4. 执行 —— 代理在生成或审查代码时应用模式。

7、接下来是什么

技能注册表即将到来。 agentskills.io 网站已经列出了支持的工具和示例技能的链接。更正式的注册表 —— 技能的 npm —— 似乎是不可避免的。

企业技能库。 公司可以构建内部技能，编码他们的编码标准、架构决策和领域怪癖。新团队成员获得一个已经知道事情如何工作的 AI 助手。

自己动手。 该格式足够简单，可以在一个下午编写一个技能。agentskills.io 上的规范涵盖了架构 —— 前置数据字段、目录结构、渐进式披露模式。

想看看技能是如何组合的吗？克隆 vercel-labs/agent-skills 并通读
skills/react-best-practices/SKILL.md。它组织良好，值得花 10 分钟。

8、结束语

Vercel 刚刚让为您的 AI 编码助手提供多年的 React 优化知识变得异常简单。一条命令、跨工具支持、开放标准。

无论您将其视为 Vercel 扮演国王制造者还是真正有用的基础设施，实际结果是相同的：npx add-skill vercel-labs/agent-skills 让您的 AI 助手在 React 方面更出色。值得花 30 秒。

原文链接：Vercel Skills：AI 代理的npm - 汇智网