vercel-composition-patterns
React composition patterns for scaling components and avoiding boolean prop proliferation.
- Covers four priority categories: component architecture, state management, implementation patterns, and React 19 APIs, each with specific rules and code examples
- Includes 10+ named patterns addressing compound components, context providers, state lifting, and explicit variants
- Designed for refactoring bloated components, building reusable libraries, and reviewing component architecture decisions
- React 19 specific guidance on removing
forwardRefand usinguse()instead ofuseContext()
React Composition Patterns
Composition patterns for building flexible, maintainable React components. Avoid boolean prop proliferation by using compound components, lifting state, and composing internals. These patterns make codebases easier for both humans and AI agents to work with as they scale.
When to Apply
Reference these guidelines when:
- Refactoring components with many boolean props
- Building reusable component libraries
- Designing flexible component APIs
- Reviewing component architecture
- Working with compound components or context providers
Rule Categories by Priority
More in React
vercel-react-best-practices
69 prioritized React performance rules covering waterfalls, bundle size, re-renders, and advanced patterns
vercel-labs/agent-skillsshadcn
shadcn/ui component usage, customization, and Tailwind integration
shadcn/uiwebapp-testing
Testing React apps: unit, integration, and end-to-end patterns
anthropics/skillstypescript-advanced-types
Discriminated unions, conditional types, template literals, and utility type patterns
wshobson/agentstailwind-design-system
Design system implementation with Tailwind: tokens, variants, and component patterns
wshobson/agents
More in Next.js
vercel-react-best-practices
69 prioritized React and Next.js performance rules across 8 categories
vercel-labs/agent-skillsnext-best-practices
File conventions, RSC boundaries, data patterns, async APIs, and metadata
vercel-labs/next-skillsdeploy-to-vercel
Deploy Next.js apps to Vercel with correct config and environment setup
vercel-labs/agent-skillsnext-cache-components
PPR, use cache directive, cacheLife, cacheTag, and revalidateTag
vercel-labs/next-skillsturborepo
Turborepo task pipelines, caching, remote cache, and CI configuration
vercel/turborepo
More in Design & UI
frontend-design
Comprehensive frontend design patterns and visual polish guidance
anthropics/skillsweb-design-guidelines
Vercel's Web Interface Guidelines covering spacing, typography, interaction, and accessibility
vercel-labs/agent-skillsui-ux-pro-max
Advanced UI/UX patterns for complex interfaces and interaction design
nextlevelbuilder/ui-ux-pro-max-skillsleek-design-mobile-apps
Mobile-first design principles for iOS and Android app interfaces
sleekdotdesign/agent-skillscanvas-design
Design generation and iteration in canvas-based environments
anthropics/skills