React组件代码审查
写 React 组件担心踩坑时用这条：把组件文件路径交给 Agent，它会逐项检查属性类型、副作用依赖、渲染边界、水合问题和样式类名规范，并给出可直接对照的 diff 修改建议。
适合做什么
- 在 Cursor / 同类 Agent 里挂载可复用技能
- 把重复检查或生成流程固化成一句话指令
- 团队共享「技能卡」减少口头约定
不太适合
- 当作完整安全审计或生产发布的唯一依据
- 无环境上下文时指望一次跑通复杂流水线
提示词正文
【技能名称】React组件代码审查
【技能目标】深度审查React/Next.js组件：检查props类型、useEffect依赖、Suspense边界、SSR/CSR水合问题、Tailwind className规范，并给出修改建议代码diff。
【使用方式】
1. 将上方目标作为 Agent Skill / 自定义指令的核心描述；
2. 补充你的项目路径、技术栈与验收标准；
3. 要求 Agent 先列出检查清单，再执行并给出可复核的输出（如 diff / 报告）；
4. 若涉及发布或删除，必须二次确认。
【运营向用法提示】
可用于内容站、工具站或增长落地页的自动化检查与批处理；输出请要求中文结论 + 可执行下一步。复制后粘贴到 AI 对话框，按填空补全即可。
使用步骤
- 把组件审查目标设为Agent技能描述
- 补上项目路径、React版本与样式方案
- 让它先列水合与依赖检查项，再给diff
常见问题
只给单个组件文件够用吗？
可以先跑，但依赖关系判断会受限。把父组件、数据来源和渲染环境是SSR还是CSR一并说明，props类型与水合问题更容易定位。
Tailwind类名总被改写怎么办？
把项目里既有的类名约定、是否用clsx或cn合并、允许的断点写进技能描述，并要求它只在原类名基础上调整，不要换成其它样式方案。
什么情况下要自己补判断？
涉及业务状态流转、埋点上报时机这类需求，模型看不出上下文，需要你补上规则；生成的水合修复方案也要在本地跑一遍再合并。
来源说明
整理自公开提示词站点素材，经 52运营 筛选与页面改写，便于运营场景检索。 原始参考：来源链接