# composition-patterns

> A Claude Code skill from Vercel Labs that teaches React composition techniques — slot patterns, compound components, render props, and children-as-function — to scale UI components and avoid prop proliferation.

**Use case**: Refactor React components from prop-bloat to composition

**Canonical URL**: https://agentcookbooks.com/skills/composition-patterns/

**Topics**: claude-code, skills, react, refactoring, patterns

**Trigger phrases**: "refactor this React component", "apply composition patterns", "fix prop drilling"

**Source**: [Vercel Labs](https://github.com/vercel-labs/agent-skills/tree/main/composition-patterns)

**License**: MIT

---

## What it does

`composition-patterns` is a focused refactoring skill. Most React components start clean and accumulate props until they look like a config form: 18 boolean flags, three render override slots, and a `variant` enum. This skill applies the well-known composition patterns — slot/children, compound components, render props, polymorphic types — to convert that prop-bloat into structurally cleaner code.

The output is the same component, refactored, with a comparison of the old vs new API.

## When to use it

- A component that's grown to 8+ props and the team is afraid to touch it
- Pre-extraction: before you turn an internal component into a shared one, run the skill to clean up the API
- Reviewing a PR that adds yet another prop to an already-bloated component
- Building a component library and you want consistent composition patterns across it

When *not* to reach for it:

- Tiny, single-use components — composition patterns are over-engineering at small scale
- Components with stable, narrow APIs — don't refactor what isn't hurting
- When the underlying problem is architectural (wrong component boundaries), not API-level — composition patterns can't fix that

## Install

From the [Vercel Labs agent-skills repo](https://github.com/vercel-labs/agent-skills). Follow the SKILL.md install path.

## What a session looks like

1. **You point the skill at a component** that has prop-bloat or is hard to extend.
2. **It analyzes the prop surface** and identifies which props are config (variant flags) vs which are slots (render-something-here).
3. **It proposes a refactor** using the composition pattern most appropriate to the component's shape — usually slots + compound children, sometimes render props.
4. **Output is a side-by-side**: old API, new API, and the migration steps for callers.

The discipline: the skill won't push you into a pattern that doesn't fit. If your component is genuinely just a config form, it'll tell you so and decline to refactor.

## Receipts

**Where it works well:**
- Components with slot-shaped props (`renderHeader`, `renderFooter`, `customAction`) cleanly become compound components or `children`-based slots
- Eliminates redundant variant enums when composition gives you the variants for free
- The before/after comparison makes the refactor easy to defend in review

**Where it backfires:**
- The pattern it picks may not match your design system's conventions — sometimes you need to override the suggestion
- For genuinely complex components (data tables, charts), composition can produce more code, not less. Push back when this happens.
- Migration cost on the calling side is real; the skill estimates it but doesn't pay it

**Pattern that works:** use it on components you're about to extract or share. The refactor pays back across multiple call sites; on a single-use component it doesn't.

## Source and attribution

From the [Vercel Labs agent-skills repository](https://github.com/vercel-labs/agent-skills/tree/main/composition-patterns). Maintained by Vercel Labs.

License: MIT.