Vercel Labs react-best-practices 多维度简评

综合评分：9.3 / 10 ⭐⭐⭐⭐⭐ 类别：前端开发 / 性能优化 来源：vercel-labs/agent-skills 影响力：8k+ Stars，Next.js 背后的云平台 Vercel 官方出品 核心数据：8 大类、40+ 条规则，封装 Vercel 10 年生产代码库的工程知识

一、核心定位与价值

它是目前最权威的 React/Next.js 性能优化指南，没有之一。

这套 Skill 收纳了 Vercel 团队在生产环境摸爬滚打 10 年总结出的 React/Next.js 优化经验。每条规则都包含：

• ✅ 错误代码示例（反模式）
• ✅ 正确代码示例
• ✅ 影响级别（CRITICAL / HIGH / MEDIUM / LOW）

AI Agent 在审查或重构 React 代码时，能直接调用这套规则做结构化性能审查，比基于临时 prompt 的检查靠谱 10 倍。

Vercel 官方原话：

“该框架封装了 Vercel 生产代码库中超过十年的工程知识，虽说是专门为 AI 编码代理和大型语言模型消费而设计的，不过对人类开发者而言同样有价值。“

二、8 大类别详解

按影响级别从高到低排序：

类别 1：CRITICAL - 消灭异步瀑布流（Eliminate Waterfalls）

异步瀑布流 = 一个 async 等完了才开始下一个 async，是 React 应用性能的头号杀手。

规则 1.1：延迟 await 直到需要（Defer await until needed）

❌ 错误：

async function Page({ userId }: { userId?: string }) {
  const user = await fetchUser(userId)  // ❌ userId 可能是 undefined
  if (!userId) {
    return { isGuest: true }
  }
  return { user }
}

✅ 正确：

async function Page({ userId }: { userId?: string }) {
  if (!userId) {
    return { isGuest: true }  // ✅ 访客不发起请求
  }
  const user = await fetchUser(userId)
  return { user }
}

适用场景：登录态判断、feature flag、AB 实验、按需数据。

规则 1.2：用 Promise.all 并行独立操作

❌ 错误（人为瀑布流）：

async function Page() {
  const user = await fetchUser()       // 200ms
  const posts = await fetchPosts()     // 200ms
  const notifications = await fetchNotifications()  // 200ms
  // 总耗时：600ms
  return <Dashboard user={user} posts={posts} notifications={notifications} />
}

✅ 正确：

async function Page() {
  const [user, posts, notifications] = await Promise.all([
    fetchUser(),
    fetchPosts(),
    fetchNotifications()
  ])
  // 总耗时：200ms（取最长）
  return <Dashboard user={user} posts={posts} notifications={notifications} />
}

收益：页面加载时间减少数百毫秒。

规则 1.3：先启动 promise，后 await

// ❌ 错误：逻辑写在一起
const user = await fetchUser()
const orders = await fetchOrders()

// ✅ 正确：先启动，再 await
const userPromise = fetchUser()
const ordersPromise = fetchOrders()
const user = await userPromise
const orders = await ordersPromise

在 Server Components 中非常重要，因为组件结构可以并行渲染。

规则 1.4：用 Suspense 分片流式渲染

// ❌ 错误：全部等完才渲染
async function Page() {
  const slowData = await fetchSlowData()
  return <Layout slowData={slowData} />
}

// ✅ 正确：Suspense 分片
function Page() {
  return (
    <Suspense fallback={<Skeleton />}>
      <SlowComponent />
    </Suspense>
  )
}

async function SlowComponent() {
  const data = await fetchSlowData()  // 这里等待时其他内容可以渲染
  return <div>{data}</div>
}

真实收益：用户更快看到首屏内容。

类别 2：CRITICAL - 减少 Bundle Size

规则 2.1：避免桶文件导入

❌ 错误：

import { Check, X, Menu } from "lucide-react"
// 强制打包程序解析整个库

✅ 正确：

import Check from "lucide-react/dist/esm/icons/check"
import X from "lucide-react/dist/esm/icons/x"
import Menu from "lucide-react/dist/esm/icons/menu"
// 直接引入，tree-shaking 友好

