A composer can start with two sensible flags and eventually accumulate options for replies, editing, forwarding, and compact layouts. The difficult part is then understanding which combinations are valid. This skill helps express those scenarios through component composition and clearer state ownership.
Install and invoke
From the project root, use a terminal with Node.js and npm to install this individual skill for Claude Code. For Codex, replace --agent claude-code with --agent codex. This is a project-scoped installation. Refresh or reopen the agent session after installation, then name the skill explicitly in your request.
npx skills@latest add vercel-labs/agent-skills --skill vercel-composition-patterns --agent claude-code
Start with one real consumer
Adapt this first request to your project:
Use vercel-composition-patterns to review src/components/Composer.tsx and its callers. It supports create, reply, and edit modes. Map its boolean flags and valid combinations, propose a behavior-preserving design, and migrate only one mode after approval. This project uses React 18; do not introduce React 19-only APIs.
Ask the agent to find the component's callers before proposing a new API. Record the inputs, actions, submission payload, and permissions that distinguish each mode. Similar flag names do not prove that two modes share the same behavior. Choose one representative consumer for the first migration so the rest of the application can continue using the existing interface.
Separate responsibilities
The official examples compose pieces such as a frame, input, and footer into explicit variants. A reply composer can add its own destination control, while an edit composer can expose cancel and save actions. Shared structure stays reusable without making one parent understand every possible mode.
When sibling components need the same state, a provider can own that state and expose actions through a clear interface. Consumers should not need to know whether the implementation uses local state or another store. However, a small stateless component does not need a context merely to resemble the example architecture.
Request a before-and-after usage example alongside the implementation. The improvement should be visible at the call site: readers should understand which scenario is being rendered without decoding a matrix of flags. Keep the migration bounded and avoid changing unrelated presentation or business rules at the same time.
Check the migration
Useful deliverables include explicit variants, a shared interface, and a list of migrated callers. Run existing behavior tests for submission payloads, disabled states, focus, and cancellation, followed by the project's type and build checks. Types alone cannot establish that interactions stayed the same. If external consumers depend on the old API, retain a temporary adapter or provide a migration list.
Some guidance targets React 19, including changes to ref handling and context access. Apply only rules compatible with the project's installed React version. Component count is not a success metric: a small stable component may need clearer names rather than a provider hierarchy. Use composition to resolve an actual maintenance problem, then stop once the affected scenarios become understandable.
Use a variant matrix to design the API
Before refactoring, list what each real scenario needs. For a composer with new-post, reply and edit modes, note whether each shows a target object, cancel action or save message, and what submission sends. Three booleans such as isReply, isEdit and showCancel imply eight combinations even when the product permits only three. Define valid combinations before creating explicit variants, or the conditionals merely move between files.
When migrating the first caller, retain tests or a temporary adapter for the old API. Compare submission payload, focus order, keyboard behavior and disabled state. A shared Provider should hold state that siblings actually need; a static title or isolated button need not use Context. Check the React version before applying React 19-specific rules rather than upgrading the whole project for a guideline.
When to stop short of a larger rewrite
If there are only two stable pages and no growing matrix of conditions, clearer names and a small extraction may be enough. The Skill offers a way to reason about component APIs; it does not require every component to become a compound component. A useful handoff explains how the new API rules out invalid combinations, which callers remain and how existing behavior was checked.
Check a composition API against real call sites
A component library is a useful place to start with a component accumulating many boolean props. A shadcn registry author used this skill in the component-creation workflow to steer the agent toward clearer compound APIs. List existing call sites and valid combinations, ask for a behavior-preserving API, then read real usage code to see whether the new composition is easier to understand.
If the installed skill never activates
If the agent never invokes it after installation, compare the composition-patterns folder with the declared vercel-composition-patterns name. A user reported that this mismatch left the skill mounted but unresolvable in their runtime. Confirm the name and file path your agent actually recognizes before assessing its effect; seeing the folder alone does not prove activation.