composition-patterns

Trigger phrases

Phrases that activate this skill when typed to Claude Code:

• refactor this React component
• apply composition patterns
• fix prop drilling

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. 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. Maintained by Vercel Labs.

License: MIT.