用途：在阅读或编写 React 组件（含 React 导入的 .tsx、.jsx 文件）时使用。资料建议与 typescript-best-practices 技能一起加载，因为类型优先开发、可辨识联合、Zod 校验等 TypeScript 模式同样适用于 React 代码。
主要能力：围绕“Effect 是逃生舱”这一核心原则，提供判断何时使用 Effect 的决策树。需要响应用户交互时用事件处理器；需要由 props/state 计算值时在渲染期间计算；需要缓存昂贵计算时用 useMemo；需要在 prop 变化时重置状态时用 key prop；需要与外部系统同步时用带清理的 Effect；需要在 Effect 中写非响应式代码时用 useEffectEvent；需要不触发渲染的可变值时用 ref。
Effect 适用与不适用：适用于同步外部系统，如浏览器 API（WebSocket、IntersectionObserver）、非 React 第三方库、window/document 事件监听、非 React DOM 元素（video、地图）。不适用于派生状态、昂贵计算、prop 变化重置状态、响应用户事件、通知父组件状态变化、Effect 链。
Refs 与自定义 Hook：ref 用于不影响渲染的值（定时器 ID、DOM 节点引用），不要在渲染期间读写 ref.current，只在事件处理器和 Effect 中操作；动态列表用 ref 回调而非在循环中使用 useRef；用 useImperativeHandle 限制父组件可访问内容。自定义 Hook 共享逻辑而非状态，每次调用有独立状态实例；只有真正调用其他 Hook 时才命名为 useXxx；避免 useMount、useEffectOnce 等生命周期 Hook，直接用 useEffect 以便 linter 捕获缺失依赖；保持单一具体用例。
组件模式：区分受控与非受控；优先用 children 组合而非 prop 透传；把切换大组件树的布尔 prop（isEditing、isThread、hideAttachments）视为组合坏味道，改用独立组合组件；复杂可复用 UI 优先用带 provider 作用域状态/动作的复合组件；Context 既用于真正全局状态，也用于定义后代消费的局部接口的组件族；UI 变化直接渲染 JSX，避免配置数组式迷你框架，除非配置是真实领域数据；兄弟或外部控件需要同一状态/动作时上移 provider 边界；状态更新后需同步读取 DOM 时用 flushSync。测试方面，不要 vi.mock 子组件并断言其收到的 props，应使用 screen.getByRole 断言真实渲染树。更多代码示例见 react-patterns.md。限制：资料未提供安装命令、收费、平台与效果信息。