前言¶
React 和 Next.js 项目里，性能问题往往分散在数据获取方式、组件边界、打包体积和渲染路径里。团队规范写在文档里，审查时仍容易漏项；单靠通用模型回答，又未必对齐 Vercel Engineering 一贯强调的实践。
下面介绍 SkillHub 上的 vercel-react-best-practices：把「来自 Vercel Engineering 的 React 和 Next.js 性能优化指南」封装成 Agent 可遵循的 SKILL.md，用于编写、审查或重构代码时对齐同一套最佳性要求。
这是什么¶
vercel-react-best-practices 是面向开发编程（dev-programming）类的大模型 Skill，坐标为 @org-02qudk26/vercel-react-best-practices，当前版本 1.0.0，来源标注为 enterprise，由 智雨科技 发布到 SkillHub。
一句话定位：把 Vercel Engineering 侧的 React / Next.js 性能优化指南，转成 Agent 在安装后可直接引用的技能说明，帮助你在写代码、做 Code Review 或重构时，按同一套性能取向检查与改代码。
SkillHub 页面说明该 Skill 不需要 API Key（requires_api_key=false）。
核心功能¶
依据 SkillHub 公开简介，已核实的能力边界如下：
- 性能取向的规范载体：内容归属为 Vercel Engineering 的 React 与 Next.js 性能优化指南，不是泛泛的「React 入门」。
- 三类研发动作：明确用于编写、审查或重构 React / Next.js 代码，目标是保证实现上的「最佳性」（页面与 SkillHub 原文表述一致）。
- 通用 SKILL.md 形态：与其它 SkillHub 技能相同，以标准技能包形式安装到各 Agent 的 skills 目录，由模型在相关任务中读取并遵循其中的规则与检查点。
SkillHub 详情页未单独列出逐条规则名称；具体条目在安装后的 SKILL.md 中。本文不展开未在公开页面出现的细则，避免与包内版本不一致。
安装与启用¶
方式一：用 SkillHub CLI 安装（推荐）¶
先确认本机是否已有 skillhub：
command -v skillhub && skillhub --version
若未安装，可按 SkillHub 官方安装文档执行完整安装（CLI + 默认 Skill）：
curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash
仅安装 CLI 时：
curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash -s -- --cli-only
安装技能时，必须用 --dir 指向当前 Agent 的 skills 目录；默认装到 ./skills/ 时，部分客户端不会自动加载。
在 Cursor 中，skills 目录一般为：
~/.cursor/skills/
安装本 Skill 的命令示例：
skillhub install @org-02qudk26/vercel-react-best-practices --dir ~/.cursor/skills/
Claude Code 常用路径为 ~/.claude/skills/；Codex 为 ~/.codex/skills/ 或项目下的 .agents/skills/。将 --dir 换成你当前环境对应目录即可，安装步骤相同。
安装或更新技能后，按你所用客户端的要求重启或重新加载 Agent，以便读取新技能。
方式二：让 AI 按官方文档安装¶
SkillHub 技能页提供的提示词为：请 Agent 根据 SkillHub 安装说明，安装 @org-02qudk26/vercel-react-best-practices。适合已在使用对话式 Agent、尚未手动执行 CLI 的场景。
典型用法¶
经过上面的步骤，技能进入 Agent 的 skills 目录后，可在任务里显式引用坐标或技能名，把性能审查交给模型按包内指南执行。以下为与官方安装指引一致、可复现的用法示例。
安装阶段（与 SkillHub 页面一致）
在对话中发送：
请根据 https://skillhub.cn/install/skillhub.md，安装 @org-02qudk26/vercel-react-best-practices。
编写或审查阶段（任务描述示例）
在已启用该 Skill 的前提下，用自然语言限定范围与动作，例如：
使用 vercel-react-best-practices 审查下面这段 Next.js 页面组件，列出可能的性能问题并给出修改建议。
或：
按 @org-02qudk26/vercel-react-best-practices 重构该 React 组件的数据获取与渲染结构，保持行为不变。
具体检查项以安装包内 SKILL.md 为准；Agent 会在匹配到「编写 / 审查 / 重构 React 或 Next.js」类任务时引用该文件。
适用场景与注意¶
适合谁
- 使用 React 或 Next.js，希望在 PR、重构或新功能开发时，用统一性能清单做自检或辅助审查的团队或个人。
- 已使用 Cursor、Claude Code、Codex 等支持 skills 目录的 Agent，并愿意通过 SkillHub 管理技能包。
限制与注意
- 指南聚焦性能与最佳实践，不能替代业务逻辑测试、安全审计或设计规范。
- SkillHub 抓取信息显示该包 requires_api_key=false；仍须从可信来源安装，并在安装前确认来源、版本（当前 1.0.0）与发布者（智雨科技）。
- 公开统计（以 SkillHub API 资料为准）：评分 100000，下载 1463；与第三方转载数据可能不一致，以 SkillHub 页面为准。
- 规则会随 Skill 版本更新；升级后建议重新打开包内
SKILL.md核对变更。
结尾¶
vercel-react-best-practices 的价值在于：把 Vercel Engineering 的 React / Next.js 性能优化指南固定成 Agent 可执行的技能，让编写、审查和重构在同一套性能标准下进行。
SkillHub 技能页：https://www.skillhub.cn/skills/org-02qudk26/vercel-react-best-practices
API 条目：https://api.skillhub.cn/org-02qudk26/vercel-react-best-practices
