vercel-labs/agent-skills · 上手攻略

  • 仓库：vercel-labs/agent-skills
  • 链接：https://github.com/vercel-labs/agent-skills
  • 分类：Agent 技能 / 代码评审 / Vercel 工程实践
  • 作者：spark
  • 更新：2026-08-06

是什么

vercel-labs/agent-skills 是 Vercel 官方维护的 AI 编码代理技能合集（注意区分：姐妹仓库 vercel-labs/skills 是 npx skills 这个 CLI 包管理器本身；本仓库是内容合集）。每个 skill 是一份符合 Agent Skills 规范的 SKILL.md，外加可选的 scripts/ 与 references/，装到 Claude Code / Cursor / Codex / OpenClaw 等任意支持 Agent Skills 格式的代理后，对应主题会被自动激活。MIT 协议，可在工程内自由分发和二次修改。

注意：2026-01 Vercel 发布 npx skills CLI（vercel-labs/skills 仓库）作为"AI 代理技能的 npm"；本仓库是配套的"官方推荐内容集合"。

解决什么问题

把 Vercel 工程团队内部多年沉淀的 React/Next.js 性能、UI 可访问性、文档写作、Vercel 计费审计等 checklist 沉淀成可被 Agent 调用的"专家外挂"。Agent 看到对应上下文（写新组件、审 UI、写文档、查账单）就会按这份规范行动，而不是凭概率生成。代表条目（README 列出的）：

  • vercel-optimize：审计 Vercel 项目的成本、性能、可靠性、缓存、函数用量和计费机会；先收 Vercel metrics，再只去看 metrics 指向的路由与文件，输出排序后的成本/性能报告。
  • react-best-practices：Vercel 工程的 React / Next.js 性能规范，40+ 条规则按影响分级（Critical → Low-Medium），覆盖消除瀑布流、bundle 优化、服务端性能、客户端取数、rerender、JS 微优化等 8 类。
  • web-design-guidelines：100+ 条 UI 规则，覆盖 a11y、focus、表单、动画、字体、图像、性能、导航、深色模式、触摸、本地化与 i18n。
  • vercel-documentation-guide：80+ 条写作规范，覆盖声音与语气、内容类型、标题与结构、清单、代码块、占位符与单位、版式、定价页、AI workflow、PR 评审等。
  • react-native-skills：16 条 React Native / Expo 规则覆盖性能、布局、动画、图像、状态管理、架构、平台差异。
  • view-transitions：React View Transition API 的系统化使用，含 <ViewTransition>、addTransitionType、shared element transitions、Next.js transitionTypes、prefers-reduced-motion 等。
  • composition-patterns：React 组合模式，替代布尔 prop 泛滥的复合组件 / 状态提升 / 内部组合。
  • deploy-vercel：通过 claude.ai / Claude Desktop 一键部署，自动检测 40+ 框架，返回 preview URL 与可被用户"认领"所有权的 claim URL。

快速安装

前置：Node.js（任意支持 npx 的版本）+ 一个支持 Agent Skills 格式的编码代理（Claude Code、Cursor、Codex、OpenClaw 等）。

# 1. 一次性安装整套官方合集
npx skills add vercel-labs/agent-skills

# 2. 按需检索
npx skills find react performance
npx skills find vercel-optimize

# 3. 升级已装技能
npx skills update

装完后代理在匹配的任务上下文中会自动激活，无需手工 /skill。

也可以直接克隆做本地定制（典型 6 步）：

git clone https://github.com/vercel-labs/agent-skills.git
cd agent-skills
ls                              # 每个子目录都是一个独立 skill
cat react-best-practices/SKILL.md
# 修改 rules 后用 npx skills add . 指回本地路径即可

核心用法

最小可跑（"装 → 触发 → 输出"，以 Claude Code 为例）：

npx skills add vercel-labs/agent-skills
# 在 Claude Code 里直接说人话即可，例：
#   "Review this React component for performance issues"
#   "Audit my docs against the writing handbook"
#   "Deploy this Next.js app and give me the link"
#   "Optimize my Vercel project costs"
# 代理会自动激活 react-best-practices / vercel-documentation-guide /
# deploy-vercel / vercel-optimize，无需写命令。

如果你想从 CLI 直接跑某个 skill（例如 deploy-vercel 包装成 deploy 流水线）：