比喻：不要把整个衣柜搬走只为穿一件衣服。

规则 2.2：用 next/dynamic 加载重型组件

// ❌ 错误：同步加载
import HeavyChart from './HeavyChart'

// ✅ 正确：动态加载
import dynamic from 'next/dynamic'
const HeavyChart = dynamic(() => import('./HeavyChart'), { ssr: false })

规则 2.3：延迟加载非关键第三方库

// ❌ 错误：首屏直接加载
import Analytics from './analytics'

// ✅ 正确：用户交互后加载
useEffect(() => {
  import('./analytics').then(({ init }) => init())
}, [])

规则 2.4：基于用户意图预加载

// hover 时预加载下一页
<Link href="/tools/" onMouseEnter={() => import('./Dashboard')}>
  Dashboard
</Link>

类别 3：HIGH - Server 端性能

规则 3.1：用 React.cache() 做请求内去重

❌ 错误（同一请求多次 fetch）：

async function getUser() {
  return fetch('/api/user').then(r => r.json())
}

const Header = async () => {
  const user = await getUser()  // 第 1 次
  return <header>{user.name}</header>
}

const Sidebar = async () => {
  const user = await getUser()  // 第 2 次（重复）
  return <aside>{user.name}</aside>
}

✅ 正确：

import { cache } from 'react'

const getUser = cache(async () => {
  return fetch('/api/user').then(r => r.json())
})

// 同一请求只调用 1 次

规则 3.2：用 after() 处理非阻塞副作用

// ❌ 错误：日志阻塞响应
async function handler() {
  await updateDatabase()
  await logAnalytics()  // 用户等这个
  return Response.json({ ok: true })
}

// ✅ 正确
import { after } from 'next/server'

async function handler() {
  await updateDatabase()
  after(async () => {
    await logAnalytics()  // 响应后异步执行
  })
  return Response.json({ ok: true })
}

类别 4：HIGH - 客户端数据获取

规则 4.1：在 Server Component 里 fetch 数据

// ✅ 在 Server Component 中
async function Page() {
  const data = await fetch('https://api.example.com/data')
  return <List items={data.json()} />
}
// 不需要 SWR/React Query，无需 useEffect

规则 4.2：避免 SWR/React Query 与 Server Component 重复请求

如果用 Server Component 已经 fetch 了数据，不要在客户端再 SWR 一次。

类别 5：MEDIUM - 重渲染优化

规则 5.1：用 React.memo / useMemo 仅在必要时

// ❌ 过度优化
const ChildComponent = React.memo(({ name }) => <div>{name}</div>)

// ✅ 仅在 prop 引用稳定且渲染昂贵时
const ExpensiveChart = React.memo(ExpensiveChartImpl, (prev, next) => {
  return prev.data === next.data
})

规则 5.2：避免在 render 中创建新对象/函数

// ❌ 错误：每次 render 创建新对象
<Child style={{ color: 'red' }} />

// ✅ 正确：提到组件外
const style = { color: 'red' }
function Parent() {
  return <Child style={style} />
}

类别 6：MEDIUM - 渲染性能

规则 6.1：列表渲染用稳定的 key

// ❌ 错误
{items.map((item, i) => <Item key={i} {...item} />)}

// ✅ 正确
{items.map(item => <Item key={item.id} {...item} />)}

规则 6.2：避免不必要的 Fragment

// ❌ 错误
return (
  <>
    <Header />
    <Content />
    <Footer />
  </>
)

// ✅ 当只有一项时不需要 Fragment
return <Content />

类别 7：LOW - 高级模式

规则 7.1：useTransition 标记非紧急更新

const [isPending, startTransition] = useTransition()

// 紧急：输入框响应
setInputValue(newValue)

// 非紧急：搜索结果列表
startTransition(() => {
  setSearchResults(results)
})

规则 7.2：useDeferredValue 延迟昂贵计算

const deferredQuery = useDeferredValue(query)
const results = useMemo(() => search(deferredQuery), [deferredQuery])

类别 8：LOW - JavaScript 微优化

规则 8.1：避免解构 props

// ❌ 微慢
function Component({ a, b, c }) {
  return <Child a={a} b={b} c={c} />
}

