🚀 快速安装

复制以下命令并运行，立即安装此 Skill：

npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-composition-patterns

💡 提示：需要 Node.js 和 NPM

React 组合模式

用于构建灵活、可维护的 React 组件的组合模式。通过使用复合组件、状态提升和组合内部结构，避免布尔属性泛滥。这些模式使得代码库在扩展时，对人和 AI 代理都更易于处理。

何时应用

在以下情况参考这些指南：

  • 重构具有许多布尔属性的组件时
  • 构建可复用的组件库时
  • 设计灵活的组件 API 时
  • 审查组件架构时
  • 处理复合组件或上下文提供者时

按优先级分类的规则类别

优先级 类别 影响 前缀
1 组件架构 高 architecture-
2 状态管理 中 state-
3 实现模式 中 patterns-
4 React 19 API 中 react19-

快速参考

1. 组件架构 (高)

  • architecture-avoid-boolean-props – 不要添加布尔属性来自定义行为；使用组合方式
  • architecture-compound-components – 使用共享上下文构建复杂组件

2. 状态管理 (中)

  • state-decouple-implementation – 提供者是唯一知道状态如何管理的地方
  • state-context-interface – 定义包含状态、操作、元数据的通用接口，用于依赖注入
  • state-lift-state – 将状态移至提供者组件中，以便兄弟组件访问

3. 实现模式 (中)

  • patterns-explicit-variants – 创建明确的变体组件，而不是使用布尔模式
  • patterns-children-over-render-props – 使用 children 进行组合，而不是 renderX 属性

4. React 19 API (中)

⚠️ 仅适用于 React 19+。 如果使用 React 18 或更早版本，请跳过此部分。

  • react19-no-forwardref – 不要使用 forwardRef；使用 use() 替代 useContext()

如何使用

阅读各个规则文件以获取详细解释和代码示例：

rules/architecture-avoid-boolean-props.md
rules/state-context-interface.md

每个规则文件包含：

  • 为何重要的简要说明
  • 带有解释的错误代码示例
  • 带有解释的正确代码示例
  • 额外的上下文和参考

完整汇编文档

包含所有展开规则的完整指南：AGENTS.md

📄 原始文档

完整文档（英文）：

https://skills.sh/vercel-labs/agent-skills/vercel-composition-patterns

💡 提示：点击上方链接查看 skills.sh 原始英文文档，方便对照翻译。

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。