What problem does it solve?
Many React components become fragile and hard to maintain when feature toggles are implemented as multiple boolean props, producing exponential conditional logic, duplicated implementations, and tightly coupled state. This Skill provides a structured approach to replace boolean-prop-driven conditionals with compound components, provider-based state, and explicit variant components to simplify reasoning, enable reuse, and reduce bugs.
Core Features & Use Cases
- Compound Components: Design components as composable pieces that share a single context to avoid prop drilling.
- Provider-Based State & Dependency Injection: Lift state into providers exposing a generic state/actions/meta interface so different providers can power the same UI.
- Explicit Variants & Children Composition: Replace boolean modes with explicit variant components and prefer composing children over render props for clarity.
- React 19 API Guidance: Migrate ref handling and context use to React 19 patterns (ref as prop, use() instead of useContext()).
- Use Case: Refactor a messaging composer that uses many boolean props into ChannelComposer, ThreadComposer, and EditComposer backed by a shared Composer.Provider so custom UI outside the frame can read or submit state.
Quick Start
Use the vercel-composition-patterns guidance to convert a Composer with many boolean props into explicit variant components that share a provider-based context.
