vercel-composition-patterns

Refactor React component libraries into explicit variant components with provider-driven state.

Updated Mar 12, 2026

Search Tags:#context #react #composition #design-patterns #compound-components #frontend-architecture

Ready to run

npx skills add https://github.com/arvidfcjarfalla-prog/atlas --skill vercel-composition-patterns-arvidfcjarfalla-prog

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Refactor React component libraries to reduce boolean prop proliferation and enable scalable composition.

Core Features & Use Cases

Explicit variant components to replace boolean prop flags
Provider-driven state and context-based composition
React 19 API guidance (use() instead of useContext) and forwardRef avoidance

Quick Start

Refactor a React component library by replacing boolean props with explicit variant components and a provider-based state pattern.

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 boolean prop proliferation?▼

Refactor React components to stop boolean prop proliferation by replacing boolean flags with explicit variant components, establishing a provider-driven state pattern, and adopting context-based composition for scalable architecture.

What is the best way to manage state in compound components without prop drilling?▼

The best way to manage state in compound components without prop drilling is using provider-driven state and context-based composition, passing shared state implicitly through a React context provider to nested child components.

How does the React 19 use() hook replace useContext for composition patterns?▼

The React 19 use() hook replaces useContext for composition patterns by allowing components to read context values directly within conditional blocks, offering more flexible provider-driven state access than the standard useContext API.

When should I avoid forwardRef in React component libraries?▼

Avoid forwardRef in React component libraries when building new architecture for React 19 and above, as the updated API allows ref access without it, simplifying explicit variant components and reducing boilerplate in your composition patterns.

Can I apply provider-driven state to an existing UI system across multiple teams?▼

Yes, you can apply provider-driven state to an existing UI system across multiple teams, as this composition pattern enforces maintainable architecture and explicit variants, ensuring scalable and consistent frontend architecture for large projects.

What are the limitations of replacing boolean props with explicit variant components?▼

Replacing boolean props with explicit variant components increases the total number of component files and requires upfront architectural planning, but prevents unmanageable prop combinations and ensures clean, scalable frontend architecture.