88 lines
2.9 KiB
Markdown
88 lines
2.9 KiB
Markdown
---
|
|
name: composition-patterns
|
|
description: "Use when working with composition-patterns tasks or workflows"
|
|
risk: safe
|
|
source: "https://github.com/vercel-labs/agent-skills"
|
|
date_added: "2026-06-02"
|
|
---
|
|
|
|
# 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 Use
|
|
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`
|
|
|
|
## Limitations
|
|
- Use this skill only when the task clearly matches the scope described above.
|
|
- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
|
|
- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.
|