Skills
.Work. You
Rest

composition-patterns

Community

Build scalable React components.

Software Engineering#state management#react#patterns#composition#component architecture#compound components
AuthorKaakati
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill addresses the complexity of managing React components, particularly those with numerous boolean props or intricate internal states, by promoting scalable composition patterns.

Core Features & Use Cases

  • Component Refactoring: Simplifies components bloated with boolean props.
  • Component Library Development: Establishes a robust foundation for reusable UI elements.
  • Compound Components: Guides the creation of components that manage their own state and expose an API through context.
  • Use Case: Refactor a complex Modal component that currently uses isOpen, showCloseButton, showTitle, isEditable props into a compound component structure where Modal.Header, Modal.Body, and Modal.Footer can be composed independently.

Quick Start

Apply composition patterns to refactor the Composer component to avoid boolean prop proliferation.

Dependency Matrix

Required Modules

None required

Components

referencesscripts

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: composition-patterns
Download link: https://github.com/Kaakati/sdh-claude-skills/archive/main.zip#composition-patterns

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.