Vercel Agent Skills：AI 编码代理技能集合

本文介绍 Vercel Agent Skills，一个由 Vercel 工程团队开发的 AI 编码代理技能集合。该项目遵循 Agent Skills 开放格式，提供了 React 和 Next.js 性能优化、Web 界面最佳实践、React Native 指南以及 React 组合模式等专业技能，帮助 AI 编码助手提供更专业、更准确的代码建议。

项目简介

Vercel Agent Skills 是一个开源的技能集合，旨在扩展 AI 编码代理的能力。每个技能都是打包的指令和脚本，包含 Vercel 工程团队的最佳实践和经验总结，涵盖性能优化、可访问性、架构设计等多个方面。

核心特性

官方品质：来自 Vercel 工程团队的最佳实践
专业深度：40+ 条 React 规则，100+ 条 Web 设计规则
AI 优化：专为 AI 编码代理设计的格式
开放标准：遵循 Agent Skills 开放格式
持续更新：与 Vercel 平台同步更新
实用导向：按影响程度优先级排序

可用技能

1. React 最佳实践 (react-best-practices)

来自 Vercel 工程的 React 和 Next.js 性能优化指南，包含 40+ 条规则，分为 8 个类别，按影响程度优先级排序。

使用场景：

编写新的 React 组件或 Next.js 页面
实现数据获取（客户端或服务端）
审查代码性能问题
优化打包大小或加载时间

涵盖类别：

类别	优先级	内容
消除瀑布流	关键	预加载、并行路由、流式渲染
打包优化	关键	代码分割、tree-shaking、动态导入
服务端性能	高	缓存策略、边缘函数、数据库优化
客户端数据获取	中-高	SWR、React Query、避免过度获取
重渲染优化	中	memo、useMemo、useCallback
渲染性能	中	虚拟化、懒加载、Suspense
JavaScript 微优化	低-中	事件处理、状态更新、副作用

示例规则：

typescript

// ❌ 避免：瀑布流数据获取
function Page() {
  const data = fetch('/api/data');
  const user = fetch('/api/user');
  return <Component data={data} user={user} />;
}

// ✅ 推荐：并行数据获取
async function Page() {
  const [data, user] = await Promise.all([
    fetch('/api/data'),
    fetch('/api/user')
  ]);
  return <Component data={data} user={user} />;
}

2. Web 设计指南 (web-design-guidelines)

审查 UI 代码是否符合 Web 界面最佳实践，审计 100+ 条规则，涵盖可访问性、性能和用户体验。

使用场景：

"审查我的 UI"
"检查可访问性"
"审计设计"
"审查 UX"
"检查网站是否符合最佳实践"

涵盖类别：

可访问性：aria-labels、语义化 HTML、键盘处理
焦点状态：可见焦点、focus-visible 模式
表单：自动完成、验证、错误处理
动画：prefers-reduced-motion、合成器友好变换
排版：弯引号、省略号、等宽数字
图像：尺寸、懒加载、alt 文本
性能：虚拟化、布局抖动、预连接
导航与状态：URL 反映状态、深度链接
深色模式与主题：color-scheme、theme-color meta
触摸与交互：touch-action、点击高亮
本地化与国际化：Intl.DateTimeFormat、Intl.NumberFormat

示例规则：

tsx

// ❌ 避免：缺少可访问性
<button onClick={handleClick}>Click</button>

// ✅ 推荐：完整的可访问性
<button
  onClick={handleClick}
  aria-label="提交表单"
  className="focus-visible:ring-2"
>
  点击
</button>

3. React Native 指南 (react-native-guidelines)

为 AI 代理优化的 React Native 最佳实践，包含 16 条规则，分为 7 个部分，涵盖性能、架构和平台特定模式。

使用场景：

构建 React Native 或 Expo 应用
优化移动端性能
实现动画或手势
使用原生模块或平台 API

涵盖类别：

类别	优先级	内容
性能	关键	FlashList、记忆化、重型计算
布局	高	flex 模式、安全区域、键盘处理
动画	高	Reanimated、手势处理
图像	中	expo-image、缓存、懒加载
状态管理	中	Zustand 模式、React Compiler
架构	中	monorepo 结构、导入优化
平台	中	iOS/Android 特定模式

