用途：重构前端中高复杂度的 React 组件，当用户提出代码拆分、Hook 提取或降低复杂度需求时使用。
主要能力与模式：
- 提取自定义 Hook：组件存在复杂状态管理、多个 useState/useEffect 或业务逻辑与 UI 混杂时，将状态逻辑抽到 hooks/ 子目录或组件旁的 use-<feature>.ts。
- 拆分子组件：单个组件包含多个 UI 区块、条件渲染块或重复模式时，拆分为 index.tsx（仅编排）、app-header.tsx、app-operations.tsx、app-modals.tsx 等聚焦组件。
- 简化条件逻辑：嵌套超过 3 层、复杂三元或多重 if/else 时，改用查找表加提前返回。
- 抽离 API/数据逻辑：组件直接处理 API 调用、数据转换或复杂异步操作时，抽到数据 Hook，示例使用 @tanstack/react-query 的 useQuery，并建议定义 NAME_SPACE 组织 query key、用 enabled 条件请求、用 select 转换数据、导出 useInvalidXxx 失效 Hook。
- 提取弹窗管理：组件管理多个弹窗开关状态时，用单一 activeModal 状态与 openModal/closeModal/isOpen 封装。
使用方式：按上述模式识别组件问题并重构，保持原有目录结构、命名约定与导出方式以兼容现有代码。
适用场景：React 前端组件复杂度治理、代码拆分与可维护性提升。
限制与注意：避免过度工程（不要拆出过多微小 Hook）、避免破坏既有模式、避免过早抽象（仅在有明确复杂度收益时提取，不为一次性代码建抽象，重构代码保持在同领域内）。相关技能：frontend-testing，用于测试重构后的组件。具体安装命令与收费信息暂未提供。