vercel-composition-patterns

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

Updated Apr 2, 2026

Search Tags:#architecture #context #react #composition #providers #compound-components

Ready to run

npx skills add https://github.com/DSalischiker/portfolio-space-exploration --skill vercel-composition-patterns-dsalischiker

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: vercel-composition-patterns
Source: https://github.com/DSalischiker/portfolio-space-exploration/tree/main/.agents/skills/vercel-composition-patterns
Command: npx skills add https://github.com/DSalischiker/portfolio-space-exploration --skill vercel-composition-patterns-dsalischiker

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Refactoring React components to avoid boolean prop proliferation and to build reusable APIs is error-prone and hard to maintain. This guide provides patterns for using compound components, context providers, and explicit variants to create scalable, testable UI libraries.

Core Features & Use Cases

Explicit variants for components to replace boolean props (e.g., ThreadComposer, EditMessageComposer, ForwardMessageComposer).
Shared state via a Provider pattern, enabling UI components to be composed outside the main frame.
React 19 API guidance, including use() over useContext and modern ref handling.

Quick Start

Create explicit variant components and wrap them with a provider to share state, then compose the UI inside the provider.

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 to avoid boolean prop proliferation?▼

Refactor React components by replacing multi-branch conditionals with explicit variant components like ThreadComposer or EditMessageComposer. This pattern eliminates boolean prop proliferation, creating scalable and testable UI libraries without complex conditional rendering.

What is the compound components pattern in React for sharing state?▼

The compound components pattern in React uses a ComposerProvider to share state across nested UI elements. It enables components to be composed outside the main frame, providing reusable APIs and explicit composition without prop drilling.

How do I use the React 19 use hook instead of useContext for providers?▼

React 19 introduces the use() hook to replace useContext for reading context values within providers. This modern API simplifies state sharing in compound components, offering a more direct way to access shared state without wrapping components in consumers.

What is the best way to build a scalable React UI library API?▼

The best way to build a scalable React UI library API is enforcing explicit variant components and a ComposerProvider. This approach replaces boolean props with distinct components, ensuring testable patterns and maintainable code as your library grows.

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

Yes, you can use explicit variant components instead of boolean props in React. By creating distinct components like ForwardMessageComposer rather than passing boolean flags, you eliminate multi-branch conditionals and produce clearer, more maintainable code.

When should I not use boolean props in React components?▼

You should avoid boolean props in React components when they trigger multi-branch conditionals that complicate testing and maintenance. If a component handles multiple distinct variants like editing or forwarding messages, split it into explicit variant components to prevent prop proliferation.