skills.rest
MMXC
MMXCCOMMUNITY
Explore all skills by this author →
GitHub

vercel-composition-patterns

Guide React component architecture with compound components and React 19 APIs.

Updated Feb 16, 2026
Search Tags:#state management#react#composition#component architecture#compound components#context api
One-click install
npx skills add https://github.com/MMXC/openclaw-back --skill vercel-composition-patterns-mmxc
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-composition-patterns
Source: https://github.com/MMXC/openclaw-back/tree/main/agents/architect/skills/composition-patterns
Command: npx skills add https://github.com/MMXC/openclaw-back --skill vercel-composition-patterns-mmxc

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses the complexity of building and maintaining React components by providing patterns to avoid prop proliferation and create more flexible, scalable UIs.

Core Features & Use Cases

  • Component Architecture: Avoids boolean prop proliferation and promotes the use of compound components for better composition.
  • State Management: Guides on lifting state into provider components and decoupling state implementation from UI.
  • Implementation Patterns: Recommends using children over render props and creating explicit component variants.
  • React 19 APIs: Covers modern React practices like using use() instead of useContext() and handling refs.
  • Use Case: Refactoring a large, monolithic Composer component with many conditional props into smaller, composable components like ThreadComposer and EditComposer.

Quick Start

Apply the composition patterns to refactor the Composer component to avoid boolean prop proliferation.

Frequently Asked Questions about vercel-composition-patterns

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

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

Avoid boolean prop proliferation in React by replacing multiple conditional flags with explicit component variants and leveraging compound components for flexible composition.

What is the best way to manage state in compound components?▼

Manage state in compound components by lifting state into provider components, which decouples state implementation from the UI and allows efficient sharing via the Context API.

How does the React 19 use() API replace useContext for component composition?▼

The React 19 use() API replaces useContext by allowing components to read context values directly within conditional blocks, simplifying state management and decoupling state implementation from the UI.

When should I use children over render props in React component architecture?▼

Use children over render props in React component architecture to achieve more maintainable, scalable, and efficiently composable component structures without complex nested logic.

How to refactor a monolithic React component into composable variants?▼

Refactor a monolithic React component into composable variants by breaking it into smaller, explicit components like ThreadComposer and EditComposer to eliminate conditional boolean props.

Related Skills

Explore More Software Engineering Skills→
datamonsterrdatamonsterr

vercel-composition-patterns

Document React composition patterns using compound components and provider-based state management.

Community
Advanced
video-production-buddyvideo-production-buddy
602

vercel-composition-patterns

Refactor React components with boolean props into compound component variants.

Official
Intermediate
shiroginshirogin
1

vercel-composition-patterns

Refactor React components using composition, compound components, and context providers.

Community
Intermediate
alkalisummeralkalisummer
1

react-patterns

Explain advanced React component patterns for scalable user interfaces.

Community
Intermediate