Composition Patterns

React composition patterns that scale — guidance for when you're dealing with extensive boolean props, building component libraries, or redesigning component architecture.

Priority Framework

Rules are organized into four tiers:

HIGH — Component Architecture

Eliminate boolean prop proliferation through composition techniques. Replace <Button isLoading isPrimary isLarge> patterns with properly composed variants and compound components.

MEDIUM — State Management

Decouple state by lifting it into provider components. Define generic interfaces with state, actions, meta for dependency injection patterns.

MEDIUM — Implementation Patterns

Prefer explicit variants over boolean modifiers. Use children-based composition rather than render props where possible. Reach for compound components when a set of related UI pieces need to share context without prop drilling.

MEDIUM — React 19 APIs

Use use() instead of useContext() in React 19+. Exclude forwardRef usage where ref can be passed as a prop directly.

Key Rules Highlighted

• Compound components instead of boolean customization
• Generic interfaces with state, actions, meta for dependency injection
• Children composition preferred over render props
• use() hook for context consumption in React 19+

Documentation Structure

Each rule includes incorrect and correct code examples with explanations. The complete expanded guide is available in AGENTS.md in the repository.

Installation

npx skills add https://github.com/vercel-labs/agent-skills --skill composition-patterns

Mirrored from https://github.com/vercel-labs/agent-skills — original author: vercel-labs, license: MIT. This is an unclaimed mirror. Content and ownership transfer to the author when they claim this account.