Vl Composition Patterns

---
name: vl-composition-patterns
description:
  React composition patterns that scale — compound components, render props,
  context providers, lifted state, React 19 APIs. EN triggers: "refactor boolean
  props", "compound component", "render prop", "context provider", "component
  architecture", "reusable component library", "flexible component API". FR
  triggers: "patterns de composition React", "refactor props booleens",
  "composant compose", "architecture de composant", "librairie de composants
  reutilisable". Use when refactoring components with boolean prop proliferation,
  building flexible component libraries, or designing reusable component APIs.
license: MIT
metadata:
  author: vercel
  version: '1.0.0'
---

> **Portability:** Self-contained reference skill — rules live in `rules/*.md` and
> `AGENTS.md` beside this file. No VPS / OmegaOS infra required; works in any repo.

## Single-voice craft (do NOT parallelize)

This is one coherent engineering voice — a consistent set of composition conventions
applied across a codebase. Do **not** fan out into parallel agents with competing
opinions: that produces inconsistent APIs (some compound, some boolean-prop), which is
the exact entropy these rules exist to prevent. Apply the rules in a single pass so the
whole component surface speaks the same dialect.

**Craft upgrades (apply when refactoring):**
- **Decide the shape first, then write once.** Before editing, name the target pattern
  for THIS component (explicit variants vs. compound vs. context provider). Don't mix two
  shapes in the same component family.
- **Surgical migration, not rewrite.** Convert one boolean-prop axis at a time, keep the
  old prop as a thin deprecated alias if it's public API, and migrate call sites in the
  same diff so the codebase never sits in two conventions at once.
- **Type the seams.** Make the context interface explicit (`{ state, actions, meta }`)
  and export it, so consumers get one honest API surface instead of guessing.

## Output contract

When applying this skill, the deliverable is refactored/new component code that:
1. Follows the relevant `architecture-` / `state-` / `patterns-` / `react19-` rules.
2. Cites which rule(s) drove each change (e.g. `// architecture-avoid-boolean-props`).
3. Preserves existing public behavior unless the user asked to change the API.

**VERIFY before done:** typecheck/build passes, every prior call site still compiles, and
no boolean-prop axis that a rule forbids remains. Cite the rule file for each change —
no invented rule names; if a pattern isn't in `rules/`, say so rather than fabricate one.

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