用途：该技能面向 React 组件、页面组件与自定义 Hook 的拆分、重构和评审，重点处理职责混杂、props 过宽、大状态下传、分支过多、页面编排过重、展示与逻辑耦合等问题。
适用场景：用户提出“拆组件”“拆 Hook”“组件太大”“Hook 太重”“帮忙理页面”“重构 React 组件”“重构页面逻辑”“优化组件设计”“评审组件/Hook 设计”“减少 props”“收敛职责”“拆分 God Component / God Hook”等需求时使用。不适用于与 React 组件、Hook、页面编排无关的任务，纯后端或非前端任务，以及与职责边界、状态流转、props 设计无关的简单样式修改。
主要能力：先识别任务类型（评审、重构、实现新功能、梳理分层），再定位核心单位（页面组件、业务组件、展示组件、自定义 Hook、工具函数）；判断变化原因是否单一，检查 props、状态、副作用、路由、缓存、弹窗、埋点是否被错误耦合；优先通过拆分边界解决复杂度，而非机械压行数。评审时按“职责边界→props 设计→复杂度→分支扩展”检查，包括是否只导出一个主组件或主 Hook、是否下发页面级大 state 或整包 actions、是否耦合多类关注点、是否存在超过 3 个模式分支、是否有应提取为 Hook 或 lib/utils 的逻辑。
使用方式：需要判断是否拆分时读取 references/react-component-hook-rules.md；重构时优先从页面组件拿掉业务状态与副作用，把状态流转抽成业务 Hook，把重 JSX 拆成最小展示组件，把纯数据转换、校验、映射提到 lib/ 或 utils/，并收缩 props。实现前判断属于编排层还是展示层、状态逻辑是否应进 Hook、逻辑脱离 React 生命周期后是否仍成立。要求代码注释使用中文，函数与 Hook 定义前补充功能注释，说明职责、边界与意图。输出评审先给问题再给建议，重构明确列出新边界，实现时不得重新引入大对象 props 或万能 Hook。
限制：允许合理例外但须说明理由，如职责稳定的略长纯展示组件、仅服务当前主组件的少量同文件辅助子组件、业务逻辑已拆出的稍长页面入口。无法给出明确理由时默认按规范收紧边界。