用途：在阅读或编写 React 组件（含 React 导入的 .tsx、.jsx 文件）时使用，提供组件逻辑组织的判断规则。资料建议与 typescript-best-practices 技能一并加载，因为类型优先开发、可辨识联合、Zod 校验等模式同样适用于 React 代码。
主要能力与决策树：核心原则是“Effect 是逃生舱”，用于与外部系统同步，多数组件逻辑不应使用 Effect；写 Effect 前先问能否不用。判断路径包括：响应用户交互用事件处理器；从 props/state 计算值在渲染期完成；缓存昂贵计算用 useMemo；props 变化时重置状态用 key；与外部系统同步才用带清理的 Effect；Effect 中需要非响应式代码用 useEffectEvent；不触发渲染的可变值用 ref。
Effect 适用与不适用：适合同步浏览器 API（WebSocket、IntersectionObserver）、非 React 第三方库、window/document 事件监听、非 React DOM 元素（video、地图）。不应用于派生状态、昂贵计算、prop 变化重置状态、响应用户事件、通知父级状态变化、链式 Effect。
Refs 与自定义 Hook：ref 用于不影响渲染的值（定时器 ID、DOM 引用），不在渲染期读写 ref.current，动态列表用 ref 回调，useImperativeHandle 限制父级访问。自定义 Hook 共享逻辑而非状态，仅真正调用其他 Hook 时才命名 useXxx，避免 useMount、useEffectOnce 等生命周期 Hook，保持单一用途。
组件模式：区分受控与非受控；优先用 children 组合而非逐层传 props；警惕用布尔 props 切换大块组件树；复杂可复用 UI 优先用带 provider 作用域状态的复合组件；Context 可用于作用域组件族；直接写 JSX 表达 UI 变化；需要同步读取 DOM 时用 flushSync。
限制：资料未提供安装命令、版本要求、示例代码细节与许可信息，暂未提供。更多代码示例见 react-patterns.md。