When should I use compound components over standard props?

Compound components are recommended when a component has multiple boolean layout props, when sub-components need to share implicit state, or when the user needs control over the internal structure of the UI.

Does this skill support the latest React 19 features?

Yes, it specifically covers React 19 improvements such as passing 'ref' as a regular prop and using the use() hook for conditional context consumption.

What is the 'composition over configuration' principle?

It is a design philosophy that favors building complex UIs by nesting smaller, focused components (composition) rather than creating a single component with dozens of boolean configuration props.

How does this skill handle prop drilling?

It provides patterns for state lifting and Context Interface Design, allowing siblings to share state through providers and sub-components to consume data directly without passing props through intermediate layers.

React Composition Architect

Name: React Composition Architect
Author: s-hiraoku

bys-hiraoku

0•

设计工具

Implements advanced React component composition patterns to build flexible, maintainable, and production-grade user interfaces.

This skill empowers Claude to architect and refactor React component APIs using modern composition patterns rather than complex boolean configurations. It provides structural guidance for building compound components, managing context-based state, and implementing explicit variants to eliminate prop-heavy 'God components.' By leveraging React 19 APIs and clean architectural principles, it helps developers build reusable UI libraries and robust design systems that are easy to extend and maintain without breaking existing implementations.

主要功能

010 GitHub stars

02Migrates legacy patterns to React 19 APIs including use() and direct ref passing

03Designs robust context interfaces with clear separation of state, actions, and metadata

04Refactors prop-heavy components into flexible, composition-based APIs

05Implements explicit component variants to reduce logic complexity and boolean props

06Architects Compound Components to share implicit state through context

使用场景

01Refactoring a complex UI component with excessive boolean layout switches into a clean Compound Component structure

02Optimizing component state management by lifting state into shared context providers

03Building a reusable design system or component library that requires highly flexible layouts

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