React Patterns 是一个可安装的 AI Agent 技能，发布者为 xenitv1/claude-code-maestro，其内容为构建生产级 React 应用的原则集合。技能以表格与对照清单的形式组织，便于在编写或审查 React 代码时作为参考依据。
用途 该技能用于指导 React 应用的架构与代码编写决策，覆盖组件设计、Hook 使用、状态管理、组合方式、性能、错误处理、TypeScript 与测试等主题，并给出应避免的反模式。
主要能力与内容
- 组件设计原则：区分 Server（数据获取、静态）、Client（交互，使用 useState 与副作用）、Presentational（仅通过 props 展示 UI）、Container（承载逻辑与重状态）四类组件；设计规则包括每个组件单一职责、数据向下传递事件向上冒泡、组合优于继承、优先使用小巧聚焦的组件。
- Hook 模式：给出何时抽取自定义 Hook 的判断，如 useLocalStorage、useDebounce、useFetch、useForm；Hook 规则包括只在顶层调用、每次渲染顺序一致、自定义 Hook 以 use 开头、卸载时清理副作用。
- 状态管理选择：按复杂度选择方案——简单场景用 useState/useReducer，共享局部状态用 Context，服务端状态用 React Query 或 SWR，复杂全局状态用 Zustand 或 Redux Toolkit；并按作用范围决定状态放置位置（单组件、父子提升、子树 Context、应用级全局 store）。
- React 19 模式：新增 Hook 的用途包括 useActionState（表单提交状态）、useOptimistic（乐观 UI 更新）、use（在渲染中读取资源）；编译器带来的收益包括自动记忆化、减少手写 useMemo/useCallback、专注于纯组件。
- 组合模式：复合组件由父级提供 context、子级消费 context，实现灵活的插槽式组合，典型示例为 Tabs、Accordion、Dropdown；复用逻辑优先用自定义 Hook，需要渲染灵活性用 Render Props，横切关注点用高阶组件。
- 性能原则：优化前先判断是否真的慢，用 DevTools 分析，定位瓶颈后再做针对性修复；对应信号的处理为渲染慢先分析、大列表做虚拟化、昂贵计算用 useMemo、需要稳定回调用 useCallback。
- 错误处理：Error Boundary 按范围放置——应用级放在根层级，功能级放在路由/功能层级，组件级放在有风险的组件周围；错误恢复包括展示回退 UI、记录错误、提供重试选项、保留用户数据。
- TypeScript 模式：组件 props 用 interface，联合与复杂类型用 type，可复用组件用泛型；常见类型包括 children 用 ReactNode、事件处理器用 MouseEventHandler、ref 用 RefObject。
- 测试原则：按单元（纯函数、Hook）、集成（组件行为）、E2E（用户流程）分层；测试优先级为用户可见行为、边界情况、错误状态、可访问性。
- 反模式对照：避免深层 prop drilling（改用 context）、巨型组件（拆分）、用 useEffect 处理一切（考虑 Server Components）、过早优化（先分析）、用索引作 key（使用稳定唯一 ID）。
使用方式 该技能以可安装技能的形式提供给 AI Agent，安装与调用方式在所提供的资料中暂未提供。资料中未给出具体的安装命令、配置步骤或调用示例。
适用场景 适用于 React 应用的设计与实现阶段，例如决定组件拆分方式、选择状态管理方案、抽取自定义 Hook、规划性能优化与错误处理、编写 TypeScript 类型、制定测试策略，以及在代码审查中识别反模式。
限制 资料以原则和对照表为主，未提供完整的代码示例、具体版本要求、配套工具链或运行环境说明；安装方式与使用步骤暂未提供。