skills.rest
babually
babuallyCOMMUNITY
Explore all skills by this author →
GitHub

vercel-composition-patterns

Refactor React component architectures to replace boolean props with compound components and lifted state.

1|Updated Jun 27, 2026
Search Tags:#state management#react#composition#compound components#render props#context providers
One-click install
npx skills add https://github.com/babually/bongo-template --skill vercel-composition-patterns-babually
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-composition-patterns
Source: https://github.com/babually/bongo-template/tree/main/.agents/skills/vercel-composition-patterns
Command: npx skills add https://github.com/babually/bongo-template --skill vercel-composition-patterns-babually

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you refactor and design React components that are easier to maintain, easier to reuse, and less prone to boolean prop explosion. It is especially useful when a single component has grown into many modes, render props, or tightly coupled state handling.

Core Features & Use Cases

  • Compound Components: Break complex UI into composable parts that share state through context.
  • State Lifting and Dependency Injection: Move state into providers so sibling components and external UI can access the same actions and data.
  • Explicit Variants: Replace ambiguous multi-boolean components with clear, self-documenting variants like ThreadComposer or EditMessageComposer.
  • React 19 Guidance: Apply updated patterns for refs and context usage in modern React codebases.
  • Use Case: A team building a message composer can use these rules to replace one overloaded component with smaller, explicit, reusable pieces that are easier for both humans and agents to extend.

Quick Start

Ask the Skill to review a React component API and rewrite it using compound components, lifted state, and explicit variants where appropriate.

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 a React component with too many boolean props?▼

Refactor React components with boolean prop proliferation by applying compound components, lifted state, and explicit variants to improve composition, reuse, and maintainability across your codebase.

What is the best way to share state between sibling React components without prop drilling?▼

Lift state into context providers to share data and actions between sibling components, enabling them to access the same state without prop drilling and improving overall component reuse.

How do I replace render props with modern React composition patterns?▼

Replace render props by refactoring component architectures to use compound components and dependency-injectable context interfaces, applying updated React 19 API patterns for refs and context usage.

When should I use compound components in my React component library?▼

Use compound components when a single component has grown into many modes or tightly coupled state handling, allowing you to break complex UI into composable parts that share state through context providers.

Does this React refactoring approach work with React 19 context and ref APIs?▼

Yes, the refactoring approach applies updated patterns for refs and context usage in modern React 19 codebases, specifically targeting context-driven providers and dependency-injectable context interfaces.

Related Skills

Explore More Software Engineering Skills→
pau-vegapau-vega

vercel-composition-patterns

Refactor React UIs with variant components and provider-based state lifting.

Community
Advanced
zzoohubzzoohub

vercel-composition-patterns

Refactor React component libraries to replace boolean props with explicit variants and compound components.

Community
Intermediate
legions-developerlegions-developer
885

vercel-composition-patterns

Refactor React component APIs to replace boolean props with compound components and providers.

Community
Intermediate
yogaprasetya22yogaprasetya22

vercel-composition-patterns

Refactor React components from boolean props to compound components with context providers.

Community
Intermediate