How does this skill help with design systems?

It provides the structural logic and TypeScript boilerplate needed to create modular primitives—like Tabs, Cards, or Inputs—that are easy for other developers to extend and customize.

Does this skill support TypeScript?

Yes, the skill emphasizes strict typing for props, refs, and polymorphic elements to ensure end-to-end type safety across your entire component library.

What is the 'Composition over Configuration' principle?

It is the practice of building components that can be nested and combined via children/slots rather than adding a new prop for every single visual or functional variation.

What are React Component Patterns?

React Component Patterns are architectural best practices, such as Compound Components and Render Props, that prioritize composition over configuration to build flexible and maintainable UI.

When should I use Compound Components?

Compound Components are ideal when you have a group of components that need to share state and work together as a unit, such as a Select dropdown or a Tab navigation system.

React Component Patterns

Name: React Component Patterns
Author: IvanTorresEdge

byIvanTorresEdge

Design Tools

Implements industry-standard React composition patterns to build flexible, reusable, and type-safe UI component libraries.

About

This skill empowers developers to move beyond prop-drilling and configuration overload by applying advanced React architecture patterns. It provides ready-to-use implementations for Compound Components, Render Props, Slot patterns, and Polymorphic Components. By adhering to the 'Composition over Configuration' principle, the skill helps architect scalable UI systems and maintainable APIs that leverage TypeScript for a superior developer experience, making it ideal for building robust design systems or complex interface elements.

Key Features

Standardizes ref forwarding and TypeScript prop interfaces for production-grade stability
Implements Context-based Compound Components for cohesive sub-component logic
Supports Slot patterns for creating highly customizable layout containers and headers
0 GitHub stars
Generates Polymorphic Components that adapt underlying HTML elements via the 'as' prop
Provides Render Prop patterns to expose internal component state to consumers

Use Cases

Building a shared design system or component library for enterprise-scale applications
Designing flexible UI primitives like Tabs, Modals, and Accordions that require shared internal state
Refactoring complex, monolithic components into modular and composable units

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ivantorresedge/molcajete.ai component-patterns

For use in Claude.ai and ChatGPT

Download Skill

GitHub