// ✅ 微快（V8 优化）
function Component(props) {
  return <Child {...props} />
}

三、安装指南

3.1 一键安装

npx skills add vercel-labs/agent-skills

3.2 选择性安装

# 只装 React 最佳实践（仅全局，仅 Claude Code）
npx add-skill vercel-labs/agent-skills \
  --skill react-best-practices \
  -g -a claude-code -y

# 列出所有可装 Skill
npx add-skill vercel-labs/agent-skills --list

3.3 安装路径

• Claude Code：~/.claude/skills/react-best-practices/
• Cursor：~/.cursor/skills/
• Codex：~/.codex/skills/
• OpenCode：~/.config/opencode/skills/

四、AGENTS.md 自动生成（关键特性）

安装后，所有规则会自动编译成单个 AGENTS.md 文件：

agent-skills/
└── skills/
    └── react-best-practices/
        └── AGENTS.md  ← 自动生成，包含全部 40+ 规则

这个文件是 AI 友好的——所有规则聚合成一个文档，可在代码审查或重构期间作为单一知识源加载。

好处：

• 消除了为每个项目进行临时提示工程的需要
• 跨工具一致（Claude Code、Cursor、Codex 都读这个文件）

五、3 个最关键规则（Top 3 CRITICAL）

如果你只记 3 条：

1. 消灭瀑布流：Promise.all 并行独立请求 → 节省数百毫秒
2. 避免桶文件导入：直接 from 'lucide-react/dist/esm/icons/check' → 减少 80% bundle
3. Suspense 流式渲染：让用户先看到首屏内容

这 3 条能解决 80% 的性能问题。

六、配合使用：web-design-guidelines

同仓库下还有另一个 Skill web-design-guidelines，包含 100+ 条 UI/UX 规则：

• 可访问性（WCAG）
• 焦点处理
• 表单验证
• 动画
• 排版
• 图像优化
• 导航
• 深色模式
• 触摸交互
• 国际化

两者一起装：

npx skills add vercel-labs/agent-skills
# → react-best-practices（性能 40+）+ web-design-guidelines（UI/UX 100+）+ vercel-deploy-claimable（部署）

七、实战示例：审查 React 组件

提示词

用 react-best-practices 审查我的 UserDashboard 组件，特别关注性能瓶颈。

AI 自动执行

1. 加载 AGENTS.md 规则库
2. 按 CRITICAL → HIGH → MEDIUM → LOW 顺序检查
3. 指出每个问题对应哪条规则
4. 给出修复后的代码

输出示例

## 审查结果（UserDashboard.tsx）

### 🔴 CRITICAL 问题

