React Patterns 是一套面向 React 18/19 的惯用模式技能，目标是在编写、修改和评审 React 函数组件、自定义 Hook 或组件树时，提供一致且可执行的最佳实践。它适用于以下场景：编写或修改 React 函数组件与自定义 Hook；评审 JSX/TSX 文件；设计状态结构与组件组合；迁移类组件或旧的 forwardRef/useEffect 密集代码；在局部状态、提升状态、Context 与外部 store 之间做选择；处理 Next.js App Router / RSC 的 Server Components 与 Client Components；使用 React 19 actions 或受控输入实现表单；以及用 TanStack Query、SWR 或 RSC 组织数据获取。
核心原则包括三点：渲染是 props 和 state 的纯函数，派生数据应在渲染期间计算而非存入 state 再用 useEffect 同步；副作用必须放在渲染体外，只出现在事件处理器或 useEffect 中；组件之间用 children、render props 或组件 props 组合，而不使用继承。
Hooks 纪律方面，技能要求 Hook 只能出现在顶层、不能有条件调用；每个订阅、定时器和监听器都要有清理；新状态依赖旧状态时使用函数式更新；默认不做记忆化，只有在 profiler 或依赖链证明有必要时才添加 useMemo/useCallback；只有当同一组 Hook 序列在 2 个以上组件重复出现时才提取自定义 Hook。
状态位置提供了决策树：单个组件使用 useState；父子与少量后代之间提升到最近公共祖先；跨远距离分支且低频读取（主题、认证、语言）使用 React Context；树中高频更新的共享状态使用外部 store（Zustand、Jotai、Redux Toolkit）；来自服务器的状态使用服务端状态库（TanStack Query、SWR、RSC fetch）。技能强调大多数页面不需要 Context 或全局 store，在重复提升变得痛苦之前应避免抽象。
Server/Client 组件部分说明了默认的 Server Component 可以是 async 且不为其自身发送 JS，需要交互时用 "use client" 选择加入客户端组件；Server 到 Client 只能传递可序列化 props 或 children，Client 到 Server 通过 Server Actions 调用；并强调不要在客户端组件文件中导入服务端组件，而应通过 children 组合。
Suspense 与错误边界方面，建议把 Suspense 边界放在靠近数据的位置而不是路由根部，以便渐进式展示内容；错误边界仍是类 API，可用 react-error-boundary 获得更友好的封装；并指出边界只能捕获子组件渲染、生命周期和构造函数中抛出的错误，不能捕获事件处理器或异步代码中的错误。
表单部分推荐 React 19 的 form actions（配合 useActionState），受控输入适用于值驱动其他 UI、每次按键格式化或实时校验的场景；多步表单、动态字段数组或跨字段校验建议使用 React Hook Form、TanStack Form 等库。
数据获取决策矩阵给出：Next.js App Router 的按请求数据用 RSC await fetch()；客户端缓存、变更与失效用 TanStack Query；轻量客户端缓存与重新验证用 SWR；实时订阅使用 SSE、WebSocket 或库的订阅 API；一次性即发即忘在事件处理器中 fetch()。技能明确建议避免用 useEffect + fetch 获取应用数据，因为会带来竞态、无缓存、无重试且没有 Suspense 集成。
组合配方涵盖 children 插槽、具名插槽、通过 Context 共享状态的复合组件、render prop / 函数作为子节点（现代替代方案是返回相同形状的 Hook，通常更简洁）。性能部分说明 React.memo 只在组件频繁重渲染、props 通常相同且渲染可测量地昂贵时才有帮助；建议尽量避免渲染级联，例如把状态往下放、按关注点拆分 Context、外部状态库使用 useSyncExternalStore 以安全支持并发渲染；列表需提供稳定 key（数据库 id 而非数组下标），当可见项超过约 50 且行较复杂时用 @tanstack/react-virtual 或 react-window 虚拟化。
无障碍优先组合要求优先使用语义化 HTML（button、a、nav、main），再考虑 role 属性；所有交互元素均可键盘到达；表单输入必须有 label；路由切换和模态开关时管理焦点；在组件测试中运行 axe。路由方面该技能与路由无关，模式适用于 React Router、TanStack Router、Next.js App Router、Remix Router，路由特定模式遵循各自框架文档。
不在范围内并仅作指引的内容包括 Next.js 专属的数据加载、Route Handlers、中间件、并行路由，React Native（平台差异较大，暂未有单独的 react-native-patterns 技能），以及 Remix 的 loader/action 约定。相关内容还包括 rules/react/ 下的编码风格、Hooks、模式、安全与测试规则，react-performance、frontend-patterns、accessibility、angular-developer 等技能，react-reviewer、react-build-resolver 等智能体，以及 /react-review、/react-build、/react-test 命令。
示例部分给出防抖搜索自定义 Hook（useDebounce 配合 useQuery）和 React 19 useOptimistic 实现乐观 UI，以及拆分 Context 避免渲染级联的做法。关于收费、价格与平台信息，资料中暂未提供。