用途
vercel-composition-patterns 是一套关于 React 组件组合模式的指南，用于构建灵活、可维护的 React 组件。它的核心目的是避免布尔属性（boolean props）的泛滥：当组件通过不断增加布尔开关来定制行为时，API 会变得难以理解和扩展。该指南提倡使用复合组件、状态提升以及内部组合来替代这种做法，使代码库在规模增长时对人类开发者和 AI 智能体都更易处理。
适用时机
在以下场景中可参考这些指南：
- 重构带有大量布尔属性的组件
- 构建可复用的组件库
- 设计灵活的组件 API
- 评审组件架构
- 处理复合组件或 context provider
规则分类与优先级
规则按优先级分为四类，每类带有前缀标识：
-
组件架构（Component Architecture，高优先级，前缀 architecture-）
- architecture-avoid-boolean-props：不要通过添加布尔属性来定制行为，应使用组合。
- architecture-compound-components：使用共享 context 来组织复杂组件。
-
状态管理（State Management，中优先级，前缀 state-）
- state-decouple-implementation：Provider 是唯一知道状态如何被管理的地方。
- state-context-interface：定义包含 state、actions、meta 的通用接口，用于依赖注入。
- state-lift-state：将状态移入 provider 组件，以便兄弟组件访问。
-
实现模式（Implementation Patterns，中优先级，前缀 patterns-）
- patterns-explicit-variants：创建显式的变体组件，而不是布尔模式。
- patterns-children-over-render-props：使用 children 进行组合，而不是 renderX 属性。
-
React 19 API（中优先级，前缀 react19-）
- 注意：仅适用于 React 19+。如果使用 React 18 或更早版本，请跳过本节。
- react19-no-forwardref：不要使用 forwardRef；使用 use() 代替 useContext()。
使用方式
首先在项目根目录运行以下命令：
npx -y @pymodel/react-frontend-skills scan --skill vercel-composition-patterns # deprecated APIs → rule IDs
该命令会扫描已废弃的 API 并映射到对应的规则 ID。然后，针对上述每条与任务匹配的规则，以及每个扫描命中项，阅读 rules/<rule-id>.md，了解该规则为何重要，以及错误代码与正确代码的对比。
适用场景
该指南适用于 React 组件设计、组件库开发、组件架构评审以及需要与 AI 智能体协作维护的代码库。
限制
React 19 API 相关规则仅适用于 React 19 及以上版本，使用 React 18 或更早版本时应跳过。关于该技能的收费、价格、平台支持范围等信息，资料中暂未提供。