building-components

Create accessible composable UI components with Root, Item, Trigger, and Content patterns.

Updated Feb 26, 2026

Search Tags:#accessibility #composition #ui-components #polymorphism #data-slot #as-child

Ready to run

npx skills add https://github.com/Trimud/Sheep-Vampires-Yoghurt --skill building-components-trimud

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: building-components
Source: https://github.com/Trimud/Sheep-Vampires-Yoghurt/tree/main/.agents/skills/building-components
Command: npx skills add https://github.com/Trimud/Sheep-Vampires-Yoghurt --skill building-components-trimud

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This guide helps developers create modern, accessible, and composable UI components by breaking complex widgets into focused parts and applying patterns like Root/Item/Trigger/Content, asChild, and data-slot.

Core Features & Use Cases

Clear APIs built on Root, Item, Trigger, and Content to compose complex widgets.
Support for asChild and data-slot patterns to merge behaviors and target subcomponents.
Design-system-friendly patterns including polymorphism, design tokens, and consistent naming for scalable libraries.

Quick Start

Scaffold a basic Accordion using Root, Item, Trigger, and Content to learn the composable pattern.

Frequently Asked Questions about building-components

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

FAQPage Schema

How do I build accessible and composable UI components for a design system?▼

Build accessible, composable UI components by breaking complex widgets into focused parts using Root, Item, Trigger, and Content patterns to ensure scalable libraries with strong typing and consistent naming.

What is the asChild pattern for composing UI components?▼

The asChild pattern merges behaviors and targets subcomponents within composable UI components. It allows you to pass behavior down to a child element instead of rendering a wrapper, maintaining accessible DOM structures.

When do I need the data-slot attribute in UI component development?▼

Use the data-slot attribute when targeting subcomponents within composable UI components. It provides a stable hook for styling and behavior application, ensuring design-system integration without relying on brittle CSS selectors.

How do I structure an accordion using composable UI patterns?▼

Scaffold an accordion using composable UI patterns by composing Root, Item, Trigger, and Content components. This structure provides clear APIs to manage state and accessibility across complex widgets.

Does this approach support polymorphism for design-system integration?▼

Yes, polymorphism is supported for design-system integration. Composable UI components can render as different elements or components while maintaining strong typing, consistent naming, and accessible behaviors.

What is the best way to ensure strong typing in composable UI components?▼

Ensure strong typing in composable UI components by enforcing consistent APIs across Root, Item, Trigger, and Content patterns. This approach guarantees type safety and predictable behavior when building scalable libraries.