A dialog has too many boolean modes
Replace combinations like compact, confirm, destructive, and showFooter with named compositions where behavior is visible at the call site.
Vercel Composition Patterns by Vercel Labs
Use Vercel Composition Patterns by Vercel Labs to design clearer React component APIs. Review components with growing boolean props, coordinate shared state through providers, and introduce compound components or explicit variants that fit the way your application and component library are actually used.
Install and get started
Choose your agent to see how to get started. In Floatboat, copy a request that asks the agent to read the original instructions. Other options show the Skill installation command or the publisher’s native setup steps.
Choose an agent
Start in Floatboat
Copy the request into a Floatboat conversation
Read the original Vercel Composition Patterns instructions at https://github.com/vercel-labs/agent-skills/blob/main/skills/composition-patterns/SKILL.md. Explain its purpose, required tools, and installation options, then help me use it.Let the agent read the original instructions and check how to use them in your environment.
Download Floatboat ↗Try this request
Refactor this Modal with six boolean props into an API that supports confirm and edit flows without surprising combinations.
About Vercel Composition Patterns
Vercel Composition Patterns is an Agent Skill for designing and refactoring reusable React components. It focuses on component APIs whose behavior has become difficult to understand as props and modes accumulate. The guidance covers compound components, provider-owned state, explicit variants, and composition through children. An agent can use these patterns to inspect existing callers, separate shared behavior from presentation, and propose a clearer interface. The source also includes React 19-specific API guidance, which needs to be checked against the project’s version. Use the Skill around a component with real call sites, and validate those uses as the API changes.
Use Cases for React Composition Patterns
Explore component design tasks where existing props and state relationships make changes difficult. Use the Skill to review complex dialogs, related controls sharing state, or a reusable library whose consumers need flexible layouts without depending on internal implementation details.
Sibling controls need the same state
Place the state and actions in a provider rather than threading them through every intermediate component.
Consumers need controlled flexibility
Expose compound parts or explicit variants so consumers can assemble layouts without reimplementing internals.
How to Design React Component APIs
Review the component together with representative call sites, then ask the agent to identify confusing prop combinations and state ownership. Choose an appropriate composition pattern, migrate a small set of uses, and verify behavior before expanding the new API.
- 01
Inspect components and callers
Share the component and representative uses. Identify unclear combinations and the variations your callers actually need.
- 02
Design the composition
Ask the agent to propose compound parts, explicit variants, or a provider for shared state. Check React-version requirements before choosing APIs.
- 03
Migrate and verify callers
Move common and edge cases to the proposed interface. Verify interactions and keep remaining callers working during migration.
Explore More Agent Skills
Read another Skill guide and check its original source before using it.
Vercel Composition Patterns FAQ
What are compound components?
They expose related parts under a shared component API, often with context to coordinate state, so callers can assemble the structure they need.
Should every boolean prop be removed?
No. The concern is proliferating behavior modes and unclear combinations. A simple flag can remain if it keeps the API clear.
Will this Skill improve runtime performance?
Its main goal is maintainable component architecture. Measure separately if performance is the reason for the refactor.
Can React 18 projects use it?
Yes for the general patterns; the source explicitly separates React 19-only guidance, which should not be applied to older versions.
How can an existing component be migrated gradually?
Choose one confusing combination of props and give it a clear composed alternative. Keep existing callers working while you validate the new API, rather than redesigning the whole component library at once.
When is shared context unnecessary?
If a value is used by only one direct child, an ordinary prop may be clearer. Provider-owned state helps when several related components genuinely need a shared contract, not simply because composition is available.
Which files should I include in a component API review?
Include the component, its state provider if present, and several real callers. Add the React version and the combinations that are difficult to maintain, so the agent can propose an API that supports actual use.