vercel-composition-patterns

Refactor React components into explicit variants with provider-driven context.

2|1|Updated May 21, 2025

Search Tags:#context #react #composition #variants #compound-components #provider-patterns

Ready to run

npx skills add https://github.com/krzemienski/awesome-list-site --skill vercel-composition-patterns-krzemienski

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Replaces boolean prop proliferation with explicit variants and compound components to enable scalable React UI architectures.

Core Features & Use Cases

Explicit variant components (ThreadComposer, EditMessageComposer, ForwardMessageComposer) that compose shared UI parts.
Provider-based state management with a generic context interface (state, actions, meta) to swap implementations without editing UI.
Guidance on using compound components, render props, and context to build reusable, scalable component libraries.

Quick Start

Analyze a codebase with boolean props and refactor into explicit variants using a provider-based context to separate UI from state management.

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 replace boolean props with explicit variants?▼

To refactor React components, replace boolean props by creating explicit variant components like ThreadComposer and EditMessageComposer that compose shared UI parts. This approach uses compound components to scale your UI architecture without prop proliferation.

What is the provider pattern for React context state management?▼

The provider pattern uses a generic context interface split into state, actions, and meta. This structure separates UI from state management, allowing you to swap implementations without editing the UI components themselves.

When should I use compound components in a React UI library?▼

Use compound components when you need a scalable React UI library with clear separation between UI and state management. They work with render props and context to build reusable, scalable architectures while avoiding boolean prop proliferation.

How do I separate UI from state management in React?▼

Separate UI from state management by applying a provider-driven context interface divided into state, actions, and meta. This pattern lets you swap state implementations without modifying the UI, using explicit variant components for clear composition.

Why does using boolean props make React components hard to scale?▼

Boolean props cause scaling issues by creating complex combinations of conditional UI logic that are hard to maintain. Replacing them with explicit variants and compound components ensures shared UI parts compose predictably without conflicting states.