vercel-composition-patterns

Refactor React components using compound, variant, and provider composition patterns.

Updated May 28, 2026
One-click install
npx skills add https://github.com/7Lemaitre7/xp-prj --skill vercel-composition-patterns-7lemaitre7
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-composition-patterns
Source: https://github.com/7Lemaitre7/xp-prj/tree/main/.agents/skills/composition-patterns
Command: npx skills add https://github.com/7Lemaitre7/xp-prj --skill vercel-composition-patterns-7lemaitre7

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Refactoring React components often leads to boolean prop proliferation, creating combinatorial UI states that are hard to reason about and maintain. This Skill provides a structured pattern library for scalable composition.

Core Features & Use Cases

  • Compound components with a shared context to avoid prop drilling and enable flexible assembly.
  • State lifting and dependency-injected providers to allow UI components to stay UI-focused while state can live elsewhere.
  • Explicit variant patterns to replace multi-mode components and improve readability across codebases.

Quick Start

Create your first variant by composing a Frame with Input and Footer inside a ThreadProvider.

Frequently Asked Questions about vercel-composition-patterns

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

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

Fix boolean prop proliferation by applying composition patterns like explicit variants and compound components to replace multi-mode properties. This refactoring approach isolates combinatorial UI states, making components easier to maintain and reason about.

What is the compound components pattern with shared context in React?▼

The compound components pattern uses a shared context to allow flexible UI assembly while avoiding prop drilling. It lets individual sub-components coordinate internally, keeping the parent API clean and scalable without passing redundant state down manually.

How do I lift state in React without making UI components complex?▼

Lift state using dependency-injected providers so UI components remain purely presentational. State lives elsewhere in the architecture, injected via context providers, ensuring components stay UI-focused and decoupled from complex business logic.

Does this React composition approach work for library design and provider architectures?▼

Yes, these composition patterns are explicitly scoped for library design and API pattern work across provider-based architectures. They help structure scalable component interfaces and manage context providers effectively for reusable code distribution.

When should I use explicit variants instead of multi-mode components in React?▼

Use explicit variants instead of multi-mode components when boolean props create combinatorial states that hurt readability. Explicitly defining each UI state as a distinct variant improves maintainability and clarifies component usage across large codebases.