What problem does it solve?
Large React components often accumulate boolean props and conditional branches that create exponential state combinations, hard-to-read code, and brittle APIs. This Skill provides a structured approach to replace boolean-mode components with explicit variants, compound components, and provider-based state so UI code becomes predictable, testable, and composable.
Core Features & Use Cases
- Compound Components & Providers: Use shared context and subcomponents so consumers compose UI pieces instead of toggling booleans.
- State Interfaces & Dependency Injection: Define state/actions/meta interfaces so the same UI works with local state, global sync, or server-backed providers.
- Explicit Variants & Composition Patterns: Replace monolithic multi-mode components with clear variant components (ThreadComposer, EditComposer, etc.) for better readability and fewer impossible states.
- React 19 API Guidance: Recommendations for refs and context usage under React 19 (use() instead of useContext(), ref as a regular prop).
- Use Case Example: Refactor a messaging Composer that has isThread, isEditing, and isForwarding booleans into a set of Provider-backed explicit composers to enable reuse and sibling components (previews, action buttons) to access shared state.
Quick Start
Refactor a MessageComposer by introducing a Composer.Provider with a state/actions/meta interface, replace boolean props with explicit variant components, and compose UI using Composer.Frame, Composer.Input, and Composer.Footer.
