vercel-composition-patterns

Refactor React components by replacing boolean props with composable patterns.

Updated Aug 27, 2026

Search Tags:#architecture #context #react #composition #render-props #compound-components

Ready to run

npx skills add https://github.com/siriwatknp/jun-cc --skill vercel-composition-patterns-siriwatknp

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams design scalable React codebases by replacing boolean prop proliferation with composable patterns, enabling explicit variants and shared state.

Core Features & Use Cases

Explicit variant components: Create dedicated components like ThreadComposer or ForwardMessageComposer to document intent and avoid combinatorial props.
Compound components with shared context: Build UI pieces that assemble via a single provider to reduce prop drilling.
Flexible state management: Swap providers (local vs global) while reusing the same UI, enabling testing and reuse across projects.
Quick applicability: Apply to component libraries, design systems, or large UI codebases that evolve APIs.

Quick Start

Start by adopting a simple frame with a Provider and a few Frame/Input/Submit pieces, then progressively extract other variants as separate providers.

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

To refactor React components and avoid boolean prop proliferation, replace conditional flags with explicit variant components like ThreadComposer. This enforces clear intent, prevents combinatorial prop issues, and establishes a scalable architecture.

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

The compound component pattern with shared context in React assembles UI pieces like Frame and Input under a single provider. This reduces prop drilling by managing shared state implicitly across the component tree without manual prop passing.

Can I swap state management providers while reusing the same React UI?▼

Yes, you can swap state management providers while reusing the same React UI. By decoupling providers from visual components, you can switch between local and global state, enabling testing and reuse across projects.

Does the React 19 API affect how to design generic context interfaces?▼

Yes, React 19 API considerations affect how to design generic context interfaces. Enforcing generic context interfaces ensures type safety and compatibility when building compound components that rely on shared state providers.

What is the best way to scale a React component library API?▼

The best way to scale a React component library API is adopting composable patterns. Start with a simple frame using a provider and pieces, then progressively extract variants as separate providers to document intent clearly.

When should I not use render props in React architecture?▼

You should avoid render props in React architecture when explicit variant components can document intent more clearly. Relying on render props alongside boolean props often leads to combinatorial prop issues and API bloat.