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.
Use an existing control and its callers to frame a composition review. The request can focus on boolean props, state ownership, and real layout needs, with migration suggestions checked against the behaviors the current component must preserve.
Include existing props, callers, and the behaviors that must remain.
Copy the request into a new Floatboat conversation and provide the required material.
Download FloatboatPreview and copy the request. It is not sent automatically from this page.
Reference: Vercel Composition Patterns https://github.com/vercel-labs/agent-skills/blob/main/skills/composition-patterns/SKILL.md Read the original documentation and check the current environment and dependencies. Propose any new installation or tool connection before proceeding. My task: Refactor this Modal with six boolean props into an API that supports confirm and edit flows without surprising combinations. Expected deliverable: A proposed component API, migration examples, and checks for the existing behaviors.
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.
Boolean-heavy controls, sibling state, and flexible component libraries create different API problems. Compare how Vercel Composition Patterns uses named compositions, provider boundaries, and explicit variants while preserving the behavior existing callers rely on.
A dialog with many boolean modes can hide behavior behind combinations of props. Inspect its confirm/edit callers and the modes that must remain, then replace ambiguous combinations with named compositions visible at the call site. Provide migration examples and check existing modes against the new API before removing the old one.
Sibling controls that share state and events may be burdened by long prop chains. Trace the existing paths and place the relevant state and actions behind a provider boundary when appropriate. Update the callers around that explicit API so shared behavior stays clear without threading data through every intermediate component.
A component library should expose the flexibility its real consumers need without requiring them to reimplement internal logic. Compare layout requirements with compound parts and explicit variants, then define a bounded composition API. Include correct and incorrect examples so consumers can distinguish supported assembly from accidental misuse.
A composition recommendation may depend on React APIs that differ from those used by the project. Establish the current React and framework versions before adopting version-specific guidance, then compare the affected callers and supported interfaces. Keep compatible patterns separate from proposals that require an upgrade, and validate behavior before widening the migration.
Composition changes should be tested against the callers that depend on the current API. Inspect ambiguous props and state ownership, then migrate representative uses before expanding the change. Existing interactions provide the evidence for whether the new interface preserves behavior.
Share the component and representative uses. Identify unclear combinations and the variations your callers actually need.
Ask the agent to propose compound parts, explicit variants, or a provider for shared state. Check React-version requirements before choosing APIs.
Move common and edge cases to the proposed interface. Verify interactions and keep remaining callers working during migration.
Read another Skill guide and check its original source before using it.
