Vercel Composition Patterns
Vercel's take on keeping React components maintainable as they grow. The main insight is practical: stop adding boolean props to handle variants, use composition and compound components instead. Covers lifting state into providers, building flexible APIs with context, and structuring component libraries that don't turn into prop soup. Also includes React 19 specific guidance like dropping forwardRef. The rules are prioritized by impact, so you can focus on architecture patterns first before diving into implementation details. If you're refactoring a component that's accumulated six boolean flags or building a design system, this gives you patterns that scale better for both humans and AI agents working in the codebase.
- GitHub stars
- 27.8K
- last updated
- Jun 10, 2026
Install
$ npx -y skills add vercel-labs/agent-skills --skill vercel-composition-patterns --agent claude-codeInstalls into .claude/skills of the current project.
Files
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
| Priority | Category | Impact | Prefix |
|---|---|---|---|
| 1 | Component Architecture | HIGH | architecture- |
| 2 | State Management | MEDIUM | state- |
| 3 | Implementation Patterns | MEDIUM | patterns- |
| 4 | React 19 APIs | MEDIUM | react19- |
Quick Reference
1. Component Architecture (HIGH)
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/vercel-labs/agent-skills
- Categories
- AI & Agent Building, Cloud & Infrastructure
- First seen
- Jun 11, 2026
More from vercel-labs/agent-skills
All 14- Vercel React Best Practices
- Vercel React Native Skills
- Vercel React View Transitions
- Vercel React Best Practices885.1K
- Web Design Guidelines843.6K
- Vercel Composition Patterns446.4K
- Vercel React Native Skills271.9K
- Deploy To Vercel187.4K
- Vercel React View Transitions185.5K
- Vercel Cli With Tokens150.4K
- Vercel Optimize126K
- Writing Guidelines122.4K
- Vercel Deploy534
Recommended
More AI & Agent Building
vercel-react-best-practicesvercel-labs/agent-skillsReact and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js c0skills.sh installsvercel-react-native-skillsvercel-labs/agent-skillsVercel's official collection of agent skills0skills.sh installsvercel-react-view-transitionsvercel-labs/agent-skillsGuide for implementing smooth, native-feeling animations using React's View Transition API (`<ViewTransition>` component, `addTransitionType`, and CSS view tran0skills.sh installs
simple-fetchyoloshii/mcp-code-execution-enhancedBasic MCP skill demonstrating CLI-based execution pattern for fetching URL content0skills.sh installs
google-agents-cli-scaffoldgoogle/agents-cliThis skill should be used when the user wants to "create an agent project", "start a new ADK project", "build me a new agent", "add CI/CD to my project", "add d558.7Kskills.sh installs