# 走 SKILL.md 提供的 scripts/ 目录
npx skills add vercel-labs/agent-skills
# 由代理按 SKILL.md 的指示跑 scripts/ 下的对应脚本；
# 部署类输出形如：
#   Preview URL: https://skill-deploy-abc123.vercel.app
#   Claim URL:   https://vercel.com/claim-deployment?code=...

典型适用场景

  • Vercel 部署的 Next.js 团队：装上即把"Vercel 工程团队的内部 lint/audit 经验"随身带，性能/成本/可访问性/写作一次到位。
  • 写组件 / 写文档 / 写 PR 描述：react-best-practices、web-design-guidelines、vercel-documentation-guide 三件套覆盖了"代码 + UI + 文档"三轴。
  • AI 协作的 review 流水线：把"评审清单"作为 skill 喂给 Agent，让它在你提交前先按规则自查并给出修改建议。
  • 一键 deploy / claim：deploy-vercel 适合 demo / 内部 review，把"部署到 Vercel → 给对方认领所有权"做成 1 句对话。
  • React Native / Expo 工程：react-native-skills 把平台差异 / 动画 / 性能规则打包。
  • 教学/培训：把仓库 fork 出来按团队规则删改，得到一份专属"工程规则教材"。

坑与注意

  • 两个仓库不要混：vercel-labs/skills（CLI 包管理器，主题是 npx skills）≠ vercel-labs/agent-skills（内容合集，主题是 SKILL.md 集合）；教程里如果同时出现，先看上下文是在讨论安装还是讨论内容。
  • 依赖 Agent Skills 规范：skill 不是纯 markdown prompt，需要你的代理实现 agentskills.io 规范才能被激活；少数老代理可能直接读 SKILL.md 而忽略 description 的触发条件。
  • 本地自定义后再装一次：你改了 react-best-practices 之类的规则后，记得 npx skills add . 指回本地，否则 npx skills update 会把你改的内容覆盖回上游。
  • deploy-vercel 输出的是 claim URL：默认部署到 Vercel 团队临时账户，用 claim URL 把所有权转移到你自己的 Vercel 账户前，任何人拿到 link 都能改部署。生产请直接绑自有 token。
  • vercel-optimize 要 Vercel 指标访问权：调用 vercel-optimize 时，代理或运行脚本需要能拉到你 Vercel 团队/项目的 metrics；沙箱/离线环境里它只能退化成静态规则建议。
  • 规则数量大、版本演进快：40+ / 100+ / 80+ 规则的具体条目随版本变动，引用时建议给 commit SHA，不要写死条数。
  • 复现性声明：本攻略基于仓库 main 分支、commit 7c180d9044c9ae2b442b567aad4e42a28dd5ed62（2026-08 HEAD），skill 列表与规则以该 commit 的 README 为准；未在本机真实跑过 npx skills add，命令按官方 README 复述。

与同类对比

维度 vercel-labs/agent-skills ComposioHQ/awesome-claude-skills 单点 SKILL.md 仓库
维护方 Vercel Labs 官方 社区聚合 个人
内容质量 高且贴合 Vercel 工程实践 广，质量参差 单点
触发机制 符合 Agent Skills 规范（description 匹配自动激活） 多数为自然语言描述 不一定
安装入口 npx skills add 多数需要手动 git clone 放 .claude/skills/ 等目录 手动
适合 Next.js / Vercel / React 团队 跨场景实验 单点修补
局限 主题偏前端/Vercel；后端/DevOps 覆盖薄 选错成本高 无

一句话推荐结论

任何在 Vercel / Next.js 栈上做严肃工程、又同时把 Claude Code / Cursor / Codex / OpenClaw 当 IDE 的团队，npx skills add vercel-labs/agent-skills 是一行命令级 ROI 最高的"工程经验外挂"——但要先认清楚装的是这个内容合集、不是 npx skills 这个 CLI 本身。

原始 commit/PR 链接 + commit SHA： - 仓库 HEAD：https://github.com/vercel-labs/agent-skills/commit/7c180d9044c9ae2b442b567aad4e42a28dd5ed62（7c180d9） - 配套 CLI 仓库：https://github.com/vercel-labs/skills - Agent Skills 规范：https://agentskills.io/ - Vercel Changelog：https://vercel.com/changelog/introducing-skills-the-open-agent-skills-ecosystem - 技能浏览：https://skills.sh/vercel-labs/agent-skills