Applies React composition patterns to build flexible, maintainable components. Use this skill when refactoring components that have accumulated too many boolean props, designing a reusable component API from scratch, building compound components (Tabs, Accordion, Select), working with context providers, or reviewing components that are hard to extend. Triggers on: "this component is getting hard to use", "too many props", "how do I make this reusable", "compound component", "component API design", "context pattern".
Applies React composition patterns to build flexible, maintainable components. Use this skill when refactoring components that have accumulated too many boolean props, designing a reusable component API from scratch, building compound components (Tabs, Accordion, Select), working with context providers, or reviewing components that are hard to extend. Triggers on: "this component is getting hard to use", "too many props", "how do I make this reusable", "compound component", "component API design", "context pattern".
Composition Patterns
Boolean props are a tax on the future. Every isLoading, isDisabled, hasIcon, withBorder prop you add makes a component harder to understand and impossible to extend without touching the component itself. Composition inverts this: instead of configuring everything through props, you compose behavior through structure.
These patterns come from Vercel Engineering's production experience with large React codebases.
When to use this skill
A component has grown beyond 5-6 boolean/variant props
You need to share a component across contexts that have different internal layouts
You're reaching for render props to customize internals
A context provider is leaking implementation details into its consumers
You're about to add forwardRef — consider React 19's ref-as-prop first
Workflow
Identify the prop smell — list all boolean/variant props; any prop that controls rendering of a sub-part is a composition candidate
Define the compound structure — which pieces are independently composable?
Extract internal state to context — the parent manages state; children consume it
Define explicit variants with CVA — replace boolean prop combinations with named variants
Verify — the new API should read like prose and require no boolean combinatorics
Component Architecture
Avoid Boolean Props
Replace isDisabled, hasIcon, withBorder boolean prop combinations with explicit named variants using CVA (Class Variance Authority). Boolean props multiply: 3 booleans = 8 possible states.
The parent manages the active state via context. Children read from it. No prop drilling, no render props.
State Management Patterns
Decouple Implementation from Interface
Expose a clean context interface — functions and values the consumer needs — without leaking the internal state shape. Consumers shouldn't need to know how state is managed internally.
Put only what consumers need in context. Putting your entire state object in context means any state change re-renders all consumers, even unrelated ones.
// Split into targeted contexts:constTabsActiveContext = createContext<string>('');
constTabsSetterContext = createContext<(val: string) =>void>(() => {});
// Components that only read value don't re-render when setter changes
Lift State to the Right Level
State belongs at the lowest common ancestor of the components that need it — no higher. State lifted too high causes unnecessary re-renders across the tree.
Implementation Patterns
Explicit Variants with CVA
Use cva() from class-variance-authority to define component variants with compile-time type safety. The VariantProps helper ensures consumers can only use defined variant combinations.
