# Vercel Composition Patterns

> Use when: design composable React component APIs that scale without boolean prop sprawl.

- Skill: `kimtth/vercel-composition-patterns` (Agent Skill)
- Install (CLI): `npx skillmds@latest add kimtth/vercel-composition-patterns`
- Raw SKILL.md: https://api.skillmd.com/api/skills/kimtth/vercel-composition-patterns/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: kimtth (https://skillmd.com/u/kimtth)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/kimtth/vercel-composition-patterns

---


Goal: component APIs that stay flexible as features grow.

Use for:
- components accumulating many boolean and config props
- shared UI that each consumer needs to customize differently
- replacing rigid components with composable ones

Workflow:
1. Identify the variation points consumers actually need.
2. Prefer composition (children, slots) over configuration flags.
3. Use compound components for related, coordinated parts.
4. Share state via context, not prop drilling.
5. Expose render props or slots for true customization.
6. Keep the default usage simple; advanced control opt-in.

Patterns:
- compound components for grouped UI (Tabs, Tabs.List, Tabs.Tab)
- context to coordinate without prop drilling
- render props / slots for caller-controlled rendering
- polymorphic `as` prop where appropriate

Rules:
- favor children over a growing prop list
- do not leak internal structure through booleans
- keep each part single-purpose and replaceable
- common case stays trivial; complexity is opt-in