1. **规则 1.2 违反**：第 32-36 行
   ```tsx
   const user = await fetchUser()
   const posts = await fetchPosts()
   const stats = await fetchStats()

应改为 Promise.all，总耗时从 ~600ms 降到 ~200ms。

🟡 HIGH 问题

2. 规则 2.1 违反：第 8 行

   import { Card, Button, Avatar } from '@/components/ui'
   

   桶文件导入会导致打包程序解析整个 UI 库。

推荐修复

[完整修复后代码]

---

## 八、6 条使用建议

1. **核心 3 套件一起装**：react-best-practices + web-design-guidelines + vercel-deploy-claimable
2. **审查代码必启用**：每次 PR review 时调用
3. **CRITICAL 优先**：先解决 CRITICAL 和 HIGH 问题
4. **配合 CLAUDE.md**：把关键规则摘要写到项目根目录
5. **团队规范统一**：让所有成员用同一个规则库
6. **关注新规则**：Vercel 持续更新，定期 sync

---

## 九、优缺点对比

### ✅ 优点
- **绝对权威**：Vercel 官方出品，10 年实战沉淀
- **结构清晰**：按影响分级（CRITICAL / HIGH / MEDIUM / LOW）
- **配套 AGENTS.md**：跨工具统一知识源
- **配套 web-design-guidelines**：性能 + UX 双覆盖
- **一键安装**：npx skills add 一行搞定

### ❌ 缺点
- **专注 React 生态**：不适用于 Vue / Svelte
- **规则较多**：初学者可能信息过载
- **依赖最新 Next.js**：部分规则（如 React.cache）需 RSC 支持

---

## 十、常见 Q&A

**Q: 适用于 Vue 项目吗？**
A: 不适用。这套只针对 React/Next.js。

**Q: 团队规范怎么统一？**
A: 把 AGENTS.md 提交到 Git，所有成员 clone 后自动获得。

**Q: 规则太多记不住？**
A: 不用记。AI Agent 会自动加载并按规则审查。

**Q: 和 Vercel 商业版有关吗？**
A: 无关。这是开源免费的项目。

**Q: 更新频率？**
A: Vercel 持续更新，建议每月 sync 一次。

---

## 十一、总结

Vercel Labs react-best-practices 是 **React/Next.js 性能优化的权威标准**。

**核心价值**：
- 把 Vercel 10 年生产实战经验结构化
- 让 AI 审查 React 代码有章可循
- 团队性能规范的统一载体

**适用人群**：
- ✅ 所有 React/Next.js 项目
- ✅ 关注性能（Lighthouse 评分、Core Web Vitals）
- ✅ 团队规范化
- ❌ 不做 React 开发

**投入产出比**：⭐⭐⭐⭐⭐（5/5）——React 项目必装。

---

> 配套文档：[anthropics/skills 多维度简评](#) | [obra/superpowers 多维度简评](#) | [addyosmani/agent-skills 多维度简评](#) | [trailofbits/skills 多维度简评](#)

---

## 十四、10 大核心策略详解(完整版)

### 策略 1:消除请求瀑布流(CRITICAL)

> **Vercel 总结**:"请求瀑布流是 React 应用性能的头号杀手"。

**反例(顺序 await)**:
```typescript
async function Page() {
  const user = await fetchUser();     // 假设 200ms
  const posts = await fetchPosts();    // 又 200ms
  // 总计:400ms
  return <Dashboard user={user} posts={posts} />;
}

正例(Promise.all):

async function Page() {
  const [user, posts] = await Promise.all([
    fetchUser(),
    fetchPosts()
  ]);
  // 总计:200ms(节省 50%)
  return <Dashboard user={user} posts={posts} />;
}

收益:当处理多个数据源时,简单改一行可让页面加载时间减少数百毫秒。

参考: CSDN 完整 10 大策略

策略 2:避免桶文件导入(CRITICAL)

桶文件(barrel file)导入会强制打包程序解析整个库,即使你只需要一个组件。就像”为穿一件衣服搬走整个衣柜”。

反例:

import { Check, X, Menu } from "lucide-react";
// 触发:打包器解析 lucide-react 全部 1000+ 图标

正例(深路径导入):

import Check from "lucide-react/dist/esm/icons/check";
import X from "lucide-react/dist/esm/icons/x";
import Menu from "lucide-react/dist/esm/icons/menu";
// 触发:只打包这 3 个图标

进一步优化:使用 Next.js 的 optimizePackageImports:

// next.config.js
module.exports = {
  experimental: {
    optimizePackageImports: ['lucide-react', '@mui/material', 'lodash']
  }
}

策略 3:服务端组件(RSC)的”算一次”原则

核心问题:在同一次页面请求中,某些函数会被重复执行。

反例:

async function getUser() {
  return fetch('/api/user').then(r => r.json())
}

const Header = async () => {
  const user = await getUser()  // 调用 1
  return <div>{user.name}</div>
}

const Sidebar = async () => {
  const user = await getUser()  // 调用 2(重复!)
  return <div>{user.email}</div>
}

正例:用 React.cache():

import { cache } from 'react'

const getUser = cache(async () => {
  return fetch('/api/user').then(r => r.json())
})

// 同一请求内,getUser() 只执行一次
const Header = async () => {
  const user = await getUser()  // 实际请求
  return <div>{user.name}</div>
}

const Sidebar = async () => {
  const user = await getUser()  // 命中缓存!
  return <div>{user.email}</div>
}

参考: CSDN 系列二

策略 4:服务器端 Suspense 流式渲染

让用户尽快看到内容,而不是等所有数据加载完。

反例:

