Is this skill suitable for building design systems?

Absolutely. These patterns are based on Vercel's best practices for building enterprise-grade component libraries that need to support diverse UI requirements.

What is the primary benefit of these React composition patterns?

The primary benefit is scalability. By using composition instead of passing dozens of boolean props, you create flexible APIs that are easier to test, document, and extend without breaking existing functionality.

How does this skill handle React 19 updates?

It includes specific rules for React 19, such as utilizing the new 'use()' hook instead of 'useContext()' and moving away from 'forwardRef' as the standard for ref forwarding.

Can this skill help with existing tech debt?

Yes, it is specifically designed for refactoring 'prop-heavy' components into cleaner architectures like compound components and explicit variants.

React Composition Patterns

Name: React Composition Patterns
Author: MythologIQ

byMythologIQ

0•

Design Tools

Implements scalable React component architectures and composition patterns to eliminate boolean prop proliferation and improve maintainability.

This skill provides a comprehensive framework for building flexible, production-grade React components using advanced composition patterns. It guides developers in refactoring bloated components by implementing compound components, lifting state into providers, and decoupling implementation details from the component interface. By moving away from restrictive boolean flags toward assembly-based architectures, this skill ensures that component libraries remain easy to navigate and extend for both human developers and AI agents, with full support for React 19 API modernizations.

Key Features

01Compound component pattern implementation

02Standardized component architecture rules

03Elimination of boolean prop proliferation

040 GitHub stars

05React 19 API migration and 'use()' patterns

06Decoupled state management via context interfaces

Use Cases

01Refactoring complex UI components with excessive conditional logic

02Modernizing legacy React codebases for React 19 compatibility

03Building and scaling robust, reusable design systems and component libraries

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add mythologiq/zo-qore composition-patterns

For use in Claude.ai and ChatGPT

Key Features

01Compound component pattern implementation

02Standardized component architecture rules

03Elimination of boolean prop proliferation

040 GitHub stars

05React 19 API migration and 'use()' patterns

06Decoupled state management via context interfaces

Use Cases

01Refactoring complex UI components with excessive conditional logic

02Modernizing legacy React codebases for React 19 compatibility

03Building and scaling robust, reusable design systems and component libraries

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add mythologiq/zo-qore composition-patterns

For use in Claude.ai and ChatGPT