vercel-composition-patterns

Refactor React components into composition-first designs with provider-based state and explicit variants.

Updated May 4, 2026

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

Ready to run

npx skills add https://github.com/jtgiron/portfolio --skill vercel-composition-patterns-jtgiron

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you replace brittle React component APIs that rely on many boolean props, hidden conditionals, and prop drilling. It guides you toward composition-first designs that are easier to extend, review, and reuse.

Core Features & Use Cases

Component Architecture: Restructure complex UI into explicit variants and compound components.
State Management: Move shared state into provider components so sibling UI can read and act on it without awkward workarounds.
API Design: Replace render props and boolean flags with clearer children-based composition and context-backed contracts.
React 19 Guidance: Apply updated patterns for refs and context usage when modern React APIs are appropriate.
Use Case: Refactor a message composer, dialog workflow, or design system component to make the available UI states obvious and maintainable.

Quick Start

Ask the assistant to refactor your React component into composition patterns with explicit variants, shared context, and provider-based state.

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

Refactor React components to avoid boolean prop proliferation by restructuring complex UI into explicit variants and compound components using children-based composition. This replaces rigid APIs with clearer, maintainable component contracts.

What is the best way to manage shared state between sibling UI components in React?▼

Manage shared state between sibling UI components by lifting it into provider components. Siblings can then read and act on the shared state through context-backed contracts without awkward workarounds or prop drilling.

How do compound components improve React API design?▼

Compound components improve React API design by replacing render props and boolean flags with explicit children-based composition. This makes available UI states obvious, easier to extend, and simpler to review.

Can I use React 19 context patterns for state management?▼

Yes, you can use React 19 context patterns for state management. The approach applies updated patterns for refs and context usage, including React 19-compatible use() patterns when modern APIs are appropriate.

When should I replace render props with composition in my React library?▼

Replace render props with composition when designing compound component libraries or reviewing architecture for provider-driven state. This eliminates brittle component APIs and hidden conditionals, making reusable variants easier to maintain.

Why does prop drilling make my React component architecture brittle?▼

Prop drilling makes React component architecture brittle by relying on many boolean props and hidden conditionals. Moving to composition-first designs with shared context contracts eliminates this rigidity and improves reusability.