skills.rest
Trimud
TrimudCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/Trimud/Sheep-Vampires-Yoghurt --skill building-components-trimud
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
ChoreShoreChoreShore

vue

Build token-driven Vue 3 components with the Composition API and TypeScript.

Official
Intermediate
Asymmetric-alAsymmetric-al
1

building-components

Build composable, accessible UI components with design tokens and documentation.

Official
Advanced
dylantarredylantarre
38

compound-components

Build accessible React UI primitives with compound component patterns.

Community
Advanced
blacktwistblacktwist
402

content-calendar-sms

Map content pillars to days, platforms, and formats in a structured calendar.

Official
Advanced