React
专注于React应用开发、调试与代码审查的AI助手
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：React。 它的用途是：专注于React应用开发、调试与代码审查的AI助手 完整的 Skill 内容见：https://321skill.com/skills/react-x-5/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
‘我的这个useEffect在开发环境下执行了两次，导致API重复调用，这是为什么？’ 它会分析你的Effect依赖数组和组件结构，解释Strict Mode下的行为，并给出避免重复请求的建议。或者，
对AI说：‘帮我审查这段AI生成的React Server Component代码，看看有没有潜在问题。’ 它会检查数据获取、流式渲染和客户端组件的使用是否符合规范。
介绍
本Skill旨在解决React开发者在构建、调试和审查代码时遇到的各种常见痛点。无论是组件设计、状态管理选择，还是追踪难以捉摸的渲染Bug，它都能提供针对性的帮助。
它通过理解你的代码片段、错误信息和具体问题描述来工作。你可以直接粘贴代码，描述遇到的异常行为（如“组件无限重渲染”或“状态不更新”），或询问最佳实践（如如何选择Zustand与Context）。它会分析并提供解决方案、优化建议或代码审查意见。
它非常适合正在编写、重构React组件的前端或全栈开发者，尤其是那些在状态管理、性能优化、React新特性迁移或测试方面需要指导的工程师。对于处理AI生成React代码的审查任务，也能提供专业视角。
建议在使用时尽可能提供具体的代码示例和错误堆栈，问题描述越详细，得到的建议越精准。注意，它主要服务于React核心库的Web开发场景，不涵盖React Native移动开发或Next.js框架特定的路由、部署问题。
核心特点
与通用编程助手相比，它深度聚焦于React生态，能精准诊断React特有的问题，如Hook规则违反、Hydration不匹配、Effect竞态条件；与单一功能的React代码生成器不同，它集成了构建、调试、审查和最佳实践指导的全流程支持。
注意事项
不适用于React Native移动应用开发或Next.js框架的路由、部署等框架级问题。
常见问题
能帮我解决‘Too many re-renders’错误吗？
可以。请提供相关组件代码和状态更新逻辑，我会帮你分析无限循环的原因并提供修复方案。
能指导我如何从React 18升级到React 19吗？
可以。我会针对React 19的新特性（如Server Actions、React Compiler）提供迁移建议和注意事项。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/react-x-5/raw/index.md 读取 React 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/react-x-5/raw/index.md（查看排版版本）