⚠️

重要前提

安装AI Skills的关键前提是：必须科学上网，且开启TUN模式，这一点至关重要，直接决定安装能否顺利完成，在此郑重提醒三遍：科学上网，科学上网，科学上网。查看完整安装教程 →

React 组合模式最佳实践：构建灵活可维护组件，避免布尔属性泛滥

vercel-composition-patterns by kimny1143/claude-code-template

57 周安装量

GitHub

安装命令

npx skills add https://github.com/kimny1143/claude-code-template --skill vercel-composition-patterns

React 代码规范前端架构

🇨🇳中文介绍

React 组合模式

用于构建灵活、可维护 React 组件的组合模式。通过使用复合组件、状态提升和内部组合，避免布尔属性泛滥。这些模式使得代码库在扩展时，无论是人类开发者还是 AI 代理都更容易协作。

何时应用

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

重构具有多个布尔属性的组件时
构建可复用的组件库时
设计灵活的组件 API 时
评审组件架构时
使用复合组件或上下文提供者时

按优先级划分的规则类别

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

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

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()

阅读单个规则文件以获取详细解释和代码示例：

rules/architecture-avoid-boolean-props.md
rules/state-context-interface.md

每个规则文件包含：

简要说明其重要性
错误的代码示例及解释
正确的代码示例及解释
额外的上下文和参考资料

获取包含所有规则详解的完整指南：AGENTS.md

🇺🇸English

React Composition Patterns

Composition patterns for building flexible, maintainable React components. Avoid boolean prop proliferation by using compound components, lifting state, and composing internals. These patterns make codebases easier for both humans and AI agents to work with as they scale.

When to Apply

Reference these guidelines when:

Refactoring components with many boolean props
Building reusable component libraries
Designing flexible component APIs
Reviewing component architecture
Working with compound components or context providers

Rule Categories by Priority

Priority	Category	Impact	Prefix
1	Component Architecture	HIGH	`architecture-`
2	State Management	MEDIUM	`state-`
3	Implementation Patterns	MEDIUM	`patterns-`
4	React 19 APIs	MEDIUM	`react19-`

Quick Reference

1. Component Architecture (HIGH)

architecture-avoid-boolean-props - Don't add boolean props to customize behavior; use composition
architecture-compound-components - Structure complex components with shared context

2. State Management (MEDIUM)

state-decouple-implementation - Provider is the only place that knows how state is managed
state-context-interface - Define generic interface with state, actions, meta for dependency injection
state-lift-state - Move state into provider components for sibling access

3. Implementation Patterns (MEDIUM)

patterns-explicit-variants - Create explicit variant components instead of boolean modes
patterns-children-over-render-props - Use children for composition instead of renderX props

4. React 19 APIs (MEDIUM)

⚠️ React 19+ only. Skip this section if using React 18 or earlier.

react19-no-forwardref - Don't use forwardRef; use use() instead of useContext()

How to Use

Read individual rule files for detailed explanations and code examples:

rules/architecture-avoid-boolean-props.md
rules/state-context-interface.md

Each rule file contains:

Brief explanation of why it matters
Incorrect code example with explanation
Correct code example with explanation
Additional context and references

Full Compiled Document

For the complete guide with all rules expanded: AGENTS.md

Weekly Installs

Repository

kimny1143/claud…template

First Seen

Feb 9, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

claude-code52

gemini-cli24

github-copilot23

codex23

opencode23

cursor22

前端设计系统技能：生产级UI设计、设计令牌与可访问性指南

8,500 周安装