mcpField
V
vercel-composition-patterns

vercel-composition-patterns

github.com/calesthio开发73.4k1.1k 次安装2 天前更新
代码仓库

关于 vercel-composition-patterns

面向 React 开发者的组件组合模式技能，适用于设计或重构可复用组件。内容侧重复合组件、共享状态 Provider，以及用组合替代布尔属性。

主要功能

  1. 01复合组件架构
  2. 02基于 Provider 的状态管理
  3. 03显式组件变体
  4. 04基于 children 的组合
  5. 05React 19 API 指南

适用场景

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

安装

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

$npx skills add https://github.com/calesthio/openmontage --skill vercel-composition-patterns

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

包含的文件

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

AGENTS.md
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 Composition Patterns

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

扩展参考： 此目录中的 AGENTS.md 是上游指南的长篇版本（由 Vercel 提供）。它是仅适用于此技能的补充参考资料——SKILL.md 是可加载的入口，也是权威内容。它不会覆盖或扩展仓库根目录中的 AGENTS.md / AGENT_GUIDE.md。

适用场景

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

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

按优先级划分的规则类别

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

快速参考

1. 组件架构（高）
  • architecture-avoid-boolean-props - 不要通过添加布尔属性来自定义行为；应使用组合
  • architecture-compound-components - 使用共享上下文构建复杂组件
2. 状态管理（中）
  • state-decouple-implementation - 只有 Provider 知道状态的管理方式
  • state-context-interface - 定义包含 state、actions、meta 的通用接口，以支持依赖注入
  • state-lift-state - 将状态移入 Provider 组件，以便同级组件访问
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

评论

支持 Markdown