mcpField
V
vercel-composition-patterns

vercel-composition-patterns

github.com/gigs-slc开发366 次安装40 周前更新
代码仓库

关于 vercel-composition-patterns

这是一套面向 React 开发者的组件组合指南，适用于设计可复用组件和组件库。内容涵盖架构、状态管理与实现模式，并提供规则和代码示例。

主要功能

  1. 01避免布尔属性不断膨胀
  2. 02组合组件与共享上下文
  3. 03基于 Provider 管理状态
  4. 04显式变体与 children 组合
  5. 05附代码示例的规则文件

适用场景

  1. 01重构含有大量布尔属性的组件
  2. 02设计可复用的组件 API
  3. 03审查组件架构
  4. 04构建组合组件或上下文 Provider

安装

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

$npx skills add https://github.com/gigs-slc/react-native-skills --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
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