How does this skill help with 'boolean prop proliferation'?

It provides rules to identify when components have too many configuration flags and guides you through refactoring them into compound components or explicit variants.

What is the primary benefit of using React composition patterns?

Composition patterns allow you to build flexible components that are easier to extend and maintain by sharing logic through structure rather than passing endless props down the tree.

Is this skill compatible with React 19?

Yes, it includes specific high-priority rules for React 19, such as moving away from forwardRef and using the use() hook for context consumption.

Can this skill help with building design systems?

Absolutely. It is specifically designed to help create the underlying architecture for flexible, reusable component APIs required in modern design systems.

React Composition Patterns

Name: React Composition Patterns
Author: eliaslecomte

byeliaslecomte

0•

设计工具

Implements scalable React architecture patterns to eliminate prop proliferation and build flexible, maintainable component libraries.

This skill provides a comprehensive framework for building robust React components using advanced composition techniques. It helps developers move away from 'prop soup' and excessive boolean flags by implementing compound components, context-driven state management, and lifted state patterns. Designed to make codebases more readable for both humans and AI agents, it offers specific guidance for architecting reusable APIs, managing complex internal states, and modernizing code for React 19 standards.

主要功能

01Standardize component architecture for design systems and libraries

02Refactor complex components using compound component patterns

030 GitHub stars

04Implement React 19 specific patterns including forwardRef alternatives

05Eliminate boolean prop proliferation with explicit variants

06Decouple state management through generic context interfaces

使用场景

01Building a professional-grade internal UI component library

02Designing flexible component APIs that allow for easier consumer customization

03Refactoring legacy components burdened with excessive configuration props

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add eliaslecomte/claude-plugin composition-patterns

For use in Claude.ai and ChatGPT

主要功能

01Standardize component architecture for design systems and libraries

02Refactor complex components using compound component patterns

030 GitHub stars

04Implement React 19 specific patterns including forwardRef alternatives

05Eliminate boolean prop proliferation with explicit variants

06Decouple state management through generic context interfaces

使用场景

01Building a professional-grade internal UI component library

02Designing flexible component APIs that allow for easier consumer customization

03Refactoring legacy components burdened with excessive configuration props

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add eliaslecomte/claude-plugin composition-patterns

For use in Claude.ai and ChatGPT