关于 vercel-composition-patterns
Vercel Composition Patterns 是由 Vercel 维护的 Agent Skill，介绍用于构建灵活、可维护 React 组件的组合模式。它主张用复合组件、状态提升和内部组合替代大量布尔属性，适合设计组件库或审查组件架构的开发者。
主要功能
- 01避免布尔属性膨胀的组件设计规则
- 02复合组件与共享上下文的结构方式
- 03状态提升与 Provider 解耦的状态管理模式
- 04包含 React 19 API 相关规则（需 React 19 及以上）
适用场景
- 01重构带有大量布尔属性的 React 组件
- 02设计可复用的组件库 API
- 03审查组件架构与上下文提供者的使用方式
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/vercel-composition-patterns确认已加载。
包含的文件
除 SKILL.md 外，安装时一起下载的参考资料和脚本。
AGENTS.mdmetadata.jsonREADME.mdrules/_sections.md_template.mdarchitecture-avoid-boolean-props.mdarchitecture-compound-components.mdpatterns-children-over-render-props.mdpatterns-explicit-variants.mdreact19-no-forwardref.mdstate-context-interface.mdstate-decouple-implementation.mdstate-lift-state.md详细介绍
React 组合模式
用于构建灵活且易于维护的 React 组件的组合模式。通过使用复合组件、提升状态和组合内部实现，避免布尔属性泛滥。这些模式能让人类和 AI Agent 在代码库不断扩展时都更轻松地协作。
适用场景
在以下情况下，请参考这些指南：
- 重构包含许多布尔属性的组件
- 构建可复用的组件库
- 设计灵活的组件 API
- 审查组件架构
- 使用复合组件或上下文提供程序
按优先级划分的规则类别
| 优先级 | 类别 | 影响 | 前缀 |
|---|---|---|---|
| 1 | 组件架构 | HIGH | architecture- |
| 2 | 状态管理 | MEDIUM | state- |
| 3 | 实现模式 | MEDIUM | patterns- |
| 4 | React 19 API | MEDIUM | react19- |
快速参考
1. 组件架构（HIGH）
architecture-avoid-boolean-props- 不要添加布尔属性来自定义行为；应使用组合architecture-compound-components- 使用共享上下文构建复杂组件
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+。 如果使用 React 18 或更早版本，请跳过此部分。
react19-no-forwardref- 不要使用forwardRef；使用use()替代useContext()
使用方法
阅读各规则文件，了解详细说明和代码示例：
rules/architecture-avoid-boolean-props.md
rules/state-context-interface.md
每个规则文件都包含：
- 简要说明规则的重要性
- 附有说明的不当代码示例
- 附有说明的正确代码示例
- 补充背景信息和参考资料
完整汇编文档
如需查看包含所有展开规则的完整指南：AGENTS.md
评论
支持 Markdown