skills.rest
mrsknetwork
mrsknetworkCOMMUNITY
Explore all skills by this author →
𝕏@mrsknetworkGitHub

vercel-composition-patterns

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Many React components become fragile and hard to maintain when behavior is controlled by many boolean props and conditional logic. This Skill provides patterns to replace boolean-prop proliferation with explicit, composable component variants, provider-based state, and shared context so components remain predictable, testable, and reusable.

Core Features & Use Cases

  • Compound Components & Context: Teach teams to structure complex UI as small composable pieces that consume a shared context rather than relying on prop drilling.
  • Provider-Based State & Dependency Injection: Lift state into providers with a clear state/actions/meta interface so the same UI works with local or global state implementations.
  • Explicit Variants & Composition: Replace boolean modes with named variant components (e.g., ThreadComposer, EditComposer) to make intent explicit and eliminate hidden conditionals.
  • React 19 Guidance: Notes on React 19 API changes such as using use() and treating ref as a regular prop for modern codebases.
  • Use Cases: Refactoring legacy components that use many boolean flags, designing reusable component libraries, and running architecture-focused code reviews.

Quick Start

Use the vercel-composition-patterns guidance to refactor components that use many boolean props into explicit compound components wired to provider-based state.

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 with too many boolean props controlling behavior?▼

Refactor boolean-prop driven React components by replacing conditional modes with explicit, composable component variants and provider-based state. This eliminates hidden conditionals by using named variants to make intent clear and components predictable.

What is the compound components pattern and how does it use context in React?▼

The compound components pattern structures complex React UI as small composable pieces that consume a shared context rather than relying on prop drilling. This allows individual components to operate independently while sharing state implicitly through a provider interface.

How do I use dependency injection with provider-based state in React component libraries?▼

Lift state into providers with a clear state, actions, and meta interface to implement dependency injection in React. This allows the same UI components to work seamlessly with either local or global state implementations without modifying the component internals.

Does this composition patterns approach work with React 19 APIs like use() and ref as a prop?▼

Yes, the composition patterns approach includes specific React 19 guidance for modernizing codebases. It covers using the use() API for unwrapping promises and treating ref as a regular prop, alongside context providers and compound component architecture.

When should I not use boolean props for component variants in React?▼

Avoid boolean props for component variants when multiple flags interact and create hidden conditional logic paths that make components fragile and hard to test. Replace them with explicit named variant components to ensure the codebase remains maintainable and predictable.

Related Skills

Explore More Software Engineering Skills→
Yoriichi-DangYoriichi-Dang

vercel-composition-patterns

Refactor React components using compound components and context providers.

Community
Advanced
gesmith0606gesmith0606

vercel-composition-patterns

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

Community
Intermediate
babuallybabually
1

vercel-composition-patterns

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

Community
Advanced
awardsappawardsapp

building-compound-components

Design unstyled compound React component APIs with context and render props.

Official
Intermediate