开发 · Cursor

vercel-react-best-practices

Vercel 工程向的 React / Next 性能实践合集（约 70 条规则）。

作者: vercel-labs ↗
适用软件: Cursor
安装量: 586.6K（截至 2026-07-29 · skills.sh · 非本站统计）

完整介绍

上游 SKILL.md（Vercel Engineering）说明：本 Skill 在编写、评审或重构 React/Next 代码、涉及数据获取、包体积或性能改进时应启用。内含 8 类、约 70 条规则，按影响排序：消除瀑布流与包体积为 CRITICAL；服务端性能 HIGH；客户端数据获取与重渲染等中等优先级。每条规则有独立说明文件（如 rules/async-parallel.md），完整汇编见仓库 AGENTS.md。适合把团队级性能护栏固化进 Agent 工作流，而不是每次口头重复。

vercel-labs/agent-skills 中的 React 最佳实践 Skill：把瀑布流消除、包体积、服务端与重渲染等约定交给 Agent。

适合场景

Next.js / React 功能开发
代码评审前的规范与性能对齐
Vercel 生态项目的 Agent 编码
重构以消除 await 瀑布流或过大客户端包
审查 data fetching / Suspense / 动态 import 用法

不适合 / 注意

非 React 技术栈（Vue/Svelte 等）——规则不适用。
纯视觉 redesign（应优先 frontend-design / web-design-guidelines）。
与性能无关的文案/合规改写。

逐步安装

用 npx skills 安装 react-best-practices / vercel-react-best-practices（以 CLI 解析名为准）。
在 React/Next 功能开发或性能评审对话中显式引用本 Skill。
优先处理 CRITICAL 类：async 瀑布流与 barrel import 等包体积问题。
需要细则时让 Agent 打开对应 rules/*.md，而不是凭记忆发挥。

打开下载 / 源码地址open_in_new

安装命令（公开生态常用）

npx skills add vercel-labs/agent-skills/react-best-practices

兼容软件

Cursor
Claude Code
Codex
GitHub Copilot
Windsurf
Gemini CLI
其他兼容 skills CLI 的 Agent

以 skills.sh「Available for these agents」所示生态为准；具体宿主是否已接入以各客户端文档为准。

作者来源

作者 vercel-labs ↗ · skills.sh vercel-labs/agent-skills/vercel-react-best-practices ↗

上游要点（README / SKILL.md）

8 类优先级：async- / bundle- / server- / client- / rerender- / rendering- / js- / advanced-。
触发：写组件、data fetching、性能评审、bundle 优化。
完整文档：仓库内 AGENTS.md 与 rules/*.md。