React (MobX)
为AI助手集成React与MobX开发能力，辅助编写前端代码
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：React (MobX)。 它的用途是：为AI助手集成React与MobX开发能力，辅助编写前端代码 详细介绍见：https://321skill.com/skills/react-mobx/ 请根据该页面的说明完成安装。
使用示例
“我需要一个购物车组件，使用MobX管理商品列表和总价，商品可以增减数量。”，它会生成一个使用`makeAutoObservable`的MobX store类，以及一个使用`observer`包裹的React函数组件，组件内会展示商品列表、操作按钮和动态计算的总价。或者
对AI说：“帮我用MobX写一个异步获取用户数据的逻辑。”，它会生成包含`flow`或`async action`的代码示例。
介绍
这个Skill为AI助手（如Claude）集成了React与MobX状态管理库的开发能力。它主要解决开发者在编写现代React应用时，需要频繁查阅文档、记忆API细节和最佳实践的问题，帮助提升前端开发效率。
使用时，开发者可以直接向AI助手描述React组件或MobX状态管理的需求，例如“创建一个使用MobX管理用户列表的React函数组件”，AI会基于此Skill的知识生成结构清晰、符合最佳实践的代码片段，包括组件定义、状态（observable）、动作（action）和副作用（reaction）的写法。
它非常适合正在使用或计划使用React+MobX技术栈的前端开发者、全栈开发者以及需要快速原型验证的产品经理。无论是构建新功能还是重构旧代码，都能获得即时的编码辅助。
建议在明确使用MobX作为状态管理方案的项目中使用此Skill。对于简单的、无需状态管理的组件，或使用其他状态库（如Redux、Zustand）的项目，其针对性优势可能无法完全发挥。生成的代码仍需开发者结合具体业务逻辑进行审查和集成。
核心特点
与通用的React辅助Skill相比，它深度集成了MobX的核心概念（如observable, action, computed, reaction），能生成遵循MobX响应式编程范式的最佳实践代码；同时，它专注于React函数组件与MobX的结合，提供了更现代、更具体的解决方案，而非泛泛的React语法提示。
注意事项
不适合不使用MobX，或使用其他状态管理库（如Redux, Recoil）的React项目。
常见问题
这个Skill能帮我写Redux代码吗？
不能，这个Skill专门针对MobX状态管理库，不包含Redux的相关知识。
它支持Class组件吗？
主要面向React函数组件（Hooks）与MobX的结合，对Class组件的支持可能有限。