composing-components

Design reusable React 19 UI components using composition patterns.

Updated Nov 21, 2025

Search Tags:#react #composition #render-props #children #compound

Ready to run

npx skills add https://github.com/djankies/claude-configs --skill composing-components

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: composing-components
Source: https://github.com/djankies/claude-configs/tree/main/react-19/skills/composing-components
Command: npx skills add https://github.com/djankies/claude-configs --skill composing-components

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill teaches component composition patterns in React 19, including Children, Compound Components, and Render Props to design reusable APIs.

Core Features & Use Cases

Children prop for simple containment.
Compound components for coordinated state with Context.
Render props for flexible rendering logic.
Prefer composition over heavy prop configurations.

Quick Start

Build a simple Card component using children with optional header and footer slots.

Frequently Asked Questions about composing-components

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I structure reusable React components to avoid prop drilling?▼

Component composition patterns like Compound Components and Render Props eliminate prop drilling by passing data through Context instead of layering props through intermediate components. React 19's use() API simplifies Context consumption within composed structures.

What's the difference between Children, Compound Components, and Render Props?▼

Children prop provides simple containment for flexible layouts. Compound Components coordinate state across child elements using Context, ideal for Tabs and Accordions. Render Props pass rendering logic as functions, enabling maximum flexibility for custom rendering scenarios.

How do I build a Compound Component like Tabs or Accordion in React 19?▼

Create a parent component that manages shared state and exposes it via Context. Define child components that consume that Context to coordinate their behavior. Document required child component names and use React 19's use() API for clean Context access throughout the composition.

When should I use composition over complex prop APIs?▼

Prefer composition when components have many optional features or need coordinated behavior across children. Composition keeps component APIs clean and maintainable, reduces prop combinations, and makes required relationships between parts explicit to users.

Can I apply composition patterns to existing React components?▼

Yes. Refactor components by extracting rendering logic into Compound or Render Props structures. Start with simpler patterns like Children slots, then graduate to Compound Components if you need coordinated state across multiple child elements.