skills.rest
msichterman
msichtermanCOMMUNITY
Explore all skills by this author →
Website𝕏@mattsichtermanGitHub

vercel-composition-patterns

Refactor React component libraries by replacing boolean props with composition patterns.

Updated Feb 3, 2026
Search Tags:#react#state-management#compound-components#ui-architecture#composition-patterns#provider-patterns#react19
One-click install
npx skills add https://github.com/msichterman/templatesick --skill vercel-composition-patterns-msichterman
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-composition-patterns
Source: https://github.com/msichterman/templatesick/tree/main/.agents/skills/vercel-composition-patterns
Command: npx skills add https://github.com/msichterman/templatesick --skill vercel-composition-patterns-msichterman

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill provides a structured approach to scaling React component libraries by replacing boolean prop proliferation with explicit variants, compound components, and provider-based state management.

Core Features & Use Cases

  • Explicit component variants: create clear, self-documenting components for each UI scenario.
  • Compound components with shared context: enable flexible composition without prop drilling.
  • State lifting and provider pattern: share state across related components and outside the main UI.
  • React 19 API guidance: align with the latest API patterns such as use() and regular props for refs.
  • Use cases include refactoring component libraries, building reusable UI patterns, and designing flexible APIs.

Quick Start

Refactor a monolithic component using explicit variants and a provider-based approach to remove boolean props and improve composability.

Frequently Asked Questions about vercel-composition-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I fix boolean prop proliferation in my React component library?▼

Fix boolean prop proliferation in React by replacing conditional flags with explicit component variants, ensuring each UI scenario has a self-documenting component. This approach removes tangled conditional rendering and improves API flexibility.

What is the compound component pattern and how does it share state in React?▼

The compound component pattern shares state in React via a shared context, enabling flexible UI composition without prop drilling. This allows related components to implicitly access shared data and state management logic.

How do I lift state and use the provider pattern to share UI state outside the main component?▼

Lift state and apply the provider pattern to share UI state across related components and external logic by moving data to a top-level provider. This centralizes state management and exposes it to consumers outside the main UI tree.

Does this composition approach follow React 19 API guidelines for refs and context?▼

Yes, this composition approach follows React 19 API guidelines by using the use() hook instead of useContext and passing regular props for refs. These patterns ensure flexible UI APIs align with the latest React 19 standards.

When should I refactor a monolithic React component into explicit variants?▼

Refactor a monolithic React component into explicit variants when scaling reusable UI primitives across projects or improving API flexibility. This prevents boolean prop explosions and clarifies distinct UI scenarios.

Related Skills

Explore More Software Engineering Skills→
zivtechzivtech

vercel-composition-patterns

Refactors React components into compound structures with context-provider state management.

Official
Intermediate
memorysavermemorysaver

vercel-composition-patterns

Replace boolean props with explicit variant components and shared context in React.

Community
Basic
yono92yono92

vercel-composition-patterns

Structure React components with composition patterns to avoid boolean props.

Community
Intermediate
involvexinvolvex
1

react-patterns

Provide reusable React patterns for component composition, hooks, and state management.

Community
Advanced