vercel-composition-patterns

Refactors React components using compound components, context providers, and composition patterns.

Updated Apr 30, 2026

Search Tags:#typescript #refactoring #react #composition #compound components #react 19 #context providers

Ready to run

npx skills add https://github.com/AdityaBorkar/igbot-fork --skill vercel-composition-patterns-adityaborkar

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? React components often accumulate boolean props like isThread or isEditing that create exponential state combinations and unmaintainable conditional logic. This Skill provides structured guidance for replacing prop proliferation with composition patterns that scale. ## Core Features & Use Cases - Compound Component Architecture: Structure complex components with shared context so consumers compose only the pieces they need. - State Lifting and Dependency Injection: Define generic context interfaces with state, actions, and meta so the same UI works with any state implementation. - React 19 API Guidance: Apply modern patterns like ref as a regular prop and use() instead of useContext or forwardRef. - Use Case: When refactoring a messaging composer that has grown to accept isThread, isEditing, and isDMThread props, apply these rules to split it into explicit ThreadComposer, EditComposer, and ChannelComposer variants sharing compound internals. ## Quick Start Ask the AI to refactor a React component with many boolean props into compound components using the composition patterns in this skill.

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 with too many boolean props?▼

Replace boolean props with explicit variant components that compose shared internals. Each variant like ThreadComposer or EditComposer declares exactly what it renders, eliminating hidden conditionals and impossible states.

What are compound components in React?▼

Compound components are a set of subcomponents sharing state through a common context, exported together like Composer.Frame, Composer.Input, and Composer.Submit. Consumers compose only the pieces they need without prop drilling.

Should I use children or render props for React composition?▼

Prefer children for composing static structure because they are more readable and compose naturally. Use render props only when the parent must pass data back to the child, such as rendering list items.

Does forwardRef still work in React 19?▼

React 19 makes ref a regular prop, so forwardRef is no longer needed. Accept ref directly in the component props and pass it to the underlying element, and use use() instead of useContext for reading context.

When should I lift state into a provider component?▼

Lift state into a provider when sibling components outside the main UI need access to that state or its actions. This avoids prop drilling, useEffect syncing, and ref-based workarounds for sharing state across boundaries.