Is this skill compatible with React 19?

Yes, it includes specialized implementation patterns for React 19, such as utilizing the use() hook and adopting the new ref-as-prop standard to replace forwardRef.

Does this skill help with AI-assisted code reviews?

Absolutely. By providing a structured framework for composition, it helps Claude Code identify architectural smells and suggest more maintainable component structures during reviews.

When should I apply the React Composition Patterns skill?

Apply this skill when refactoring complex UI components, building reusable design systems, or when you need to standardize how state is shared between related components.

How does this skill handle boolean prop proliferation?

It provides specific architectural rules to replace multiple boolean flags with composable children and compound components, resulting in cleaner and more extensible APIs.

React Composition Patterns

Name: React Composition Patterns
Author: Microck

byMicrock

•

디자인 도구

Implements scalable React component architectures to eliminate boolean prop bloat and enhance frontend API flexibility.

The React Composition Patterns skill provides domain-specific guidance for building maintainable frontend architectures using compound components, context providers, and modern React 19 APIs. It helps developers refactor complex components by decoupling state management from UI implementation, moving away from restrictive boolean-heavy props toward composable structures that are easier for both humans and AI agents to manage as codebases scale.

주요 기능

01Standardize component architecture with clear priority-based rules

02Implement scalable state management using decoupled context providers

032 GitHub stars

04Leverage React 19 specific updates like the use() hook and ref-to-prop patterns

05Eliminate boolean prop proliferation with compound component patterns

06Optimize component APIs for better reusability and developer experience

사용 사례

01Building a consistent, flexible design system or internal UI component library

02Migrating legacy React components to use modern React 19 composition standards

03Refactoring a monolithic component that has dozens of optional boolean flags

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add microck/opendots-microck composition-patterns

For use in Claude.ai and ChatGPT

주요 기능

01Standardize component architecture with clear priority-based rules

02Implement scalable state management using decoupled context providers

032 GitHub stars

04Leverage React 19 specific updates like the use() hook and ref-to-prop patterns

05Eliminate boolean prop proliferation with compound component patterns

06Optimize component APIs for better reusability and developer experience

사용 사례

01Building a consistent, flexible design system or internal UI component library

02Migrating legacy React components to use modern React 19 composition standards

03Refactoring a monolithic component that has dozens of optional boolean flags

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add microck/opendots-microck composition-patterns

For use in Claude.ai and ChatGPT