刚刚，Vercel 把 10 年 React 功底开源了！CEO：相当于雇了个 mini 资深专家
| 使用指南

刚刚，Vercel 把 10 年 React 功底开源了！CEO：相当于雇了个 mini 资深专家

#Vercel #React #Next.js #Agent Skills #AI 编程

Prompt Engineering 已死？Context Engineering 万岁？

就在这两天，前端圈除了 DeepSeek 的刷屏，还有一个低调但极具杀伤力的开源项目引起了海外开发者的疯狂讨论。

Vercel 的实验室（Vercel Labs）悄悄更新了一个名为 agent-skills 的仓库。其中最引人注目的，是一个被戏称为**“Vercel 内部 10 年 React 功力浓缩版”**的 Prompt 文件——react-best-practices。

据说，只要把这套规则喂给 AI（无论是 Cursor、Windsurf 还是 Claude），你的 AI 助手瞬间就能从“只会写烂代码的实习生”，进化成一位精通性能优化、无障碍设计和服务器组件架构的资深架构师。

Vercel CEO Guillermo Rauch 更是多次暗示：未来的软件开发，不再是写文档给通过人看，而是写 Skill 给 Agent 用。

CleanShot 2026-01-15 at 07.52.48.png

🧐 这个“Skill”到底是什么？

简单来说，这是一个专门写给 AI 看的 Markdown 文件。

以前我们做最佳实践，是写在 Wiki 里，求着团队成员去读（然后被无视）。现在，Vercel 把这些最佳实践封装成了 “Agent Skills”。

这个 SKILL.md 文件里，浓缩了 Vercel 工程团队在 React 和 Next.js 领域数年的踩坑经验。根据 GitHub 上的源码分析，它不仅仅是简单的代码规范，更是一套优先级极高的决策树。

它把 React 开发的关注点分为了几个层级：

  1. 🔴 关键 (Critical):

    • 消除瀑布流 (Eliminating Waterfalls): 这一点被列为最高优先级。AI 必须学会如何避免在子组件中链式获取数据，而是利用 Server Components 并行加载。

    • 包体积优化 (Bundle Size): 严格控制客户端代码体积。

  2. 🟠 高 (High):

    • 服务端性能: 默认优先使用 RSC (React Server Components)。

  3. 🟡 中 (Medium):

    • 客户端数据获取、重渲染优化、渲染性能等。

⚡️ 核心“心法”剧透

我们深挖了这个 Skill 文件的内容，发现它给 AI 立了很多“规矩”，这些规矩非常有实战价值，建议大家直接抄到自己的 .cursorrules 里：

  • 默认服务端组件：除非必须使用 useState 或 useEffect，否则默认编写 Server Component。

  • 拒绝 useEffect 取数据：这是新手最容易犯的错。Skill 明确指示 AI：在 Next.js 中，数据获取应在 Server Component 或通过 Server Actions 完成，禁止在 useEffect 中手动 fetch。

  • Suspense 是标配：不要手写 isLoading 状态判断，使用 React Suspense 边界来处理加载状态，配合骨架屏（Skeleton）。

  • 图片与脚本：强制使用 next/image 和 next/script，禁止使用原生 <img> 标签，以确保 Core Web Vitals 分数。

  • Zod 校验：在处理 Server Actions 或 API 路由时，必须使用 Zod 进行数据结构校验，确保类型安全。

🔥 社区炸锅：这是文档的未来？

这个开源动作在 X (Twitter) 和 Reddit 上引发了热议。

观点一：文档即代码，代码即 Prompt

有开发者评论：“这简直是天才。以前我需要写几千字的文档教新员工怎么写 React，现在我只需要把这个文件丢给 Cursor，它写的代码比我招的 3 年经验工程师还规范。”

观点二：Context Engineering 的胜利

Vercel 的 CEO Guillermo Rauch 在采访中多次提到“Agentic Workflow”。社区认为，agent-skills 这种模式展示了未来的方向：与其费力去 Prompt Engineering（提示词工程），不如做好 Context Engineering（上下文工程）。

你需要做的，是给 AI 提供高质量的“技能包”，让它在特定场景下（比如“写一个高性能列表”）自动挂载这个技能。

观点三：实战效果拔群

有 Reddit 用户分享实测：“我把这个规则加到我的 Cursor 项目后，AI 甚至主动指出了我代码里的 Waterfall 问题，并重构成了 Promise.all 的形式。这种感觉就像有一个 Vercel 的核心开发在跟我结对编程。”

🛠 怎么用？（保姆级教程）

无论你用的是 Cursor、Windsurf 还是 Copilot，都可以立刻享受到这个“十倍工程师”的加持。

方法：添加到 .cursorrules (或项目 Prompt)

  1. 在你的项目根目录创建或编辑 .cursorrules 文件。

  2. 将 Vercel 的核心规则粘贴进去（简化版）：

Markdown

# React & Next.js Best Practices

You are an expert in React and Next.js performance. Follow these rules strictly:

1.  **Server Components First**: Default to Server Components. Only use "use client" when absolute necessary (state, effects, browser-only APIs).
2.  **No Waterfalls**: Avoid sequential data fetching. Use `Promise.all` or parallel Server Components to fetch data.
3.  **Performance**:
    - Use `next/image` for all images.
    - Use `next/font` for fonts.
    - Avoid large libraries if a smaller native alternative exists.
4.  **Data Fetching**:
    - Do NOT use `useEffect` for data fetching.
    - Use Server Components to fetch data directly.
    - Use Suspense for loading states.
5.  **Security**:
    - Validate all inputs using `zod` in Server Actions.

📥 Skill 下载地址

单个 Skill 下载（GitHub）：

Skill 名称下载地址
react-best-practicesSKILL.md

所有 Skills 打包下载（国内网盘）：

夸克网盘：https://pan.quark.cn/s/afb3b46baf22

口令：/~1ddc3A2pDc~:/

💡 结语

Vercel 这一波操作，实际上揭示了 AI 辅助编程的下一阶段：专家经验的代码化。

理论上，你团队里所有的“坑”和“最佳实践”，都应该变成一个 Skill。当“资深员工”的经验可以被无损复制给 AI 时，我们每个人的编码底线都被无限拔高了。

别等了，赶紧去把这位“Mini 专家”请进你的编辑器吧！

Vercel CEO 谈 AI 编程未来

Vercel CEO Guillermo Rauch 在这段视频中深入探讨了为什么 AI Agent 是软件开发的未来，以及 Vercel 如何将内部经验转化为 AI 技能。

👉 更多 AI 使用技巧指南文章：cc.guapihub.net