SuperAPI AI 工具集

vercel-composition-patterns

编程与开发

查看项目

更新于 10-16 01:27

技能介绍

用途:为构建灵活、可维护的 React 组件提供组合模式指南,重点解决布尔属性(boolean props)泛滥问题,通过复合组件、状态提升与内部组合来组织代码,使代码库在规模化时更易被人类与 AI 代理理解和维护。

适用时机:重构拥有大量布尔属性的组件;构建可复用组件库;设计灵活的组件 API;评审组件架构;使用复合组件或 context provider 时参考。

规则分类按优先级:一、组件架构(HIGH,前缀 architecture-),包括 architecture-avoid-boolean-props(不要用布尔属性定制行为,改用组合)与 architecture-compound-components(用共享 context 组织复杂组件)。二、状态管理(MEDIUM,前缀 state-),包括 state-decouple-implementation(Provider 是唯一管理状态的地方)、state-context-interface(用 state、actions、meta 定义通用接口以便依赖注入)、state-lift-state(把状态移入 provider 组件供兄弟节点访问)。三、实现模式(MEDIUM,前缀 patterns-),包括 patterns-explicit-variants(用显式变体组件代替布尔模式)与 patterns-children-over-render-props(用 children 组合代替 renderX 属性)。四、React 19 API(MEDIUM,前缀 react19-),仅限 React 19 及以上,18 及更早版本跳过,包括 react19-no-forwardref(不要用 forwardRef,用 use() 代替 useContext())。

使用方式:逐条阅读规则文件获取详细说明与代码示例,例如 rules/architecture-avoid-boolean-props.md、rules/state-context-interface.md;每个规则文件包含重要性简述、错误代码示例及说明、正确代码示例及说明、补充上下文与参考。完整指南见 AGENTS.md。

限制:React 19 相关规则仅适用于 React 19 及以上版本;资料未提供安装命令、收费信息或具体平台信息。