skills.rest
bpteam
bpteamCOMMUNITY
Explore all skills by this author →
GitHub

react-composition-patterns

Refactor React component libraries from boolean props to explicit composition patterns.

Updated Mar 18, 2026
Search Tags:#context#react#composition#render-props#compound-components#react19#explicit-variants
One-click install
npx skills add https://github.com/bpteam/coder --skill react-composition-patterns-bpteam
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-composition-patterns
Source: https://github.com/bpteam/coder/tree/main/.opencode/skills/react-composition-patterns
Command: npx skills add https://github.com/bpteam/coder --skill react-composition-patterns-bpteam

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Refactoring large React codebases often leads to boolean prop proliferation, nested conditionals, and hard-to-maintain UI contracts. This guide presents scalable composition patterns to simplify component APIs and enable reusable, flexible UI libraries.

Core Features & Use Cases

  • Learn to structure components with compound components and shared context to avoid prop drilling.
  • Apply explicit variants (ThreadComposer, EditMessageComposer, etc.) instead of boolean-mode components.
  • Implement dependency-injected state via providers to decouple UI from state implementations, including React 19 API usage.

Quick Start

Begin by creating explicit variant components linked to a shared context provider to start refactoring your UI.

Frequently Asked Questions about react-composition-patterns

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

FAQPage Schema
How do I replace boolean props in React with explicit component variants?▼

Replace boolean prop-driven UI variations with explicit composition by creating dedicated variant components like ThreadComposer or EditMessageComposer to reduce complexity and hard-to-maintain UI contracts.

What is the best way to structure large React component libraries to avoid prop drilling?▼

Structure large React component libraries using compound components and shared context to avoid prop drilling, enabling reusable and flexible UI composition without passing props through every layer.

How do I decouple React UI components from state implementations?▼

Decouple React UI from state implementations by applying dependency-injected state via context providers, utilizing React 19 API guidance to separate state logic from rendering architecture.

When should I use compound components instead of boolean-mode components in React?▼

Use compound components instead of boolean-mode components when refactoring large React codebases facing boolean prop proliferation and nested conditionals that create hard-to-maintain UI contracts.

Does this React composition pattern guide include React 19 API usage?▼

Yes, the React composition pattern guidance includes React 19 API usage for implementing dependency-injected state via providers and conforming to updated architecture patterns and state decoupling.

Why does my React component API become hard to maintain during refactoring?▼

React component APIs become hard to maintain during refactoring due to boolean prop proliferation and nested conditionals, requiring scalable composition patterns to simplify the UI contracts.

Related Skills

Explore More Software Engineering Skills→
leonanpereirapintoleonanpereirapinto
1

vercel-composition-patterns

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

Community
Advanced
MinhAnh-CorpMinhAnh-Corp

vercel-composition-patterns

Replace boolean props with compound components and context providers in React.

Official
Advanced
sammy9322sammy9322

vercel-composition-patterns

Refactor React components with boolean props into explicit variant components.

Community
Intermediate
vijaychandar186vijaychandar186

vercel-composition-patterns

Refactor React components using composition patterns instead of boolean props.

Community
Advanced