mcpField
V
vercel-composition-patterns

vercel-composition-patterns

github.com/guanyang开发986301 次安装1 天前更新
代码仓库

关于 vercel-composition-patterns

面向 React 开发者的组件设计指南，帮助构建灵活且易维护的组件 API，涵盖组合、状态管理、实现模式和 React 19 API。

主要功能

  1. 01避免布尔属性不断增加
  2. 02提供复合组件指导
  3. 03涵盖状态与上下文模式
  4. 04提供 React 19 API 指导

适用场景

  1. 01重构含大量布尔属性的组件
  2. 02设计可复用组件库
  3. 03审查组件架构

安装

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

$npx skills add https://github.com/guanyang/open-agent-hub --skill vercel-composition-patterns

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

包含的文件

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

AGENTS.md
metadata.json
README.md
rules/
_sections.md
_template.md
architecture-avoid-boolean-props.md
architecture-compound-components.md
patterns-children-over-render-props.md
patterns-explicit-variants.md
react19-no-forwardref.md
state-context-interface.md
state-decouple-implementation.md
state-lift-state.md

详细介绍

React 组合模式

用于构建灵活且易于维护的 React 组件的组合模式。通过使用复合组件、提升状态和组合内部实现，避免布尔属性泛滥。这些模式能让人类和 AI Agent 在代码库不断扩展时都更轻松地协作。

适用场景

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

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

按优先级划分的规则类别

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

快速参考

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