通过 AI 自动完成代码审查、性能优化建议及一键部署，提升开发效率与代码质量。
详细介绍
Agent Skills
为 AI 编码助手设计的技能集合。每个技能包含打包的指令和脚本，用于扩展 AI 助手的能力。这套技能为常见开发任务提供了即用型专业知识，使 AI 助手能够在对话中直接执行审计、审查、部署和优化。
适用人群
使用 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优先、 <Steps/> 、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 实现流畅、原生感的动画。涵盖 <ViewTransition> 组件、 addTransitionType 、过渡类型以及 Next.js 集成（包括 next/link 上的 transitionTypes 属性）。
使用场景：
添加页面过渡或路由动画
动画化组件的进入/退出
创建共享元素过渡（列表到详情变形）
实现方向性（前进/后退）导航动画
在 Next.js App Router 中集成视图过渡
动画化列表重新排序或 Suspense 回退显示
覆盖主题：
<ViewTransition> 组件（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
工作流程：
将项目打包为 tarball
检测框架（Next.js、Vite、Astro 等）
上传到部署服务
返回预览 URL 和认领 URL
输出示例：
Deployment successful!
Preview URL: https://skill-deploy-abc123.vercel.app
Claim URL: https://vercel.com/claim-deployment?code=…
使用方法
安装后，技能会自动可用。当检测到相关任务时，AI 助手会自动使用它们。你可以通过自然语言描述任务来触发，例如：
"部署我的应用"
"审查这个 React 组件的性能问题"
"帮我优化这个 Next.js 页面"
你需要提供
支持 Agent Skills 的 AI 编码助手环境（如 Claude Code、Codex 等）。
你要处理的项目访问权限（本地文件、仓库或 Vercel 项目）。
对于 Vercel 相关技能，可能需要适当的 Vercel 账户权限。
你会获得
预构建的、专家级别的指令和脚本，引导 AI 助手执行特定任务。
自动化的 Vercel 项目审计、React 性能审查、UI 设计审计、写作风格审查、React Native 优化、视图过渡实现、组合模式重构以及即时部署。
对于部署：预览 URL（线上站点）和认领 URL（用于将所有权转移至你的 Vercel 账户）。
注意事项
部署是“可认领的”——部署后你可以将所有权转移至自己的 Vercel 账户。
vercel-optimize 技能仅调查指标指向的路由和文件，而非整个项目。
vercel-deploy-claimable 技能在上传时排除 node_modules 和 .git 。
这些技能设计用于 AI 编码助手，不是独立工具。
试试这样做
- 请根据 React 最佳实践指南审查我的组件代码，并指出潜在的性能瓶颈。
- 请审计我的 Vercel 项目，分析成本、性能及缓存使用情况，并提供优化报告。
- 请将我当前的 Web 项目部署到 Vercel，并提供预览链接和所有权认领链接。
作者：vercel-labs 开发者 / 职场人 ｜ GitHub Stars 29K ｜ 标签：编程开发 自动化 已认证 开源许可: 未知 License
来源：colaos.ai ｜ Skill ID：vercel-labs-agent-skills
留言 0
还没有留言，快来抢沙发