vercel-composition-patterns

Refactor React components to replace boolean props with explicit variant and compound components.

Updated Aug 27, 2026

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

Ready to run

npx skills add https://github.com/akinwol/design-life --skill vercel-composition-patterns-akinwol

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React composition patterns help teams refactor React components to reduce boolean prop proliferation and to build flexible, reusable UI libraries.

Core Features & Use Cases

Guidance on component architecture, state management, and implementation patterns for scalable React codebases.
Encourages explicit variant components, compound components, and context-based state lifting to reduce prop drilling.
Use case: refactor a large React UI library to replace boolean props with explicit variants and provider-based state management.

Quick Start

Read the guide to identify an area that relies on boolean props or renders monolithic components, and apply explicit variant components and a provider-based pattern to modularize UI.

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 stop using boolean props for UI variants?▼

To stop using boolean props, replace them with explicit variant components and compound components, leveraging a shared context for provider-based state management to modularize your React UI.

What are compound components in React and when should I use them?▼

Compound components in React are an architectural pattern where related components share state implicitly through context. Use them to build flexible, reusable UI libraries and reduce prop drilling across large codebases.

How do I migrate React context providers to use the use() hook instead of useContext?▼

Migrating React context providers to use the use() hook involves replacing useContext calls with the modern use() API, adopting provider-based state management while avoiding forwardRef complexity during the React 19 API migration.

Can I use React composition patterns to scale a large UI library codebase?▼

Yes, you can use React composition patterns to scale large UI library codebases by applying explicit variant components and context-based state lifting to build flexible, reusable APIs and reduce prop drilling.

What is the best way to avoid prop drilling in React without adding boolean props?▼

The best way to avoid prop drilling without adding boolean props is implementing context-based state lifting with provider-based patterns, using compound components and explicit variants to establish a scalable component architecture.