SuperAPI AI 工具集

vercel-composition-patterns

编程与开发

查看项目

更新于 10-15 20:21

技能介绍

用途:这是一套 React 组合模式规范,用于在重构组件、构建可复用组件库、设计灵活组件 API 或审查组件架构时参考,帮助减少布尔属性泛滥,让代码库更易维护,也更利于人和 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 及以上,React 18 或更早版本应跳过;其中 react19-no-forwardref 建议不要使用 forwardRef,并用 use() 代替 useContext()。

使用方式:逐条阅读各规则文件获取详细说明与代码示例,例如 rules/architecture-avoid-boolean-props.md、rules/state-context-interface.md。每个规则文件包含该规则为何重要的简要说明、带说明的错误代码示例、带说明的正确代码示例,以及补充上下文与参考资料。完整指南见 AGENTS.md。安装命令、平台支持、收费与价格信息暂未提供。