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 from vercel-labs/agent-skills
vercel-react-best-practices
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
392.2Kweb-design-guidelines
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
313.5Kvercel-react-native-skills
React Native and Expo best practices for building performant mobile apps. Use
114.9Kdeploy-to-vercel
Deploy applications and websites to Vercel. Use when the user requests deployment actions like "deploy my app", "deploy and give me the link", "push this live", or "create a preview deployment".
48.8Kvercel-react-view-transitions
Guide for implementing smooth, native-feeling animations using React's View Transition API (`<ViewTransition>` component, `addTransitionType`, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create shared element animations, animate enter/exit of components, animate list reorder, implement directional (forward/back) navigation animations, or integrate view transitions in Next.js. Also use when the user mentions view transitions, `startViewTransition`, `ViewTransition`, transition types, or asks about animating between UI states in React without third-party animation libraries.
31.9Kvercel-cli-with-tokens
Deploy and manage projects on Vercel using token-based authentication. Use when working with Vercel CLI using access tokens rather than interactive login — e.g. "deploy to vercel", "set up vercel", "add environment variables to vercel".
31.4K
More in React
shadcn
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
next-best-practices
File conventions, RSC boundaries, data patterns, async APIs, and metadata
vercel-labs/next-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/turborepoai-sdk
Vercel AI SDK: generateText, streamText, tool calling, and useChat
vercel/ai
More in Design & UI
frontend-design
Comprehensive frontend design patterns and visual polish guidance
anthropics/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/skillspolish
Final-pass visual refinement: tighten spacing, sharpen type, clean edges
pbakaus/impeccable