skills.rest
diegosouzapw
diegosouzapwCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

vercel-composition-patterns

Identify and implement React composition patterns to simplify UI APIs.

108|27|Updated Mar 26, 2026
Search Tags:#context#react#patterns#composition#compound-components#state-lift
One-click install
npx skills add https://github.com/diegosouzapw/omni-skills --skill vercel-composition-patterns-diegosouzapw
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-composition-patterns
Source: https://github.com/diegosouzapw/omni-skills/tree/main/skills/vercel-composition-patterns
Command: npx skills add https://github.com/diegosouzapw/omni-skills --skill vercel-composition-patterns-diegosouzapw

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This skill provides a structured approach to building scalable React UI by replacing boolean props with compound components and provider-based state, reducing complexity and maintenance overhead.

Core Features & Use Cases

  • Compound components with a shared context enable flexible composition without prop drilling.
  • State lifting into providers allows UI to be reused with different state implementations.
  • Explicit variants for different workflows (ThreadComposer, EditMessageComposer, ForwardMessageComposer) over boolean props.

Quick Start

Load the upstream composition-patterns workflow and use the included support pack to guide the task.

Frequently Asked Questions about vercel-composition-patterns

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

FAQPage Schema
How do I avoid prop drilling in React without making component APIs overly complex?▼

You can avoid prop drilling in React by using compound components with a shared context to manage state, which simplifies the component API and eliminates the need to pass props through every layer.

What is the best way to structure React components for different workflows like editing and forwarding?▼

Using explicit variant components like ThreadComposer, EditMessageComposer, and ForwardMessageComposer provides a structured approach to handle different workflows, replacing boolean props and reducing UI complexity.

How does state lifting into providers help scale React UI libraries?▼

Lifting state into providers allows React UI components to be reused with different state implementations. This decouples state management from presentation, supporting scalable and maintainable component libraries.

When should I replace boolean props with composition patterns in React?▼

You should replace boolean props with React composition patterns when a component API grows complex due to multiple conditional states. Applying explicit variants and provider-based state helps manage these workflows cleanly.

Do I need a packaged workflow to apply these React composition patterns?▼

Applying these React composition patterns requires a packaged workflow with provenance, a public SKILL.md frontmatter, a references pack, and minimal scripts to enable provenance checks and review.

Related Skills

Explore More Software Engineering Skills→
memorysavermemorysaver

vercel-composition-patterns

Replace boolean props with explicit variant components and shared context in React.

Community
Basic
PaulRBergPaulRBerg
6

vercel-composition-patterns

Standardize React component architectures to reduce boolean prop proliferation.

Community
Advanced
datamonsterrdatamonsterr

vercel-composition-patterns

Document React composition patterns using compound components and provider-based state management.

Community
Advanced
sammy9322sammy9322

vercel-composition-patterns

Refactor React components with boolean props into explicit variant components.

Community
Intermediate