vercel-composition-patterns

Refactor React components to replace boolean props with explicit variant composition.

2|Updated Jun 13, 2023

Search Tags:#react #state-management #provider #compound-components #component-library #composition-patterns

Ready to run

npx skills add https://github.com/joaoprocopio/tooling --skill vercel-composition-patterns-joaoprocopio

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: vercel-composition-patterns
Source: https://github.com/joaoprocopio/tooling/tree/main/skills/vercel-composition-patterns
Command: npx skills add https://github.com/joaoprocopio/tooling --skill vercel-composition-patterns-joaoprocopio

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React components often suffer from boolean prop proliferation which creates maintenance complexity. This skill introduces composition patterns that enable scalable and maintainable component APIs.

Core Features & Use Cases

Avoid boolean prop proliferation by using explicit variant components.
Implement compound components with a shared context to reduce prop drilling.
Apply provider-based state management to decouple UI from state implementation.
Guidance for React 19 API usage and transitions.

Quick Start

Start by adopting explicit variant components (for example, ThreadComposer, EditMessageComposer, ForwardMessageComposer) to replace boolean prop patterns.

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?▼

Compound components in React prevent prop drilling by sharing state through a common context. This composition pattern decouples UI from state implementation, allowing parent components to implicitly pass data to children without manually forwarding props through every layer.

What is the best way to manage state in a reusable React component library?▼

The best way to manage state in a reusable React component library is applying provider-based state management. This decouples UI from state implementation by lifting state into providers, satisfying generic context interfaces and eliminating the need for excessive boolean prop configurations.

Does this React composition pattern approach work with React 19?▼

Yes, these React composition patterns work with React 19. The approach includes specific guidance for React 19 API usage and transitions, ensuring your explicit variant components and provider-based state management align with the latest React API standards.

When should I use explicit variant components instead of boolean props in React?▼

You should use explicit variant components instead of boolean props in React when building reusable UI patterns that require scalability. If a component relies on multiple boolean toggles causing maintenance complexity, refactoring to explicit variants simplifies the API and improves composition.