react-ddt

react-ddt 是 React dont-do-that packaging。

这个 skill 专门约束 React 组件和 hook 里最容易反复出错的一类问题：把与 React state 无关的纯函数、静态常量和类型定义耦合在 .tsx 或 hook 主文件里，导致组件文件越来越重，review 时很难快速判断哪些是渲染逻辑，哪些只是普通计算逻辑。

它和 ddt 不是互相替代关系。ddt 负责反对无收益的过度封装，react-ddt 负责把 React 文件里的非 React 职责放到项目约定位置。执行时要同时考虑两边规则：该抽离的纯函数要抽离，不该为了形式新增一堆薄包装。

规范读取要求

如果这个 skill 要审查或修改项目代码，必须先读取仓库内的 CLAUDE.md 和存在的 AGENTS.md，再按任务需要读取相关模块文档和源码目录旁说明。

如果当前改动属于 React 页面、组件、hook 或前端状态链路，还要检查是否命中项目里的页面拆分、类型放置、文档维护、i18n 和验证要求。

什么时候触发

当用户表达下面这些意思时，优先使用这个 skill：