2026 年，给 AI 编程代理"装包"已经成了工程团队的常规操作。Vercel 没有停留在旁观：它在 GitHub 的 vercel-labs 组织下先后开源了两个项目——技能合集 agent-skills 与技能安装器 skills，把自己多年积累的前端工程、部署运维与文档写作经验，打包成了代理可以直接调用的技能。本文先讲清楚 Agent Skills 这套机制解决什么问题，再逐一拆解 8 个官方技能的定位与用法，最后给出安装步骤与选型建议。
1、Skills 是什么
按照 Vercel 官方 FAQ 的定义，技能是打包好的可复用指令：一个文件夹装着说明、脚本和参考资料，遵循 Agent Skills 开放规范，安装之后代理会在遇到匹配的任务时自动加载。它针对的是三个老问题——提示词漂移、团队工作流约定随聊天记录丢失、指令四处堆放把上下文撑爆。技能把这些经验从对话历史里搬出来，放进一个可评审、可迭代的中心位置。
机制上最关键的设计是渐进式披露。代理启动时只加载一份轻量索引，看到的只有技能名字和描述，并不载入完整指令正文；只有当任务匹配时才拉取全文。这样装几十个技能，默认上下文也不会变大。
Vercel 在 FAQ 里明确说，技能并不只服务写代码：分析数据、管理工作流、客服等各类 Agent 都适用。技能与 MCP（Model Context Protocol）、工具、规则是互补关系——MCP 提供标准化的工具访问，技能擅长的是把完整工作流连同上下文与护栏打包在一起。
装技能不是给模型塞更多提示词，而是把团队经验变成可版本化、可评审的工程资产。
2、两个仓库的分工
两个仓库名字很像，分工完全不同。vercel-labs/agent-skills 是内容仓库，收录 Vercel 官方维护的 8 个技能，MIT 协议开源；vercel-labs/skills 是安装器仓库，提供 npx skills 命令行工具，定位相当于技能界的包管理器，2026 年 1 月发布。
CLI 支持 75 个以上的代理与编码工具，Claude Code、Codex、Cursor、GitHub Copilot、Gemini CLI 等都在列。核心命令一组：
add安装、list列出已装、find搜索技能源remove卸载、update更新、init初始化技能模板- 默认装进项目内，
-g装到全局，-a指定目标代理 - 符号链接安装跟随上游更新，复制安装则固定快照
仓库自身还带了一个 find-skills 技能，专门帮代理搜索可用的技能源，算是安装器的自举。
3、技能清单一览
8 个技能可以分成三类：React 与 UI 工程类、部署与成本类、审查类，覆盖了"写组件、发上线、做审查"的完整链路。总览如下：
| 技能 | 一句话定位 | 规模要点 |
|---|---|---|
react-best-practices |
React/Next.js 性能优化 | 40+ 条规则，8 大类 |
composition-patterns |
组件组合与 API 设计 | 复合组件等 4 类模式 |
react-view-transitions |
页面过渡动效 | 含现成 CSS 配方 |
react-native-guidelines |
React Native/Expo 实践 | 16 条规则，7 节 |
web-design-guidelines |
UI 与可访问性审查 | 100+ 条规则 |
writing-guidelines |
文档写作风格审查 | 80+ 条规则 |
vercel-optimize |
部署项目成本性能审计 | 指标驱动排查 |
vercel-deploy-claimable |
对话中一键部署 | 识别 40+ 框架 |
下面按类别展开。
4、React 与 UI 类技能
react-best-practices 是含金量最高的一个：来自 Vercel 工程团队的 React 与 Next.js 性能优化指南，40 多条规则分 8 大类，并按影响排了优先级——消除请求瀑布和包体积优化列为 Critical，服务端性能为 High，JavaScript 微优化只有 Low-Medium。写新组件、做数据获取、性能代码审查、优化加载耗时这几类场景会触发它。
composition-patterns 解决的是组件 API 腐化：布尔 props 越加越多、props 层层透传。技能给出复合组件抽取、状态上提、内部组合等重构模式，做组件库设计时尤其有用。
react-view-transitions 聚焦 React 的 View Transition API：<ViewTransition> 组件的进入、退出、更新与共享元素触发，addTransitionType 做方向性动画，以及 Next.js 里 next/link 的 transitionTypes 属性。技能还附带淡入、滑动、缩放等现成 CSS 配方，并照顾了 prefers-reduced-motion 无障碍设置。
react-native-guidelines 面向 React Native 与 Expo，16 条规则分 7 节：性能（FlashList、记忆化）、布局与安全区、Reanimated 动画、expo-image 图片、Zustand 状态、monorepo 架构与平台差异处理，适合移动端团队直接挂进日常开发。
5、部署与优化类技能
vercel-deploy-claimable 把"部署"压缩成对话里的一句话。它最初为 claude.ai 与 Claude Desktop 设计，说一句 Deploy my app 即可触发：技能自动从 package.json 识别 40 多种框架，把项目打成压缩包（排除 node_modules 和 .git）上传部署，最后返回两个链接。输出示例如下：
Deployment successful!
Preview URL: https://skill-deploy-abc123.vercel.app
Claim URL: https://vercel.com/claim-deployment?code=...
Preview URL 是立即可访问的线上地址，Claim URL 用来把部署所有权转移到自己的 Vercel 账号——很适合"先看效果再认领"的演示与分享场景。
vercel-optimize 是部署后的体检技能。它的方法论值得注意：先采集 Vercel 平台指标，再只深入指标指向的路由与文件，而不是漫无目的地全库扫描。产出是一份按优先级排序的成本与性能报告，覆盖函数用量、缓存、ISR、中间件、图片与构建分钟数。降成本、排查慢路由、找计费异常时用它。
6、审查类技能
web-design-guidelines 是一把 UI 审查的标尺，内置 100 多条规则：
- 可访问性：aria-label、语义 HTML、键盘处理
- 焦点态与表单：focus-visible、autocomplete、错误提示
- 动画：
prefers-reduced-motion、合成器友好变换 - 排版与图片：弯引号、
tabular-nums、懒加载、alt 文本 - 其他：长列表虚拟化、暗色模式、触控、i18n
对代理说 Review my UI 或 Check accessibility 就会触发，相当于给团队配了一位不知疲倦的设计审查员。
writing-guidelines 把 Vercel 写作手册也规则化了，80 多条：主动语态、禁用 easy/simple/quick 这类空词、按内容类型（教程、参考、排错）定语气、代码示例 TypeScript 优先且限 80 列 25 行，甚至管到价格页必须用表格呈现。连"AI 参与写作需披露"都写进了规则。维护产品文档的团队可以直接把它挂进 PR 审查流程。
7、安装与上手
安装只需一行命令。示例如下：
# 交互式选择要装的技能
npx skills add vercel-labs/agent-skills
# 只装单个技能，比如 UI 审查
npx skills add vercel-labs/agent-skills -s web-design-guidelines
装完即用，不需要额外配置——代理在相关任务出现时自动调用。想先试后装，可以用 npx skills use vercel-labs/agent-skills@react-view-transitions 临时拉起一个技能，不落盘。
技能本体就是一个 SKILL.md 加可选目录。frontmatter 结构示意如下：
---
name: react-best-practices
description: >
React and Next.js performance optimization guidelines
from Vercel Engineering. Contains 40+ rules across
8 categories, prioritized by impact.
license: MIT
---
name 必须全小写连字符且与目录同名；description 长 1～1024 字符——代理正是靠这段描述决定是否加载，所以它本质上是路由信息而非宣传语，值得像写 API 文档一样认真写。正文是 Markdown 指令，scripts/ 放可执行辅助脚本，references/ 放按需查阅的文档，三层结构共同构成渐进式披露。
8、从技能到 SDK 原语
Vercel 的动作不止于仓库。据第三方报道，AI SDK 6 在 2025 年 12 月引入了 skills 原语——用 SDK 自建 Agent 的团队，可以用同一套 SKILL.md 格式给线上代理加载技能，而不只服务本地编码代理；后续版本又增加了 uploadSkill API，上传一次即可在多次推理中复用。
回头看这是三层布局：agent-skills 提供官方内容，skills CLI 负责分发安装，AI SDK 原语打通运行时。同一份技能文件在本地编码代理与线上自建 Agent 两边都能跑，这才是格式开放的真正价值。
9、总结
Vercel 把自家工程经验拆成了 8 个可安装的技能：React 性能与组合模式、过渡动效、RN 实践负责"写得对"，一键部署与成本审计负责"跑得省"，UI 与写作审查负责"改得精"；配合 npx skills 安装器和 AI SDK 的 skills 原语，从本地代理到线上 Agent 都能复用。对于 Next.js 开发者，建议从 react-best-practices 装起；用 Vercel 托管服务的团队，把 vercel-optimize 挂进周期性任务，成本报告会比人工翻仪表盘直观得多；文档负担重的团队，则值得先试 writing-guidelines。
