用 find-skills 为 React 项目挑性能检查工具

React 页面慢下来以后，常见的处理方式是先加缓存、拆组件，再看看有没有改善。改动可能有效，也可能绕过了真正的等待位置。在让 Codex 动代码之前，可以先用 find-skills 找一套适合当前项目的检查方法，让每项建议都落到具体问题上。

这次任务的重点是性能检查。界面好不好看、组件是否容易复用，也值得处理，但可以留给其他任务，避免一次搜索把几个方向混在一起。

搜索前，给出项目条件

先安装搜索 Skill：

npx skills add https://github.com/vercel-labs/skills --skill find-skills -g -a codex -y

随后让 Codex 阅读项目的依赖版本、相关页面和构建脚本，再按问题搜索：

npx skills find react performance

Vercel 的 vercel-react-best-practices 是这一方向的候选。它的说明涵盖 React 和 Next.js，把请求等待、打包体积、服务端处理和重复渲染等问题列成不同检查项。对应来源是 vercel-labs/agent-skills，不要把仓库名、目录名和 Skill 的名称混为一谈。

如果决定采用这个候选，可以只安装它：

npx skills add vercel-labs/agent-skills --skill vercel-react-best-practices -g -a codex -y

命令来自候选的真实标识。对其他搜索项，也应先确认它的 name 和说明，再复制安装方式。

让检查顺着页面的等待过程走

可以向 Codex 提出这样的要求：

使用刚安装的性能 Skill 检查文章列表页。先列出会影响页面加载的请求与客户端依赖，说明问题出现在哪个文件、适用哪条规则。只修改已确认的问题，保持页面功能和数据权限不变。

阅读 Skill 时，别只停在总览。它会引用更细的规则文件，涉及具体修改时需要继续读相应内容，再对照项目采用的框架版本。通用建议有适用条件，不能脱离实际依赖照搬。

例如，两个请求互不依赖时，可以检查它们是否被安排成串行等待；请求之间有数据依赖，就要保留顺序。看到某条并行建议，并不意味着所有请求都应该一起发出。涉及缓存时，也需要先说明数据能被谁读取、多久允许更新，而不是只看能否减少请求次数。

把“建议”与“改善”分开记录

一次完整检查应留下定位、改动和验证。定位说明哪里有问题；改动说明代码做了什么；验证回答用户操作是否正常，以及目标指标有没有变化。

如果要比较页面加载时间，两次检查应使用可比的数据、构建方式和访问条件。开发模式与生产构建混着测，或者一次命中缓存、一次没有命中，结果就很难说明改动的作用。没有测量时，可以报告“按规则调整了请求顺序”，不要直接写成“性能提升”。

同样，能通过构建只能证明构建环节没有失败。页面加载、筛选、翻页等实际操作仍需要检查。让 Codex 把这几个操作写进任务完成条件，性能优化才有明确的结束位置。

Vercel 在 Agent Skills 仓库维护这套规则；find-skills 负责帮助找到候选，项目里的改动仍要经过项目自己的验证。