When should I use compound components over standard props?

You should switch to compound components when a component's API becomes cluttered with 3+ boolean layout props or when users need flexibility in where sub-elements are placed.

How does this skill help with React 19 migrations?

It provides updated patterns for using the new use() hook and implements native ref prop passing, helping you remove deprecated forwardRef calls and legacy context consumers.

Does this skill provide TypeScript support?

Yes, all patterns include robust TypeScript interface designs for context providers, actions, and component props to ensure type safety across your UI.

What is the benefit of 'Composition over Configuration'?

Composition reduces the surface area of your component APIs, making them easier to test, preventing combinatorial prop explosions, and allowing for more expressive UI layouts.

React Component Composition

Name: React Component Composition
Author: s-hiraoku

bys-hiraoku

0•

デザインツール

Implements scalable React UI patterns using composition and React 19 APIs to eliminate prop drilling and configuration bloat.

This skill empowers developers to build flexible, maintainable React user interfaces by prioritizing composition over configuration. It provides guided implementation for advanced patterns like compound components, explicit variants, and clean context interfaces while incorporating the latest React 19 features like the use() hook and simplified ref handling. It is particularly valuable when designing reusable component libraries or refactoring complex, prop-heavy components into modular, readable structures that are easy for teams to extend and maintain.

主な機能

01Context interface design for state, actions, and metadata separation

02Explicit variant creation to replace messy boolean property flags

03React 19 API migration including use() hook and native ref props

040 GitHub stars

05Best practices for state lifting and slot-based layout composition

06Compound component pattern implementation for shared implicit state

ユースケース

01Refactoring 'God components' with dozens of conflicting boolean props

02Building a professional design system or reusable UI component library

03Modernizing legacy React codebases to use React 19 composition patterns

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add s-hiraoku/synapse-a2a react-composition

For use in Claude.ai and ChatGPT

Download Skill