What This Skill Does
React composition patterns that scale — compound components, render props, context providers, and flexible component APIs. Based on Vercel engineering practices, updated for React 19.
When to Use It
- Refactoring components with boolean prop proliferation
- Building flexible, reusable component libraries
- Designing component APIs that scale
- Working with compound components, render props, or context patterns
Key Patterns
Compound Components
Components that work together to form a complete UI unit while allowing flexible composition.Render Props
Sharing behavior between components through function props.Context Providers
Implicit data sharing across component trees without prop drilling.React 19 Updates
New API changes and patterns specific to React 19.Best Practices
- Prefer composition over configuration (multiple simple components > one complex one)
- Use TypeScript for component API contracts
- Keep state management close to where it's used
- Document component APIs with examples, not just types