vercel-composition-patterns

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

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

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

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

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