vercel-composition-patterns

Refactor React UI libraries by replacing boolean props with explicit variants and compound components.

Updated Mar 29, 2026
One-click install
npx skills add https://github.com/Muhomorik/KanelBulleKapital --skill vercel-composition-patterns-muhomorik
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: vercel-composition-patterns
Source: https://github.com/Muhomorik/KanelBulleKapital/tree/main/.junie/skills/vercel-composition-patterns
Command: npx skills add https://github.com/Muhomorik/KanelBulleKapital --skill vercel-composition-patterns-muhomorik

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps teams avoid the fragmentation caused by excessive boolean props by guiding the use of explicit variants, compound components, and contextual state to build scalable, reusable React interfaces.

Core Features & Use Cases

  • Avoid boolean prop proliferation by introducing explicit variants like ThreadComposer and ForwardMessageComposer.
  • Lift state into provider components to enable cross-component sharing without prop drilling.
  • Define generic context interfaces (state, actions, meta) to support multiple providers with the same UI components.
  • Apply React 19 API guidance to modernize context usage and ref handling.

Quick Start

Refactor a UI component library by replacing boolean props with explicit variants and compound components.

Frequently Asked Questions about vercel-composition-patterns

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

FAQPage Schema
How do I avoid boolean prop proliferation in React components?

To avoid boolean prop proliferation in React components, introduce explicit variants like ThreadComposer and ForwardMessageComposer, replacing conditional boolean logic with distinct, purpose-built component APIs.

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

The best way to share state without prop drilling is lifting state into provider components, utilizing contextual state to enable cross-component sharing while defining generic context interfaces for state, actions, and meta.

How do I refactor a React UI library to use compound components?

Refactor a React UI library by replacing complex boolean props with explicit variants and compound components, lifting contextual state into providers to build scalable, reusable interfaces across your design system.

Does this React composition pattern approach support React 19 context APIs?

Yes, this React composition pattern approach supports React 19 by aligning with modern API guidance, specifically updating context usage by replacing useContext with the new use hook for ref handling and state management.

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

Use explicit variants instead of boolean props when scaling reusable React interfaces to prevent fragmentation, specifically when refactoring large UI libraries or designing scalable design systems requiring multiple provider configurations.