vercel-composition-patterns
Refactor React Components With Composition
Large React components often become brittle when boolean props control many modes. This skill guides Claude, Codex, and Claude Code toward compound components and provider-based state.
Install with my Agent
Copy this request to your Agent. It includes the canonical Skill page and manifest.
Review the Skillstore skill "vercel-composition-patterns" from https://skillstore.io/skills/vercel-labs-vercel-composition-patterns.md and its manifest at https://skillstore.io/api/skills/vercel-labs-vercel-composition-patterns/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.Your Agent should still show its plan and request any confirmation required by the security policy.
Agent-readable resources
Use these links when an AI agent, crawler, or script needs clean context instead of reading the full page.
Test it
Using "vercel-composition-patterns". A Composer component uses isThread, isEditing, and isForwarding props to switch fields and actions.
Expected outcome:
- Recommend separate ThreadComposer, EditComposer, and ForwardComposer variants.
- Move shared input and footer pieces into compound subcomponents.
- Use a provider so actions can be reused by controls outside the frame.
Using "vercel-composition-patterns". A message dialog needs the composer input value, a preview, and a submit button in different visual areas.
Expected outcome:
- Lift composer state into a provider around the dialog.
- Let the input, preview, and submit button read the same context contract.
- Keep visual layout separate from state ownership.
Using "vercel-composition-patterns". A component accepts renderHeader and renderFooter props for fixed layout customization.
Expected outcome:
- Prefer children and named compound pieces when the structure is static.
- Reserve render props for cases that must pass item data back to callers.
Security Audit
SafeThe static findings are false positives caused by documentation prose, Markdown code formatting, and React reference URLs. I found no executable code, command execution, data exfiltration, prompt injection, or runtime network behavior in the reviewed files.
Risk Factors
🌐 Network access (3)
⚙️ External commands (12)
Share & cite this report
Share the versioned assessment report, neutral badge, embed card, and citations. Skillstore reports evidence without deciding whether this Skill is safe.
Copy report link
https://skillstore.io/skills/vercel-labs-vercel-composition-patterns/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown badge
[](https://skillstore.io/skills/vercel-labs-vercel-composition-patterns?utm_source=security_passport_badge)HTML badge
<a href="https://skillstore.io/skills/vercel-labs-vercel-composition-patterns?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/vercel-labs-vercel-composition-patterns/security.svg" alt="Skillstore security assessment" loading="lazy"></a>Embed card
<iframe src="https://skillstore.io/embed/skills/vercel-labs-vercel-composition-patterns.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>Academic citations (APA · BibTeX · CFF)
APA citation
vercel-labs. (2026). vercel-composition-patterns security audit report (audit version 4) [Author version 1.0.0]. Skillstore. https://skillstore.io/skills/vercel-labs-vercel-composition-patterns/audits/4BibTeX citation
@techreport{vercel-labs-vercel-labs-vercel-composition-patterns-2026,
author = {vercel-labs},
title = {vercel-composition-patterns security audit report (audit version 4)},
institution = {Skillstore},
year = {2026},
number = {4},
url = {https://skillstore.io/skills/vercel-labs-vercel-composition-patterns/audits/4},
note = {Author version 1.0.0}
}CITATION.cff
cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "vercel-composition-patterns security audit report (audit version 4)"
version: "1.0.0"
type: report
authors:
- name: "vercel-labs"
date-released: "2026-07-07"
url: "https://skillstore.io/skills/vercel-labs-vercel-composition-patterns/audits/4"
identifiers:
- type: other
value: "skillstore:vercel-labs-vercel-composition-patterns:audit:4"
description: "Skillstore immutable audit report identifier"
Skillstore Score
Why this score Evidence Confidence: HighWhat You Can Build
Refactor Mode-Heavy Components
Replace boolean prop branches with explicit composed variants and shared internals.
Design Reusable Component APIs
Create compound components that expose flexible slots while sharing state through context.
Review React Architecture
Check whether component state is lifted into providers and decoupled from UI pieces.
Try These Prompts
Review this React component for boolean prop proliferation. Identify impossible states and suggest a composition-based structure.
Refactor this mode-heavy component into explicit variants. Keep shared internals reusable and list the provider boundaries.
Design a compound component API for this React feature. Define the frame, subcomponents, context contract, and expected usage.
Create a migration plan from local component state to provider-managed state. Include state, actions, meta, affected consumers, and testing risks.
Best Practices
- Create explicit variants for distinct product modes instead of adding boolean props.
- Keep UI pieces dependent on a generic context contract, not a specific store.
- Place providers around every component that needs shared state or actions.
Avoid
- Adding more boolean props to a component that already has multiple modes.
- Synchronizing child state upward with effects only so siblings can read it.
- Using render props for static layout slots that children can express clearly.
Frequently Asked Questions
What does this skill help with?
Does it run code or install packages?
When should I use compound components?
When are render props still useful?
Can it choose my state library?
Is this only for design systems?
Developer Details
Author
vercel-labsLicense
MIT
Author version
v1.0.0
Skillstore revision
r1
Ref
36e07d5e13068e5be64447e8f20b427cf2cbd21a
Maintenance freshness
7/18/2026
Usage
23 downloads · 207 views