示例规则：

typescript

// ❌ 避免：FlatList 性能问题
<FlatList
  data={items}
  renderItem={({ item }) => <HeavyComponent item={item} />}
/>

// ✅ 推荐：使用 FlashList
import { FlashList } from '@shopify/flash-list';

<FlashList
  data={items}
  renderItem={({ item }) => <HeavyComponent item={item} />}
  estimatedItemSize={100}
/>

4. 组合模式 (composition-patterns)

可扩展的 React 组合模式，通过复合组件、状态提升和内部组合来避免布尔属性激增。

使用场景：

重构有多个布尔属性的组件
构建可复用的组件库
设计灵活的 API
审查组件架构

核心概念：

复合组件：使用子组件而非布尔属性
状态提升：将状态提升到合适的层级
内部组合：组件内部处理组合逻辑

示例：

tsx

// ❌ 避免：布尔属性激增
<Modal
  open={true}
  showHeader={true}
  showFooter={true}
  closable={true}
  size="large"
/>

// ✅ 推荐：组合模式
<Modal open={true}>
  <Modal.Header>标题</Modal.Header>
  <Modal.Content>内容</Modal.Content>
  <Modal.Footer>
    <Button>关闭</Button>
  </Modal.Footer>
</Modal>

技术架构

技能结构

text

agent-skills/
├── react-best-practices/
│   └── SKILL.md
├── web-design-guidelines/
│   └── SKILL.md
├── react-native-guidelines/
│   └── SKILL.md
└── composition-patterns/
    └── SKILL.md

技能格式

每个技能遵循 Agent Skills 开放格式：

SKILL.md：技能定义、触发器、工作流程
元数据：名称、描述、版本
分类：按影响程度和类别组织
示例：正面和反面代码示例

安装指南

使用 skills.sh

bash

# 安装单个技能
npx skills add vercel-labs/agent-skills --skill react-best-practices

# 安装所有技能
npx skills add vercel-labs/agent-skills

Claude Code 插件

bash

# 添加 marketplace
/plugin marketplace add vercel-labs/agent-skills

# 安装技能
/plugin install react-best-practices@agent-skills
/plugin install web-design-guidelines@agent-skills
/plugin install react-native-guidelines@agent-skills
/plugin install composition-patterns@agent-skills

手动安装

bash

git clone https://github.com/vercel-labs/agent-skills.git

# 按照工具的技能安装文档配置

快速开始

React 项目优化

bash

# 在 Claude Code 中
> 使用 react-best-practices 技能审查这个组件的性能
> 使用 react-best-practices 技能优化这个页面的数据获取

Web 设计审计

bash

> 使用 web-design-guidelines 技能检查这个页面的可访问性
> 使用 web-design-guidelines 技能审计整个网站的设计

React Native 开发

bash

> 使用 react-native-guidelines 技能优化这个列表的性能
> 使用 react-native-guidelines 技能审查动画实现

组件重构

bash

> 使用 composition-patterns 技能重构这个复杂的对话框组件
> 使用 composition-patterns 技能设计更灵活的 API

使用场景

场景 1：Next.js 性能优化

typescript

// 优化前
export default function Page() {
  const [data, setData] = useState(null);
  useEffect(() => {
    fetch('/api/data').then(r => r.json()).then(setData);
  }, []);
  return <Component data={data} />;
}

// AI 使用 react-best-practices 技能后建议：
// 1. 使用服务端组件
// 2. 预取数据
// 3. 避免客户端瀑布流

// 优化后
async function Page() {
  const data = await fetch('/api/data', { cache: 'force-cache' }).then(r => r.json());
  return <Component data={data} />;
}

场景 2：可访问性改进

tsx

// 优化前
<div onClick={handleClick}>Click me</div>

// AI 使用 web-design-guidelines 技能后建议：
// 1. 使用语义化 HTML
// 2. 添加可访问性属性
// 3. 添加焦点样式

// 优化后
<button
  onClick={handleClick}
  aria-label="点击执行操作"
  className="focus-visible:ring-2 focus-visible:ring-blue-500"
>
  点击我
</button>

