vercel-composition-patterns

Refactor React components into explicit variants with generic context interfaces.

Updated Nov 15, 2025

Search Tags:#context #react #composition #providers #compound-components #component-design

Ready to run

npx skills add https://github.com/billh93/snchz --skill vercel-composition-patterns-billh93

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Refactor React components to avoid boolean prop proliferation and to design scalable, reusable APIs using compound components, render props, and context providers.

Core Features & Use Cases

Explicit variants (ThreadComposer, EditMessageComposer, ForwardMessageComposer) to avoid boolean prop combinations.
Generic context interfaces (state, actions, meta) that enable dependency injection and reusable UI.
Provider-based state lifting to share state across non-nested UI and improve testability.
Real-world use: refactor large React component libraries into composable building blocks.

Quick Start

Start by selecting an explicit variant (ThreadComposer, EditMessageComposer, or ForwardMessageComposer) and wrap it with its provider to render the composed UI.

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

Avoid boolean prop proliferation by refactoring React components into explicit variant components. This approach uses compound components and generic context interfaces to ensure scalable composition and a robust, dependency-injected UI.

What is the best way to share state across non-nested React compound components?▼

The best way to share state across non-nested compound components is using provider-based state lifting. This technique utilizes generic context interfaces containing state, actions, and meta to enable dependency injection and improve testability.

How do I adapt React context providers for React 19?▼

Adapt React context providers for React 19 by replacing useContext with the use() API and passing refs as regular props. This modernizes context interfaces and supports scalable composition patterns.

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

Use explicit variant components instead of boolean props when building reusable component libraries. Variants prevent prop combination conflicts and enable scalable composition using compound components, render props, and context providers.

Does this React composition pattern work for large component libraries?▼

Yes, this composition pattern works for large component libraries. It refactors codebases relying on compound components and context providers into composable building blocks, applying generic context interfaces for reusable UI.