mcpField
V
vercel-composition-patterns

vercel-composition-patterns

github.com/kimny1143开发66 次安装
代码仓库

关于 vercel-composition-patterns

面向 React 组件设计与重构的模式指南技能，适合组件库开发者和代码审查者参考。它强调组合、共享状态与明确变体，以构建灵活且易维护的组件 API。

主要功能

  1. 01避免用布尔属性扩展组件行为
  2. 02介绍复合组件与共享上下文
  3. 03提供状态提升和解耦建议
  4. 04使用显式变体与 children 组合
  5. 05包含 React 19 专属建议

适用场景

  1. 01重构布尔属性过多的组件
  2. 02设计可复用组件库 API
  3. 03评审组件架构与状态管理

安装

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

$npx skills add https://github.com/kimny1143/claude-code-template --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
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