// 整页 await → 慢
async function Page() {
  const data = await fetchData()  // 5s
  return <div>{data}</div>
}

正例:

import { Suspense } from 'react'

function Page() {
  return (
    <>
      <Suspense fallback={<Skeleton />}>
        <SlowComponent />  {/* 5s */}
      </Suspense>
      <FastComponent />    {/* 立即显示 */}
    </>
  )
}

策略 5:避免不必要的客户端组件

反例:把整个组件标记为 client:

'use client'  // ⚠️ 整棵组件树都跑在客户端
export default function Page() {
  return <Layout>...</Layout>
}

正例:只在交互部分用 ‘use client’:

// page.tsx - 服务端组件
export default function Page() {
  return (
    <Layout>
      <Header />          {/* 服务端 */}
      <InteractiveButton />  {/* 客户端 */}
    </Layout>
  )
}

// InteractiveButton.tsx
'use client'
export function InteractiveButton() {
  // 只这一个组件在客户端
}

策略 6:并行数据获取(消除 RSC 边界浪费)

RSC 边界(RSC boundary)会导致数据获取在 RSC 和客户端之间”往返”。

反例:

// Server Component
async function ProductPage({ id }) {
  const product = await fetchProduct(id)
  // 这里 product 数据需要传到 Client Component
  return <ProductDetails product={product} />  // 序列化往返
}

正例:让 Client Component 自己 fetch:

// Client Component
'use client'
function ProductDetails({ id }) {
  const { data } = useSWR(`/api/product/${id}`)
  return <div>{data.name}</div>
}

策略 7:优化重渲染(精确 useCallback/useMemo)

反例:过度 useMemo:

// ⚠️ useMemo 本身有 overhead
const value = useMemo(() => ({ a: 1 }), [])  // 比直接 = { a: 1 } 还慢

正例:只在真正昂贵时用:

// ✅ 真正的昂贵计算
const sorted = useMemo(() => 
  hugeArray.sort((a, b) => a.value - b.value), 
  [hugeArray]
)

// ✅ 防止子组件不必要的重渲染
const handleClick = useCallback(() => {...}, [deps])

策略 8:动态导入(代码分割)

反例:

import HeavyChart from './HeavyChart'  // 全部打包进 main.js

正例:

import dynamic from 'next/dynamic'

const HeavyChart = dynamic(() => import('./HeavyChart'), {
  loading: () => <Spinner />,
  ssr: false  // 不需要 SSR
})

策略 9:图片优化

反例:

<img src="/huge-image.jpg" />  <!-- 5MB,没有优化 -->

正例:用 next/image:

import Image from 'next/image'

<Image
  src="/huge-image.jpg"
  width={800}
  height={600}
  alt="..."
  placeholder="blur"
  blurDataURL="data:..."
  loading="lazy"
  sizes="(max-width: 768px) 100vw, 50vw"
/>

next/image 自动提供:WebP 转换、响应式 srcset、懒加载、CLS 防止。

策略 10:字体优化

反例:

@font-face {
  font-family: 'Custom';
  src: url('/custom-font.woff2');
  /* 阻塞渲染 */
}

正例:用 next/font:

import { Inter } from 'next/font/google'

const inter = Inter({ 
  subsets: ['latin'],
  display: 'swap',  // 不阻塞渲染
  preload: true
})

export default function RootLayout({ children }) {
  return (
    <html className={inter.className}>
      <body>{children}</body>
    </html>
  )
}

next/font 自动提供:零布局偏移、自动子集化、内联到 CSS、预加载。

十五、40+ 规则完整分类

15.1 CRITICAL 优先级(消除请求瀑布流)

15.2 CRITICAL 优先级(包体积优化)

15.3 HIGH 优先级(服务端性能)

15.4 HIGH 优先级(客户端数据获取)

15.5 MEDIUM 优先级(重渲染优化)

15.6 MEDIUM 优先级(渲染性能)

15.7 LOW 优先级(高级模式)

15.8 LOW 优先级(JS 微优化)

参考: Vercel Engineering Blog | InfoQ 中文报道

十六、shuding 与 Vercel 团队

16.1 关键人物

16.2 Vercel 在 React 生态的位置

