vercel-composition-patterns

Define React composition patterns replacing boolean props with explicit variants.

Updated Feb 4, 2026

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

Ready to run

npx skills add https://github.com/FabioFiorita/tastik --skill vercel-composition-patterns-fabiofiorita

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Complex React component libraries often suffer from boolean prop proliferation and brittle variants. This Skill provides scalable composition patterns—compound components, state lifting via providers, and context-driven APIs—to simplify maintenance, increase reuse, and enable safer refactors.

Core Features & Use Cases

Explicit component variants that replace multi-flag components
Compound components with shared context to avoid prop drilling
Dependency-injection friendly UI patterns and React 19 alignment

Quick Start

Refactor an existing component library by replacing boolean flags with explicit variants, adopt compound components with a shared context, and migrate patterns to React 19 style APIs.

Frequently Asked Questions about vercel-composition-patterns

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

FAQPage Schema

How do I replace boolean props with explicit variants in a React component library?▼

Replace boolean props with explicit React variants by applying scalable composition guidelines, refactoring multi-flag components into structured rule files with category mappings and frontmatter metadata for safer maintenance and increased reuse.

What is the best way to avoid prop drilling in complex React components?▼

Avoid prop drilling in complex React components by adopting compound components with shared context, lifting state via context providers to create dependency-injection friendly UI patterns and simplify your component architecture.

How do compound components work with shared context in React?▼

Compound components work with shared context by allowing parent components to implicitly share state and handlers with children, replacing brittle prop drilling with context-driven APIs that enable safer refactoring and increased component reuse.

Can I use these React composition patterns to migrate to React 19 APIs?▼

Yes, these React composition patterns align with React 19 by specifying structured rule files and frontmatter metadata for architecture, state management, implementation patterns, and React 19 API changes to guide your migration.

When should I use render props over compound components in React?▼

Use render props over compound components when you need explicit dependency injection and dynamic rendering logic, whereas compound components with shared context are better for simplifying static component hierarchies and avoiding prop drilling.

Why does my React component library have brittle variants and hard maintenance?▼

Your React component library likely has brittle variants due to boolean prop proliferation, which you can fix by adopting scalable composition patterns like explicit variants, context providers, and structured rule files for safer refactors.