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

工作流程：

1. 将项目打包为 tarball
2. 检测框架（Next.js、Vite、Astro 等）
3. 上传到部署服务
4. 返回预览 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 编码助手，不是独立工具。