vercel-composition-patterns

Name: vercel-composition-patterns
Availability: InStock
Author: ceami

Apply composition patterns to build scalable React component libraries.

1|Updated Aug 11, 2025

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

Ready to run

npx skills add https://github.com/ceami/opendata-web --skill vercel-composition-patterns-ceami

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This guide helps teams build scalable React component libraries by applying composition patterns to avoid boolean prop proliferation and tangled conditional logic.

Core Features & Use Cases

Avoid boolean prop proliferation by using composition and explicit variants.
Build reusable UI primitives with compound components and shared state via context providers.
Design flexible APIs for large codebases using lifted state and dependency injection.
Use case: refactor a component library to reduce props and improve composability across apps.

Quick Start

Review AGENTS.md for patterns and implement a sample ThreadComposer using the provided Composer primitives.

Frequently Asked Questions about vercel-composition-patterns

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

FAQPage Schema

How do I reduce boolean prop proliferation in React components?▼

Reduce boolean prop proliferation in React by applying composition patterns and explicit variant components. This approach replaces tangled conditional logic with reusable UI primitives to improve scalability across large codebases.

What is the best way to share state across compound components in a React library?▼

Share state across compound components by implementing a generic context interface. This pattern allows UI primitives to access shared data without prop drilling, creating flexible APIs for large applications.

Do I need forwardRef wrappers for composition patterns in React 19?▼

In React 19, you can avoid unnecessary forwardRef wrappers when designing composition patterns. The updated API allows you to pass refs directly as props, simplifying the creation of reusable UI primitives.

How does the use() hook replace useContext for React state management?▼

The use() hook replaces useContext in React 19 by allowing you to read context values directly within conditional logic. This simplifies state management when building generic context interfaces for composition.

How do I refactor a React component library to improve composability?▼

Refactor a React component library by replacing boolean props with explicit variants and lifted state. Implementing dependency injection and shared context providers reduces prop complexity and improves app-wide reusability.