Vercel Composition Patterns
From Vercel's front-end team, this teaches Claude composition patterns that prevent boolean prop hell. You know the drill: a component starts with isLoading and isError, then grows to hasIcon, showBorder, isCompact, until you're debugging 16 permutations. Instead you get compound components, context providers, and explicit variants. Covers architecture fundamentals plus React 19 specifics like dropping forwardRef for the use hook. The rules are prioritized by impact, so you can skip straight to the architecture section if you're refactoring a mess right now. Honestly just wish more component libraries were built this way from the start.
- skills.sh installs
- 272
- GitHub stars
- 27.5K
- last updated
- Jun 3, 2026
Install
$ npx -y skills add vercel-labs/claude-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/claude-skills
- Category
- Cloud & Infrastructure
- First seen
- Jun 3, 2026
More from vercel-labs/claude-skills
All 4Recommended
More Cloud & Infrastructure
vercelmembranedev/application-skillsVercel integration. Manage Projects, Users, Teams, Secrets. Use when the user wants to interact with Vercel data.258skills.sh installs
aws-strandshoodini/ai-agents-skillsBuild AI agents with the Strands Agents SDK - the open-source framework (the agent "brain") for writing agent logic, tools, and multi-agent systems in Python. M249skills.sh installs