skills.rest
makerjackie
makerjackieCOMMUNITY
Explore all skills by this author →
𝕏@maker_jackieGitHub

vercel-composition-patterns

Refactor React components with boolean props into compound components with providers.

1|Updated Feb 20, 2026
Search Tags:#context#refactoring#react#composition#state-management#compound-components
One-click install
npx skills add https://github.com/makerjackie/jackie-skills-starter --skill vercel-composition-patterns-makerjackie
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-composition-patterns
Source: https://github.com/makerjackie/jackie-skills-starter/tree/main/skills/vercel-composition-patterns
Command: npx skills add https://github.com/makerjackie/jackie-skills-starter --skill vercel-composition-patterns-makerjackie

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill eliminates boolean prop proliferation and fragile conditional logic in React component APIs by promoting composition, compound components, and provider-based state boundaries so components remain explicit, testable, and easy to maintain by humans and automation.

Core Features & Use Cases

  • Avoid Boolean Prop Proliferation: Replace many boolean props with explicit component variants to prevent exponential state combinations.
  • Compound Components & Providers: Build compound components with a shared context (state, actions, meta) so subcomponents compose without prop drilling.
  • Generic Context Interfaces: Define state, actions, and meta interfaces to allow dependency-injectable providers (local, global, or synced state implementations).
  • Lift State into Providers: Move state management into provider boundaries so sibling/custom UI can access actions and state without ref hacks.
  • React 19 API Guidance: Apply React 19-specific patterns such as using use() instead of useContext() and treating ref as a normal prop where applicable.
  • Use Cases: Refactoring legacy components with many flags, building reusable UI libraries, reviewing component architecture, and instructing automated agents to perform refactors.

Quick Start

Refactor a React component that uses multiple boolean props into explicit compound components with a provider and shared context, and produce the updated component variants and provider implementation.

Frequently Asked Questions about vercel-composition-patterns

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

FAQPage Schema
How do I refactor React components to avoid boolean prop proliferation?▼

To avoid boolean prop proliferation in React components, replace multiple boolean props with explicit component variants and compound components. This prevents exponential state combinations and keeps component APIs explicit, testable, and maintainable.

What is the best way to build compound components with shared state in React 19?▼

The best way to build compound components in React 19 is lifting state into provider boundaries. Define generic context interfaces for state, actions, and meta so subcomponents compose without prop drilling, using use() instead of useContext().

How does lifting state into providers improve React component architecture?▼

Lifting state into providers improves React architecture by allowing sibling and custom UI components to access actions and state without ref hacks. This defines clear state boundaries and enables dependency-injectable provider implementations.

Can I use React 19 ref and context patterns for UI library refactoring?▼

Yes, you can use React 19 patterns for UI library refactoring. Treat ref as a normal prop and apply the use() hook for context, replacing fragile conditional logic with explicit component variants and provider-based state boundaries.

When should I replace conditional logic with compound components in React?▼

You should replace conditional logic with compound components when your React codebase suffers from boolean prop proliferation and fragile flags. This refactor makes components explicit, testable, and easy to maintain by both humans and automated agents.

Related Skills

Explore More Software Engineering Skills→
rhuangabrielsantosrhuangabrielsantos

vercel-composition-patterns

Refactor React components to replace boolean props with provider-based composition patterns.

Community
Intermediate
gyalamanch001agyalamanch001a

vercel-composition-patterns

Refactor React components into explicit compound components with lifted state.

Community
Intermediate
0xkynz0xkynz

vercel-composition-patterns

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

Community
Advanced
mrsknetworkmrsknetwork

vercel-composition-patterns

Refactor React components with boolean props into compound components using provider-based state.

Community
Intermediate