skills.rest
shige1014-dev
shige1014-devCOMMUNITY
Explore all skills by this author →
GitHub

vercel-composition-patterns

Refactor React components to replace boolean props with compound components and provider-based state.

1|Updated Apr 11, 2026
Search Tags:#context#react#composition#refactor#state-management#compound-components#react19
One-click install
npx skills add https://github.com/shige1014-dev/backup-OpenMontage --skill vercel-composition-patterns-shige1014-dev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-composition-patterns
Source: https://github.com/shige1014-dev/backup-OpenMontage/tree/main/.agents/skills/vercel-composition-patterns
Command: npx skills add https://github.com/shige1014-dev/backup-OpenMontage --skill vercel-composition-patterns-shige1014-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This guide removes brittle component APIs built with boolean props and conditional logic by prescribing composition-first patterns that make components easier to reason about, test, and automate via AI-assisted refactors.

Core Features & Use Cases

  • Compound Components: Design components as composable parts with a shared context so consumers assemble exactly the pieces they need.
  • Provider-based State: Lift state into provider boundaries with a clear state/actions/meta interface to enable dependency injection and sibling access.
  • Explicit Variants & Patterns: Replace boolean-driven modes with explicit variant components and prefer children composition over render props; includes React 19 API guidance.
  • Use Cases: Refactoring monolithic UI components, building reusable component libraries, onboarding automated code-generation agents, and standardizing large React codebases.

Quick Start

Ask the agent to produce a refactor plan to replace boolean props with compound components and provider-based state for the Composer components in your codebase.

Frequently Asked Questions about vercel-composition-patterns

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

FAQPage Schema
How do I eliminate boolean prop proliferation in React components?▼

Compound components in React solve brittle component APIs by designing components as composable parts sharing a single context. Consumers assemble exactly the pieces they need, replacing monolithic UI components and boolean-driven modes with explicit variants.

How do I lift state into context providers for React composition?▼

Lift state into provider boundaries by defining clear state, actions, and meta context interfaces. This enables dependency injection and sibling component access, standardizing large React codebases and improving state management architecture.

Should I use children composition or render props for React component refactors?▼

Prefer children composition over render props during React refactors. This pattern avoids brittle component APIs and works seamlessly with explicit variant components, making your component library easier to automate via AI-assisted refactors.

Does this React composition pattern support React 19 API practices?▼

Yes, this React composition pattern supports React 19 API practices. It provides guidelines for adopting the new use() hook instead of useContext() to consume context within your compound components and provider boundaries.

Related Skills

Explore More Software Engineering Skills→
Elmanuel1Elmanuel1

vercel-composition-patterns

Refactor React components using compound components and lifted state providers.

Community
Intermediate
0xkynz0xkynz

vercel-composition-patterns

Refactor React component libraries by replacing boolean props with compound components and context providers.

Community
Advanced
SteepCraftSteepCraft

vercel-composition-patterns

Refactor React components into explicit variant and compound patterns.

Community
Intermediate
alkalisummeralkalisummer
1

react-patterns

Explain advanced React component patterns for scalable user interfaces.

Community
Intermediate