What problem does it solve?
This Skill helps teams refactor React components that have grown brittle from boolean prop proliferation, hidden modes, and tangled conditional rendering. It replaces one-off configuration flags with explicit, reusable composition patterns that are easier to reason about and maintain.
Core Features & Use Cases
- Compound components: Split complex UI into clear subcomponents that share state through context instead of prop drilling.
- Lifted state providers: Move state management into providers so sibling components, dialogs, and custom controls can access the same actions and data.
- Explicit variants: Build separate components such as thread, edit, and forward variants instead of one overloaded component with many booleans.
- React 19 guidance: Apply modern API patterns such as using ref as a regular prop and use for context access.
- Use case: Ideal for redesigning chat composers, form builders, dashboards, and reusable design-system components that need flexible structure without configuration sprawl.
Quick Start
Ask the assistant to rewrite your React component into explicit compound components with lifted state, shared context, and modern React 19-friendly patterns.
