mcpField
V
vercel-composition-patterns

vercel-composition-patterns

github.com/thongdn-it开发5105 次安装41 周前更新
代码仓库

关于 vercel-composition-patterns

vercel-composition-patterns 是面向开发者和编码 Agent 的 React 组件设计指南。它聚焦组合、共享状态和显式变体，帮助保持组件 API 灵活且易于维护。

主要功能

  1. 01避免组件使用过多布尔属性
  2. 02通过共享上下文组织组件
  3. 03将状态与具体实现解耦
  4. 04将状态提升到 Provider 供同级组件访问
  5. 05优先采用显式变体和 children 组合

适用场景

  1. 01重构布尔属性过多的组件
  2. 02设计可复用组件库的 API
  3. 03审查组件架构
  4. 04构建使用上下文的复合组件

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/thongdn-it/react-agent-skills --skill vercel-composition-patterns

安装后在 Claude Code 中输入/vercel-composition-patterns确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

AGENTS.md
rules/
architecture-avoid-boolean-props.md
architecture-compound-components.md
patterns-children-over-render-props.md
patterns-explicit-variants.md
state-context-interface.md
state-decouple-implementation.md
state-lift-state.md

详细介绍

React 组合模式

用于构建灵活、易于维护的 React 组件的组合模式。通过使用复合组件、提升状态和组合内部实现，避免布尔属性泛滥。这些模式让代码库在规模增长时更易于人类和 AI Agent 使用。

适用场景

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

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

按优先级划分的规则类别

优先级类别影响前缀
1组件架构HIGHarchitecture-
2状态管理MEDIUMstate-
3实现模式MEDIUMpatterns-

快速参考

1. 组件架构（HIGH）
  • architecture-avoid-boolean-props - 不要通过添加布尔属性来自定义行为；应使用组合
  • architecture-compound-components - 使用共享上下文构建复杂组件
2. 状态管理（MEDIUM）
  • state-decouple-implementation - 只有 Provider 知道状态如何管理
  • state-context-interface - 定义包含状态、操作和元数据的通用接口，以便进行依赖注入
  • state-lift-state - 将状态移至 Provider 组件中，以便同级组件访问
3. 实现模式（MEDIUM）
  • patterns-explicit-variants - 创建明确的变体组件，而非布尔模式
  • patterns-children-over-render-props - 使用 children 进行组合，而非 renderX 属性

使用方法

阅读各规则文件，了解详细说明和代码示例：

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

每个规则文件都包含：

  • 简要说明其重要性
  • 错误代码示例及说明
  • 正确代码示例及说明
  • 补充背景信息和参考资料

完整汇编文档

如需查看包含所有规则完整内容的指南：AGENTS.md

评论

支持 Markdown