WEB DEVELOPMENT / Vercel
Vercel React Composition Patterns
Replaces growing boolean-mode APIs with explicit component composition and provider-owned state contracts.
“React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving”
01 / THE REASONING
Why this made the selection.
- Shows complete before-and-after component variants rather than only naming the compound-component pattern.
- Separates a reusable UI from its state implementation through state, actions and metadata interfaces.
02 / THE REVIEW RECORD
What we actually inspected.
Source review has boundaries.
A clear record is more useful than a “safe” badge.
Material inspected
- skills/composition-patterns/SKILL.md
- skills/composition-patterns/rules/architecture-avoid-boolean-props.md
- skills/composition-patterns/rules/state-context-interface.md
- README.md
Our findings
- The inspected composition example makes variant structure explicit instead of centralizing every mode in one parent.
- The context reference shows both local and synchronized state providers for the same UI.
- Provider scope, not visual nesting, determines access to shared state in its examples.
Not established by this review
- Source inspection only; no skill installation or workflow execution was performed.
The review applies to the material and revision named here. A newer upstream release can change its behavior.
03 / PUT IT TO WORK
Add a skill to your workflow.
DOCUMENTED COMMAND
npx skills add https://github.com/vercel-labs/agent-skills/tree/063bee94c3f4df8453406c830b0a7df0f2860278/skills/composition-patternsCopying does not execute this command. It may retrieve a newer version than the reviewed source.
- Install the complete skill directory with its references and helpers; a copied SKILL.md alone may be incomplete.
- Choose the intended agent and project scope in the installer, then review its permissions before using the skill.
Before you start
- Node.js/npm for this installer
- An agent that supports the Agent Skills format
- Component source, project React version and behavioral tests
04 / FOLLOW THE EVIDENCE
The source trail.
Our notes are separate from the original resource.
Check upstream before adopting a new version.
https://github.com/vercel-labs/agent-skills/blob/063bee94c3f4df8453406c830b0a7df0f2860278/skills/composition-patterns/SKILL.md
Supports: summary, upstreamDescription, whySelected, bestFor, limitations, review, compatibility, access
https://github.com/vercel-labs/agent-skills/blob/063bee94c3f4df8453406c830b0a7df0f2860278/skills/composition-patterns/rules/architecture-avoid-boolean-props.md
Supports: review, limitations, access
https://github.com/vercel-labs/agent-skills/blob/063bee94c3f4df8453406c830b0a7df0f2860278/skills/composition-patterns/rules/state-context-interface.md
Supports: review, limitations, access
https://github.com/vercel-labs/agent-skills/blob/063bee94c3f4df8453406c830b0a7df0f2860278/README.md
Supports: license
https://github.com/vercel-labs/agent-skills/blob/063bee94c3f4df8453406c830b0a7df0f2860278/README.md
Supports: install, compatibility, access
https://github.com/vercel-labs/skills/blob/7407f3893ad4dceab546ac002c3ef806e4000c73/README.md
Supports: install
https://github.com/vercel-labs/skills/blob/7407f3893ad4dceab546ac002c3ef806e4000c73/src/git.ts
Supports: install