技能介绍
Agent Skills 是 vercel-labs 为 AI 编码助手设计的技能集合。每个技能包含打包的指令和脚本，用于扩展 AI 助手的能力；这套技能为常见开发任务提供了即用型专业知识，使 AI 助手能够在对话中直接执行审计、审查、部署和优化。本组合包含 9 个可安装子 Skill。
适用场景
- 使用 AI 编码助手（如 Claude Code、Codex 等）的开发者，希望通过预构建的、专家级别的指令增强助手能力
- 需要覆盖 Vercel 优化、React 最佳实践、Web 设计指南、写作指南、React Native 指南、视图过渡、组合模式以及即时部署等场景
核心能力
vercel-optimize
审计 Vercel 项目的成本、性能、可靠性、缓存、函数使用和计费机会。它首先收集 Vercel 指标，然后仅调查这些指标指向的路由和文件。
使用场景：优化已部署的 Vercel 项目；减少 Vercel 成本或函数使用量；调查缓慢或昂贵的路由；查找缓存、ISR、中间件、图片或构建分钟问题；生成排名的成本和性能报告。
react-best-practices
来自 Vercel 工程团队的 React 和 Next.js 性能优化指南。包含 40 多条规则，分为 8 个类别，按影响优先级排序。
使用场景：编写新的 React 组件或 Next.js 页面；实现数据获取（客户端或服务端）；审查代码性能问题；优化捆绑包大小或加载时间。
覆盖类别：消除瀑布请求（关键）、捆绑包大小优化（关键）、服务端性能（高）、客户端数据获取（中高）、重渲染优化（中）、渲染性能（中）、JavaScript 微优化（低-中）。
web-design-guidelines
审查 UI 代码是否符合 Web 界面最佳实践。审计代码中 100 多条规则，涵盖可访问性、性能和用户体验。
使用场景：“审查我的 UI”“检查可访问性”“审计设计”“审查用户体验”“对照最佳实践检查我的网站”。
覆盖类别：可访问性（aria-labels、语义HTML、键盘处理）、焦点状态（可见焦点、focus-visible 模式）、表单（自动填充、验证、错误处理）、动画（prefers-reduced-motion、合成器友好的变换）、排版（弯引号、省略号、tabular-nums）、图片（尺寸、懒加载、alt文本）、性能（虚拟化、布局抖动、preconnect）、导航与状态（URL反映状态、深度链接）、暗色模式与主题（color-scheme、theme-color meta）、触摸与交互（touch-action、tap-highlight）、区域与国际化（Intl.DateTimeFormat、Intl.NumberFormat）。
writing-guidelines
审查文档和散文是否符合 Vercel 写作手册。审计页面中 80 多条规则，涵盖语气、结构、内容类型、代码示例、排版和 AI 工作流。
使用场景：“审查我的文档”“检查写作风格”“审计散文”“审查文档的语气和语调”“对照写作手册检查此页面”。
覆盖类别：规划（内容计划、内容类型、用户导向的标题）、语气与语调（主动语态、直接称呼、禁用词如 easy/simple/quick）、按内容类型调整语气（教程、操作指南、参考、概念、故障排除）、标题与结构（句子大小写、描述性子标题、TL;DR 开头）、列表（何时使用、加粗/描述格式）、代码（语言标签、TypeScript优先、80列/25行限制）、占位符、单位与数字（snake_case 文本、递增数字、64 KB/200 ms）、排版（不用破折号作标点、弯引号、省略号字符、不间断空格）、源格式（不硬换行、不用 --- 分隔线、空行纪律）、定价与金钱页面（表格、不妥协的细节）、AI 工作流（问责制、企业模型、先计划、披露AI使用）、审查（PR 描述纪律、作者问责）。
react-native-guidelines
针对 AI 助手优化的 React Native 最佳实践。包含 16 条规则，分为 7 个部分，涵盖性能、架构和平台特定模式。
使用场景：构建 React Native 或 Expo 应用；优化移动端性能；实现动画或手势；使用原生模块或平台 API。
覆盖类别：性能（关键，FlashList、记忆化、重型计算）、布局（高，flex 模式、安全区域、键盘处理）、动画（高，Reanimated、手势处理）、图片（中，expo-image、缓存、懒加载）、状态管理（中，Zustand 模式、React Compiler）、架构（中，monorepo 结构、导入）、平台（中，iOS/Android 特定模式）。
react-view-transitions
使用 React 的 View Transition API 实现流畅、原生感的动画。涵盖 View Transition 组件、addTransitionType、过渡类型以及 Next.js 集成（包括 next/link 上的 transitionTypes 属性）。
使用场景：添加页面过渡或路由动画；动画化组件的进入/退出；创建共享元素过渡（列表到详情变形）；实现方向性（前进/后退）导航动画；在 Next.js App Router 中集成视图过渡；动画化列表重新排序或 Suspense 回退显示。
覆盖主题：View Transition 组件（enter、exit、update、share 触发器）、addTransitionType 用于方向性/上下文特定动画、View Transition 类与 CSS 伪元素、使用 name 属性实现共享元素过渡、通过 Web Animations API 实现 JavaScript 动画、Next.js next/link 上的 transitionTypes 属性、即用型 CSS 动画配方（淡入淡出、滑动、缩放、翻转）、可访问性（prefers-reduced-motion）。
composition-patterns
可扩展的 React 组合模式。通过复合组件、状态提升和内部组合，避免布尔属性泛滥。
使用场景：重构包含大量布尔属性的组件；构建可复用的组件库；设计灵活的 API；审查组件架构。
覆盖模式：提取复合组件、提升状态以减少属性、内部组合以提高灵活性、避免属性透传。
vercel-deploy-claimable
即时将应用和网站部署到 Vercel。专为与 claude.ai 和 Claude Desktop 配合使用而设计，支持在对话中直接部署。部署是“可认领的”——用户可以将所有权转移至自己的 Vercel 账户。
使用场景：“部署我的应用”“部署到生产环境”“推送上线”“部署并给我链接”。
特性：从 package.json 自动检测 40 多种框架；返回预览 URL（线上站点）和认领 URL（转移所有权）；自动处理静态 HTML 项目；上传时排除 node_modules 和 .git。
效果预览
部署技能的输出示例：
Deployment successful!
Preview URL: https://skill-deploy-abc123.vercel.app
Claim URL: https://vercel.com/claim-deployment?code=...工作方式
安装后，技能会自动可用。当检测到相关任务时，AI 助手会自动使用它们；你可以通过自然语言描述任务来触发。
vercel-deploy-claimable 的工作流程：
- 将项目打包为 tarball
- 检测框架（Next.js、Vite、Astro 等）
- 上传到部署服务
- 返回预览 URL 和认领 URL
你需要提供
- 支持 Agent Skills 的 AI 编码助手环境（如 Claude Code、Codex 等）。
- 你要处理的项目访问权限（本地文件、仓库或 Vercel 项目）。
- 对于 Vercel 相关技能，可能需要适当的 Vercel 账户权限。
你会获得
- 预构建的、专家级别的指令和脚本，引导 AI 助手执行特定任务。
- 自动化的 Vercel 项目审计、React 性能审查、UI 设计审计、写作风格审查、React Native 优化、视图过渡实现、组合模式重构以及即时部署。
- 对于部署：预览 URL（线上站点）和认领 URL（用于将所有权转移至你的 Vercel 账户）。
使用示例
部署我的应用
审查这个 React 组件的性能问题
帮我优化这个 Next.js 页面页面给出的典型提问示例：
请根据 React 最佳实践指南审查我的组件代码，并指出潜在的性能瓶颈。请审计我的 Vercel 项目，分析成本、性能及缓存使用情况，并提供优化报告。请将我当前的 Web 项目部署到 Vercel，并提供预览链接和所有权认领链接。注意事项
- 部署是“可认领的”——部署后你可以将所有权转移至自己的 Vercel 账户。
vercel-optimize技能仅调查指标指向的路由和文件，而非整个项目。vercel-deploy-claimable技能在上传时排除node_modules和.git。- 这些技能设计用于 AI 编码助手，不是独立工具。