场景 3：React Native 列表优化

typescript

// 优化前
<FlatList
  data={items}
  keyExtractor={(item) => item.id}
  renderItem={({ item }) => (
    <ComplexRow item={item} />
  )}
/>

// AI 使用 react-native-guidelines 技能后建议：
// 1. 使用 FlashList
// 2. 记忆化渲染项
// 3. 添加 estimatedItemSize

// 优化后
import { FlashList } from '@shopify/flash-list';

const MemoizedRow = memo(({ item }) => (
  <ComplexRow item={item} />
));

<FlashList
  data={items}
  renderItem={({ item }) => <MemoizedRow item={item} />}
  estimatedItemSize={80}
/>

场景 4：组件 API 设计

tsx

// 优化前：布尔属性爆炸
interface CardProps {
  variant?: 'primary' | 'secondary';
  size?: 'sm' | 'md' | 'lg';
  showHeader?: boolean;
  showFooter?: boolean;
  showIcon?: boolean;
  clickable?: boolean;
  // ... 更多布尔属性
}

// AI 使用 composition-patterns 技能后建议：
// 1. 使用复合组件
// 2. 逻辑分组
// 3. 更直观的 API

// 优化后
<Card>
  <Card.Header>标题</Card.Header>
  <Card.Content>内容</Card.Content>
  <Card.Footer>底部</Card.Footer>
</Card>

最佳实践

1. 技能选择指南

任务	推荐技能
React/Next.js 性能优化	react-best-practices
UI/UX 审查	web-design-guidelines
React Native 开发	react-native-guidelines
组件架构设计	composition-patterns

2. 提示词编写

bash

# 好的提示词
> 使用 react-best-practices 技能审查这个组件，重点关注数据获取和渲染性能

# 差的提示词
> 帮我看看这个组件

3. 上下文提供

bash

# 提供完整上下文
> 使用 react-best-practices 技能优化这个页面
> 当前技术栈：Next.js 14、React 18、TypeScript
> 页面功能：展示商品列表，支持筛选和排序
> 性能问题：首屏加载慢，列表滚动卡顿

4. 迭代优化

bash

# 多轮对话
> 使用 react-best-practices 技能优化数据获取
> [AI 提供方案]
> 基于方案 1，如何处理错误情况？
> [AI 调整方案]
> 最终采用方案 2 和方案 3 的组合

规则优先级

关键优先级

这些规则对性能有重大影响：

消除瀑布流：并行数据获取、预加载
打包优化：代码分割、动态导入
React Native 性能：FlashList、记忆化

高优先级

这些规则显著改善用户体验：

服务端性能：缓存、边缘函数
React Native 布局：flex 模式、安全区域
React Native 动画：Reanimated

中等优先级

这些规则提供渐进式改进：

客户端数据获取：避免过度获取
重渲染优化：合理使用 memo
可访问性：ARIA 属性、键盘支持

低优先级

这些规则提供微优化：

JavaScript 微优化：事件处理优化
本地化：日期/数字格式化

贡献指南

欢迎贡献新的技能或改进现有技能：

Fork 本仓库
创建新的技能分支
添加 SKILL.md 文件
提交 Pull Request

项目链接

GitHub 仓库：https://github.com/vercel-labs/agent-skills
NPM 包：vercel-labs/agent-skills
开源协议：MIT License

字节笔记本

Vercel Agent Skills：AI 编码代理技能集合

项目简介

核心特性

可用技能

1. React 最佳实践 (react-best-practices)

2. Web 设计指南 (web-design-guidelines)

3. React Native 指南 (react-native-guidelines)

4. 组合模式 (composition-patterns)

技术架构

技能结构

技能格式

安装指南

使用 skills.sh

Claude Code 插件

手动安装

快速开始

React 项目优化

Web 设计审计

React Native 开发

组件重构

使用场景

场景 1：Next.js 性能优化

场景 2：可访问性改进

场景 3：React Native 列表优化

场景 4：组件 API 设计

最佳实践

1. 技能选择指南

2. 提示词编写

3. 上下文提供

4. 迭代优化

规则优先级

关键优先级

高优先级

中等优先级

低优先级

贡献指南

相关资源

项目链接