• Next.js 创造者:Next.js 是 React 全栈框架的事实标准
• Vercel 平台:前端云平台,部署 100 万+ 项目
• Turbopack:Rust 写的 Webpack 替代品
• AI SDK:ai npm 包,3 万+ stars
• Agent Skills:本次评测的对象

Shu Ding 在社区评价:“这才是真正的’拉平竞争场’——十年的最佳实践,现在对每一个写代码的人开放。”

参考: 企鹅号 Vercel 开源 | CSDN 系列

十七、3 个技能包详解

17.1 react-best-practices(40+ 规则,8 类别)

触发关键词:React, Next.js, performance, optimization, web vitals

8 个类别:

1. CRITICAL:消除请求瀑布流
2. CRITICAL:优化包体积
3. HIGH:服务端性能
4. HIGH:客户端数据获取
5. MEDIUM:重渲染优化
6. MEDIUM:渲染性能
7. LOW:高级模式
8. LOW:JS 微优化

每条规则结构:

• 优先级标签(CRITICAL / HIGH / MEDIUM / LOW)
• 问题描述
• ❌ 反例代码
• ✅ 正例代码
• 原理说明

17.2 web-design-guidelines(100+ 规则,11 类别)

触发关键词:design, UI, UX, a11y, accessibility

11 个类别:

• 可访问性(WCAG 2.1 AA)
• 焦点状态
• 表单处理
• 动画
• 排版
• 图片
• 性能
• 导航
• 暗黑模式
• 触控交互
• 国际化

17.3 vercel-deploy-claimable(部署到 Vercel)

触发关键词:deploy, Vercel, ship, preview

能力:

• 支持 40+ 框架(Next.js、Vite、Remix、Astro 等)
• 聊天窗口直接部署
• 自动生成预览地址
• 认领地址(team claim)

参考: 腾讯网 Vercel 开源

十八、安装与使用

18.1 一键安装(推荐)

npx add-skill vercel-labs/agent-skills

18.2 手动安装(高级)

# 1. 克隆仓库
git clone https://github.com/vercel-labs/agent-skills

