菜单
Use when 用户需要React项目开发指导、代码规范制定、最佳实践落地、性能优化、架构设计时。触发场景：React开发、React代码优化、React架构设计、React Hooks使用、Next.js开发、React组件设计、React性能优化。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | react-best-practices |
| description | Use when 用户需要React项目开发指导、代码规范制定、最佳实践落地、性能优化、架构设计时。触发场景：React开发、React代码优化、React架构设计、React Hooks使用、Next.js开发、React组件设计、React性能优化。 |
铁律：基于React官方推荐和行业通用最佳实践给出建议，结合项目实际情况，不盲目追求新技术。优先考虑代码的可维护性和团队的接受度。
启动时识别用户场景：
你的需求是：
1. 开发指导 — React项目开发过程中的问题解答、最佳实践建议
2. 代码优化 — 现有React代码的优化、重构
3. 架构设计 — React项目的架构设计、目录结构规划、状态管理选型
4. 规范制定 — React团队开发规范、代码规范、最佳实践文档编写
根据用户场景给出结构化的建议：
### 📝 最佳实践建议
#### 必做项
- [建议内容]：[具体做法，为什么要这么做]
- 反例：[错误的写法示例]
- 正例：[正确的写法示例]
#### 建议项
- [建议内容]：[具体做法，收益是什么]
- 适用场景：[什么情况下适用]
#### 可选优化
- [优化内容]：[具体做法，适用场景]
references/react-hooks-cheatsheet.md — React Hooks使用速查表references/react-component-design-guide.md — React组件设计指南references/react-state-management-comparison.md — React状态管理方案对比references/nextjs-best-practices.md — Next.js开发最佳实践超压缩通信模式。通过去掉废话、冠词和客套语，在保持完整技术准确性的同时削减约 75% token 用量。 当用户说"caveman 模式"、"简洁模式"、"少废话"、"省 token"、"简短点"或调用 /caveman 时触发。
对用户的计划或设计进行不留情面的深度追问，直到达成共同理解，逐一解决决策树的每个分支。当用户想要压力测试计划、检验设计时触发。触发词：追问我、grill me、逐一问我、挑战我的方案、深度追问、质疑设计、设计评审追问。
将当前对话压缩为交接文档，供下一个 Agent 会话接续工作。触发词：交接、handoff、下一个会话、会话摘要、接续工作、传给下一个 agent。
在代码库中发现架构"深化"机会——将浅模块变成深模块的重构，提升可测试性和 AI 可导航性。与 architecture-advisor 互补：architecture-advisor 设计新架构，本技能改善现有代码库结构。触发词：改进代码库架构、架构深化、找重构机会、模块耦合太紧、难以测试、代码难以理解、架构改进、improve architecture、refactor opportunities。
快速验证设计的一次性原型。区分两条分支——逻辑/状态模型用终端交互 App，UI 布局用多变体路由切换。当用户想原型验证、检验数据模型或状态机、探索多种 UI 方案时触发。触发词：原型、prototype、验证方案、快速试验、让我玩一玩、试几个设计。
Use when 已有书面实施计划、任务相对独立，且在本会话内通过子代理逐任务落实时。触发场景：执行实施计划、子代理开发、按计划实现、Task 派发实现、两阶段代码审查、plan execution。