SuperAPI AI 工具集

vercel-agent-vercel-composition-patterns

智能体与模型

查看项目

更新于 10-16 05:42

技能介绍

用途:这是一份 React 组合模式指南,用于构建灵活、可维护的 React 组件。核心目标是避免布尔属性(boolean props)泛滥,通过复合组件、状态提升与内部组合让代码在规模扩大时更易被人类和 AI 代理理解和维护。

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

规则按优先级分为四类:组件架构(HIGH,前缀 architecture-)、状态管理(MEDIUM,前缀 state-)、实现模式(MEDIUM,前缀 patterns-)、React 19 API(MEDIUM,前缀 react19-)。

具体规则:architecture-avoid-boolean-props(不靠布尔属性定制行为,改用组合);architecture-compound-components(用共享 context 组织复杂组件);state-decouple-implementation(Provider 是唯一知道状态如何管理的地方);state-context-interface(定义含 state、actions、meta 的通用接口以支持依赖注入);state-lift-state(把状态移入 Provider 组件以供兄弟组件访问);patterns-explicit-variants(用显式变体组件代替布尔模式);patterns-children-over-render-props(用 children 组合,而非 renderX props);react19-no-forwardref(不用 forwardRef,用 use() 代替 useContext();仅限 React 19+,React 18 及更早版本请跳过)。

使用方式:阅读各规则文件获取详细说明与代码示例,如 rules/architecture-avoid-boolean-props.md、rules/state-context-interface.md;每个规则文件包含为何重要、错误代码示例及解释、正确代码示例及解释、补充上下文与参考。完整指南见 AGENTS.md。限制:React 19 API 部分仅适用于 React 19 及以上版本。其余安装、收费与平台信息暂未提供。