用途:为 React 组件提供可扩展的组合(composition)模式,避免布尔属性泛滥,通过复合组件、状态提升与内部组合构建灵活可维护的组件 API。适用于重构带大量布尔属性的组件、构建可复用组件库、设计灵活的组件 API、审查组件架构,以及处理复合组件或 context provider。
范围:覆盖可复用组件 API、复合组件、显式变体、React 19 的 ref 与 use() 变更。不覆盖视觉方向(frontend-design-v1)以及 Next.js 缓存或 RSC 数据获取(next-v16、vercel-react-v1)。假设使用 React 19+,React 18 可跳过 React 19 规则段;服务端/客户端边界已存在,组合不得把服务端数据移入仅客户端 provider。
原则:复用组件优先组合而非布尔配置;仅当兄弟组件需要时才提升客户端 UI 状态;服务端数据保留在服务端;在第二次调用点之后再抽取共享原语,不为一次性路由 UI 抽取。
规则分类:1)组件架构(HIGH):architecture-avoid-boolean-props 不用布尔属性定制行为,architecture-compound-components 用共享 context 组织复杂组件;2)状态管理(MEDIUM):state-decouple-implementation(provider 是唯一知道状态如何管理的地方)、state-context-interface(用 state、actions、meta 定义通用接口以便依赖注入)、state-lift-state(把状态移入 provider 供兄弟访问);3)实现模式(MEDIUM):patterns-explicit-variants 用显式变体组件替代布尔模式,patterns-children-over-render-props 用 children 而非 renderX 属性;4)React 19 API(MEDIUM,仅 React 19+):react19-no-forwardref,新组件不用 forwardRef,use() 可选择性读取 context,useContext() 仍受支持。
约束:复合组件仅用于共享 UI 包或 2 个以上调用点,不用于单一路由叶子;React Server Components 自行获取数据,把服务端渲染的 children 传入客户端叶子,而非把数据提升到客户端 provider;URL 可分享状态、异步服务端状态、分组本地 UI 状态继续使用项目已有库(如 query-string 解析器、TanStack Query、分组状态 hook),不要用通用 context DI 层替代;无必要时省略 forwardRef;复用 API 上用显式变体组件而非 isX 布尔模式;优先 children 而非 renderX;避免围绕一次性屏幕的过早抽象、仅用于转发 RSC 获取属性的客户端 provider、为“组合一切”而破坏现有 'use client' 位置。
用法:阅读各规则文件(如 rules/architecture-avoid-boolean-props.md、rules/state-context-interface.md),每个文件包含原因、错误与正确示例及额外上下文;完整编译指南见 references/compiled.md(不要命名为 AGENTS.md,Cursor 会始终加载该文件名)。
相关交互:App Router/RSC 见 next-v16,React 性能见 vercel-react-v1,shadcn 原语见 shadcn-v3,URL 状态见 nuqs-v2,客户端异步见 tanstack-query-v5,分组本地状态见 ahooks-v3。