What problem does it solve?
Many React components become hard to maintain when behavior is controlled by many boolean props, leading to exponential state combinations, fragile conditionals, and duplicated logic. This Skill provides a structured approach to replace boolean-driven configuration with explicit, composable variants and provider-backed state so components stay predictable and reusable.
Core Features & Use Cases
- Compound Components: Design components as composable pieces that share a generic context, enabling consumers to assemble only what they need.
- Provider-based State: Lift state into providers with a clear interface of state, actions, and meta so UI parts remain implementation-agnostic and reusable.
- Explicit Variants & Composition: Create named variant components (e.g., ThreadComposer, EditComposer) and prefer children composition over render props for clarity and flexibility.
- React 19 API Guidance: Recommendations for React 19 patterns, including using use() for context and treating ref as a regular prop when appropriate.
- Use Case: Refactor a Composer component that uses multiple boolean flags into explicit provider-backed variants and produce before/after examples for code review.
Quick Start
Use the vercel-composition-patterns skill to refactor a component that relies on boolean props into compound components with a provider-based state interface and provide concise before-and-after examples.
