mcpField
V
vercel-composition-patterns

vercel-composition-patterns

github.com/pymodel开发40453 次安装5 周前更新
代码仓库

关于 vercel-composition-patterns

面向 React 开发者的组件组合指南，适用于构建可复用组件和组件库。内容涵盖组件结构、状态管理及 React 19 API，并提供扫描命令以识别已弃用 API。

主要功能

  1. 01避免布尔属性过多
  2. 02使用复合组件和共享上下文
  3. 03通过 Provider 解耦状态管理
  4. 04优先采用 children 组合
  5. 05React 19 API 指引
  6. 06扫描已弃用 API

适用场景

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

安装

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

$npx skills add https://github.com/pymodel/react-frontend-skills --skill vercel-composition-patterns

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

包含的文件

除 SKILL.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组件架构高architecture-
2状态管理中state-
3实现模式中patterns-
4React 19 API中react19-

快速参考

1. 组件架构（高）
  • architecture-avoid-boolean-props - 不要通过添加布尔属性来自定义行为；应使用组合
  • architecture-compound-components - 使用共享上下文组织复杂组件
2. 状态管理（中）
  • state-decouple-implementation - 只有提供程序知道状态是如何管理的
  • state-context-interface - 定义包含状态、操作和元数据的通用接口，以实现依赖注入
  • state-lift-state - 将状态移入提供程序组件，以便同级组件能够访问
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()

使用方法

首先在项目根目录运行：

npx -y @pymodel/react-frontend-skills scan --skill vercel-composition-patterns  # deprecated APIs → rule IDs

对于上面与任务匹配的每条规则，以及每个 scan 命中项，阅读 rules/<rule-id>.md，了解其重要性以及错误与正确代码的对比。

评论

支持 Markdown