vercel-composition-patterns

Name: vercel-composition-patterns
Availability: InStock
Author: Phant

Refactor React components into explicit variants with provider-based composition.

Updated Feb 28, 2026

Search Tags:#context #react #patterns #composition #state-management #render-props #compound-components

Ready to run

npx skills add https://github.com/phant-app/phant --skill vercel-composition-patterns-phant-app

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React composition patterns help avoid boolean prop proliferation by enabling explicit composition through compound components, lifted state, and context-driven APIs, making React libraries more scalable and maintainable.

Core Features & Use Cases

Use compound components to share state via context without prop drilling.
Lift state into provider components to enable cross-cut UI access and reuse.
Define explicit variants (e.g., ThreadComposer, EditMessageComposer) to document behavior and reduce complex boolean props.

Quick Start

Refactor a component into explicit variants using a provider-based architecture to enable reusable, composable 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 reduce boolean prop proliferation in React components?▼

Reduce boolean prop proliferation in React by defining explicit variant components, such as ThreadComposer or EditMessageComposer. This strategy replaces complex conditional logic with clear, composable component APIs.

What is the best way to share state across React components without prop drilling?▼

Share state without prop drilling by implementing compound components that lift state into provider components. This architecture enables cross-cut UI access and reuse through a shared context mechanism.

How do I refactor a React component into explicit variants?▼

Refactor a React component into explicit variants by creating explicit variant components or providers that utilize a shared context. This architecture enables reusable, composable UI elements under a unified provider.

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

Yes, this approach aligns with React 19 APIs by using the use() hook instead of useContext and avoiding forwardRef wrappers. It requires creating explicit variant components or providers using a shared context.

When should I use compound components in React?▼

Use compound components in React when you need to share state via context without prop drilling and want to build reusable component APIs. This pattern is ideal for scaling component libraries and reducing complex boolean props.