# 2. 复制到 Claude Code skills 目录
cp -r agent-skills/skills/* ~/.claude/skills/

# 或项目级
cp -r agent-skills/skills/* .claude/skills/

18.3 工具支持矩阵

18.4 自动触发机制

装上后不需要配置:

• 写 React 组件 → 自动激活 react-best-practices
• 做 UI 设计 → 自动激活 web-design-guidelines
• 说”部署” → 自动激活 vercel-deploy-claimable

十九、性能基准测试

19.1 Vercel 官方实测数据

来自 Vercel 工程博客 公布的 Vercel Dashboard 3x 提速 案例:

19.2 Lighthouse 评分对比

19.3 真实业务影响

• 页面加载时间 -50% → 转化率 +15%(Amazon 数据)
• FID 改善 → 跳出率 -20%(Google 数据)
• LCP 改善 → 广告收入 +10-15%

参考: Vercel 性能优化案例

二十、与其他前端 Skills 对比

最佳实践:

• Vercel react-best-practices + addyosmani frontend-ui-engineering + Anthropic frontend-design 三剑合璧
• 性能用 Vercel,工程用 addyosmani,视觉用 Anthropic

二十一、社区与争议

21.1 正面反馈

“看起来确实很有用。对于像 v0 和 Lovable 这样的编码代理,我发现氛围编码代理的提示/上下文令牌多到让人惊讶。上下文工程绝对是氛围编码成功的关键因素。” —— Reddit r/vibecoding 用户

“Vercel 把 10 年 React 经验打包成 Skill 开源了。” —— 慕课网 Immerse

21.2 安全担忧

“想象一下,当技能描述被输入 AI 代理时,供应链遭到攻击的情景。真是个有趣的时代。” —— Reddit 用户

Vercel 的回应:Skill 文本是只读的,scripts/ 在沙箱中执行,且所有规则都有显式的”反合理化”防御。供应链安全与 Agent Skills 开放标准同步推进。

参考: InfoQ 完整报道

二十二、未来发展

22.1 短期(2026 Q3-Q4)

• React 19 / Next.js 15 全面支持
• Server Actions 规则集
• Streaming SSR 深度规则

22.2 中期(2027)

• 跨框架:Remix, SolidStart, TanStack Start
• React Server Components 完整规则集
• Turbopack 优化规则

22.3 长期

“让任何 React 团队都达到 Vercel 内部代码的质量水平。“

二十三、参考链接(完整版)

23.1 官方资源

1. vercel-labs/agent-skills GitHub ⭐ 8k+
2. Vercel 工程博客 - 性能优化案例
3. Next.js 官方文档
4. shuding 个人仓库
5. Turbopack 项目

23.2 中文深度分析

6. 腾讯网 Vercel 开源 - 3 个技能包
7. 企鹅号 Vercel 把十年经验开源 - 业界评论
8. CSDN Vercel 10 年 React 经验 - 10 大策略
9. CSDN 系列二 - RSC 详解
10. InfoQ 中文报道 - 40+ 规则
11. 慕课网 Immerse - 安装方法

23.3 性能工具

12. Lighthouse
13. Web Vitals
14. Chrome DevTools
15. PageSpeed Insights

23.4 相关 Skills

16. addyosmani/agent-skills ⭐ 37k+
17. anthropics/skills ⭐ 108k+
18. obra/superpowers ⭐ 34k+

23.5 社区资源

19. r/vibecoding - 社区反馈
20. Next.js Showcase
21. awesome-react

最后:Vercel react-best-practices 是**“把团队 10 年最佳实践开源给全世界”** 的典范。它不是替代你的性能优化知识,而是让你立刻拥有 Vercel 内部工程师的判断力。

十七、常见问题 FAQ

17.1 什么是 Skills?

Skills 是打包在文件夹中的一组指令,用于教 Claude 如何处理特定任务或工作流。通过 Skills,用户无需在每次对话中重复解释偏好、流程和专业知识。

17.2 Skills vs Subagents vs MCP?

17.3 如何选择 Skill?

1. 重复工作流 → Skill
2. 复杂多步骤 → Subagent
3. 外部 API → MCP
4. 结合使用 → Skill 编排 Subagent + MCP

17.4 Skills 在哪些平台可用?

• Claude Code
• Claude.ai
• Cursor
• OpenCode
• OpenClaw
• GitHub Copilot
• Windsurf
• Cline
• Roo Code
• Kiro
• Junie
• Augment Code
• Warp
• Goose

17.5 Skill 大小有限制吗?

• description:≤ 1024 字符(开放) / ≤ 1536 字符(Claude Code)
• SKILL.md:建议 < 500 行
• 完整加载:≤ 5,000 token
• 总大小:无硬性限制,建议 < 1MB

17.6 如何让 Skill 真正被触发?

来自 Anthropic 14 个设计模式:

1. description 主动:写明触发词
2. 排除条款:说明什么时候不用
3. 示例:在 SKILL.md 里放 2-3 个 Input/Output 示例
4. 测试:跑 5-10 个真实场景

17.7 8 个参考链接

1. Anthropic Skills 官方
2. 简书 Claude Code Skills 完整指南
3. CSDN 14 个 Skill 设计模式
4. CSDN Vibe Coding 实战
5. 腾讯网 Skill 创建完全指南
6. Anthropic Lessons from Claude Code
7. Superpowers 实战
8. OpenSkills 仓库

十八、结语:Skills 改变的不只是工作流

来自 腾讯网 Anthropic 内部 Skill 方法论 收尾洞察:

“Skill 本质上是在做 Context Engineering。”

当 5 年后我们回望 2026,会发现:

• Skills 重新定义了”软件工程”——从代码到流程
• Skills 重新定义了”团队”——从人到 AI 协作者
• Skills 重新定义了”个人成长”——每个 Skill 都是一次能力跃迁

未来属于那些能写出好 Skill 的人。

写一个 Skill,送给未来的自己。

本评测基于公开资料整理,部分案例为综合性示意。所有引用链接见上文”参考”章节。

参考资料

1. vercel-labs/agent-skills GitHub 仓库
2. React 官方文档
3. Next.js 官方文档
4. Vercel 官方文档
5. Web Vitals — Google 官方性能标准