What are compound components?

Compound components are a pattern where multiple components work together to form a single unit, sharing implicit state via context, which provides a more expressive API for the user.

How does this skill improve component maintainability?

By replacing numerous boolean props with composition-based structures, it makes components more flexible, self-documenting, and easier to extend without breaking existing logic.

Does this skill support the latest React 19 features?

Yes, it includes specific patterns for React 19, such as utilizing the new use() hook and transitioning away from forwardRef.

Can I apply these patterns to an existing legacy codebase?

Absolutely. This skill is specifically designed to help refactor components that have become 'prop-heavy' over time into more modular, composable units.

React Composition Patterns

Name: React Composition Patterns
Author: ng-hai

byng-hai

•

デザインツール

Implements scalable React component architectures using compound components and advanced composition patterns to eliminate prop drilling.

This skill provides a comprehensive framework for building maintainable and flexible React component libraries by moving beyond restrictive boolean props. It guides developers through implementing compound components, state lifting, and context-driven architectures, ensuring that component APIs remain clean and intuitive. Additionally, it incorporates modern best practices for React 19, such as utilizing the use() hook and optimizing for the deprecation of forwardRef, making it an essential tool for frontend architects and design system engineers.

主な機能

01Eliminates boolean prop proliferation through intelligent composition

02Decouples state management logic from UI implementation

03Optimizes component structure for both human developers and AI agents

04Provides migration paths for React 19 API changes

05Implements robust compound component architectures with shared context

064 GitHub stars

ユースケース

01Architecting flexible component APIs for large-scale enterprise applications

02Refactoring complex components burdened by excessive conditional props

03Building a standardized, reusable internal design system or component library

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ng-hai/dotclaude composition-patterns

For use in Claude.ai and ChatGPT

Download Skill