vercel-composition-patterns

Refactor React component libraries by replacing boolean props with explicit variants and provider-based context.

19|119|Updated Dec 9, 2024

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

Ready to run

npx skills add https://github.com/kindfi-org/kindfi --skill vercel-composition-patterns-kindfi-org

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React component libraries often suffer from boolean prop proliferation, making variants hard to reason about and reuse across apps.

Core Features & Use Cases

Compound components with a shared context
Explicit component variants and provider-based state
Render props patterns and context providers for flexible APIs

Quick Start

Refactor a component library by replacing boolean props with explicit variants and composing a provider-based context.

Frequently Asked Questions about vercel-composition-patterns

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

FAQPage Schema

How do I eliminate boolean prop proliferation in a React component library?▼

To eliminate boolean prop proliferation in a React component library, replace boolean props with explicit variant components. This approach uses a shared provider-based context and composition patterns to make variants easier to reason about and reuse.

What is the compound components pattern in React?▼

The compound components pattern in React groups related components together using a shared context. This allows explicit component variants to access provider-based state without prop drilling, creating flexible and reusable UI APIs.

How do I refactor a large React design system to use composition?▼

Refactor a large React design system by replacing boolean props with explicit variants and composing a provider-based context. Applying render props and compound components ensures flexible APIs across reusable UI components.

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

Yes, this React composition approach works with React 19 context APIs. It specifically adopts React 19 API patterns like the use() hook for context usage, ensuring modern provider-based state management across component variants.

When should I use render props instead of explicit variants in React?▼

Use render props instead of explicit variants in React when you need maximum flexibility for component rendering logic. Render props allow you to pass functions as props, complementing compound components and context providers for dynamic UI APIs.