— Skill

Vercel Composition Patterns

`isFoo` / `showBar` / `variantX` props multiply until nobody can extend the component — this skill pushes compound components, lifted state, and React 19-aware composition instead.

What changes

Loads Vercel’s composition-patterns skill so agents refactor boolean-prop proliferation into compound components, context providers, explicit variants, and React 19 API patterns.

When

Use Vercel’s composition-patterns skill when the job is React component architecture — boolean prop proliferation, compound components, context providers, flexible library APIs, or React 19 composition updates.

Good fits:

• Refactoring a Button with twelve booleans into compound / variant components.
• Designing reusable library APIs that agents and humans can extend.
• Reviews that should flag render-prop soup and push children composition.

This is not a performance card (vercel-react-best-practices), a11y guidelines (vercel-web-design-guidelines), or landing taste (frontend-design-taste).

Skip it for pure CSS restyles, non-React stacks, or “make it faster” asks.

How to start

Install with `npx skills add vercel-labs/agent-skills` (composition-patterns is in the pack). Ask to refactor or design components with composition-first rules; link AGENTS.md / rule files instead of pasting wholesale.

Use the Vercel composition-patterns skill on [paths / components].
Order work: architecture (avoid boolean props, compound components) → state (providers, lift state)
→ implementation patterns (explicit variants, children over render props) → React 19 APIs if we are on 19+.
For each change: what’s wrong, composition fix, why it scales. No perf essay. No taste/purple UI review.