skills.rest
BrunoAMSilva
BrunoAMSilvaCOMMUNITY
Explore all skills by this author →
GitHub

composition-pattern

Design UI component APIs with children, named slots, and polymorphic rendering.

Updated Apr 14, 2026
Search Tags:#ui#components#composition#headless#polymorphic#compound-components#slots
One-click install
npx skills add https://github.com/BrunoAMSilva/my-config --skill composition-pattern
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: composition-pattern
Source: https://github.com/BrunoAMSilva/my-config/tree/main/coding/skills/composition-pattern
Command: npx skills add https://github.com/BrunoAMSilva/my-config --skill composition-pattern

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Many UI components become rigid and hard to reuse when they expose numerous configuration props for content; this Skill advocates accepting dynamic content so consumers control composition, improving flexibility and extensibility across use sites.

Core Features & Use Cases

  • Children and Slots Over Props: Prefer default children and named slots instead of enumerating content props to avoid prop explosion and make components adaptable.
  • Named Slots & Compound Components: Support multiple distinct content regions and related subcomponents that share implicit state via context or provide/inject for cohesive APIs.
  • Headless & Polymorphic Patterns: Separate behavior from styling so consumers can supply UI, and allow as/tag polymorphism so the same component can render different semantic elements.
  • Use Case: Build a Card, Modal, or Tabs system where consumers supply header, body, and footer content or attach compound subcomponents without changing the parent API.

Quick Start

Implement a Card component that accepts default children for body, named slots or props for header and footer, shares state through context for compound subcomponents, and exposes headless hooks plus an as/tag prop for polymorphic rendering.

Frequently Asked Questions about composition-pattern

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

FAQPage Schema
How do I avoid prop explosion when building reusable UI components?▼

To avoid prop explosion, accept default children and named slots instead of rigid configuration props, allowing consumers to control composition dynamically and improving component flexibility across use sites.

What is the compound component pattern and how does it share state?▼

The compound component pattern uses context or provide/inject to share implicit state across related subcomponents, enabling cohesive APIs where consumers attach distinct content regions without altering the parent component.

How do I separate behavior from styling in headless UI components?▼

Separate behavior from styling by implementing headless behavior separation, exposing hooks that manage logic while allowing consumers to supply their own UI rendering for maximum flexibility.

Can I render different semantic elements using a polymorphic component?▼

Yes, by using polymorphic as/tag support, the same UI component can render different semantic elements, enabling consumers to choose the appropriate HTML tag while maintaining consistent component behavior.

When should I use named slots over default children in component design?▼

Use named slots when a UI component requires multiple distinct content regions like header, body, and footer, allowing consumers to target specific areas while avoiding rigid configuration props.

What's the best way to build a flexible Modal or Tabs component API?▼

Build flexible Modal or Tabs APIs by combining named slots for distinct regions, compound state sharing via context, headless behavior separation, and polymorphic as/tag support for semantic rendering.

Related Skills

Explore More Software Engineering Skills→
victorgarciaesgivictorgarciaesgi
490

vue

Apply Vue 3 Composition API patterns with TypeScript and script setup.

Community
Basic
yogi100xyogi100x
1

Component Architecture Patterns

Provide React architecture patterns for compound, headless, slot, and polymorphic components.

Community
Advanced
KurrawongKurrawong
1

reka-ui

Provide headless Vue 3 component primitives with WAI-ARIA compliance.

Official
Advanced
HallinnaHallinna

react-composition-2026

Refactor React components using composable children and context-based compound components.

Community
Intermediate