Composition Patterns

Organize complex React components with composition, Context and lifted state when refining APIs or building a component library.

Engineeringvercel-labs/agent-skillsMITSources checked: 2026-10-21

See installation steps View original Skill

Features

Replace growing boolean prop lists with composition, Context and lifted state.
Restructure component responsibilities and public APIs with guidance on relevant React 19 changes.

When to use it

Useful when a component has too many variants, interactions repeat across pages, or a reusable component library is needed.

Before you start

Designed for React components. Match its advice to your React version and existing APIs.

Usage example

Follow this illustrative workflow, replacing file names and goals with your own project details.

Refactor a shared component with too many variants

What to prepare: A component with several boolean props, its callers and existing tests.
Workflow: Inspect usage, separate responsibilities, propose a composable API, migrate representative callers and verify behavior.
Expected deliverables: An API proposal, refactored code, before-and-after usage and compatibility checks.

Recommended prompts

Replace the bracketed placeholders, then paste into an AI tool with this skill installed. Prompts follow the interface language; copying preserves the full text and line breaks.

Use the vercel-composition-patterns skill to refactor [component path]. Read callers and tests first. Identify coupled boolean props, then propose composition or Context. Preserve observable behavior and prefer compatibility; identify the migration scope before making a breaking API change. Implement the smallest useful change, add meaningful regression checks and show before-and-after usage.

Review the new API from the caller’s perspective: defaults, controlled and uncontrolled state, composition order and accessibility attributes. Find remaining parameter-heavy callers, confirm examples match actual exports and report compatibility checks.

Supported AI tools

Claude CodeTerminal in your project folder
CodexTerminal in your project folder
CursorTerminal in your project folder
Gemini CLITerminal in your project folder
OpenCodeTerminal in your project folder

These tools appear in the Skills CLI support list. Task results depend on the model, project and required runtime.

Installation

Requires Node.js 22.20 or later. The command selects this skill; follow the installer to confirm its location in the project.

Choose an AI tool

Run in: Terminal in your project folder

Install into the selected tool with Skills CLI. The original project also documents other installation methods.

npx skills add vercel-labs/agent-skills --skill vercel-composition-patterns -a claude-code

Restart the tool or open a new session, then mention this skill when describing your task.

Check the official setup guide

Source and license

This guide summarizes the original skill definition, README and setup documentation. Models, accounts and external services are provided by their respective tools.

SKILL.md README License terms