skills.rest
Yahia89
Yahia89COMMUNITY
Explore all skills by this author →
GitHub

building-components

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

Updated Apr 7, 2026
Search Tags:#accessibility#compose#ui-components#design-tokens#polymorphism#data-slot#as-child
One-click install
npx skills add https://github.com/Yahia89/ordering-food --skill building-components-yahia89
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: building-components
Source: https://github.com/Yahia89/ordering-food/tree/main/.agents/skills/building-components
Command: npx skills add https://github.com/Yahia89/ordering-food --skill building-components-yahia89

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Designing scalable, accessible UI components is hard without a clear pattern. This skill provides a structured approach to building composable components (Root/Item/Trigger/Content) with accessibility in mind, enabling consistent APIs and clean composition across projects.

Core Features & Use Cases

  • Provides a composable component architecture with Root, Item, Trigger, Content to orchestrate state and UI.
  • Supports advanced patterns like asChild and data-slot for flexible composition and design system integration.
  • Includes guidance on naming conventions, focus management, and ARIA attributes to ensure accessibility.

Quick Start

Create a simple Accordion using Root, Item, Trigger, and Content to verify 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 composable UI components with accessible patterns?▼

To build composable UI components, structure your architecture using Root, Item, Trigger, and Content elements to orchestrate state and UI while integrating ARIA attributes and focus management to ensure accessibility.

What is the asChild pattern and how does it work for component composition?▼

The asChild pattern enables flexible component composition by allowing a component to pass its props and state to a child element, avoiding DOM duplication and supporting clean design system integration.

How do I use data-slot attributes for design token styling?▼

You use data-slot attributes to establish styling hooks within your component architecture, enabling precise targeting for token-driven theming and consistent visual integration across large UI libraries.

Can I apply component polymorphism within a token-driven design system?▼

Yes, component polymorphism is supported and applicable across token-driven theming systems, allowing you to render components as different elements while maintaining consistent APIs and accessibility standards.

What's the best way to structure an accessible accordion component?▼

The best way to structure an accessible accordion is using the composable Root, Item, Trigger, and Content architecture, which orchestrates open and closed states while managing focus and ARIA attributes.

Are there limitations when scaling composable components across large systems?▼

Scaling composable components requires strict adherence to naming conventions and structured state orchestration to prevent API fragmentation, though the approach is explicitly designed for system-at-scale UI libraries.

Related Skills

Explore More Software Engineering Skills→
wjyugutouwjyugutou

vueuse-functions

Extract structured metadata from SKILL.md files and optional resource directories.

Community
Basic
Happy-HorizonHappy-Horizon

building-components

Define accessible, composable UI components with Root/Item/Trigger/Content patterns for React-based projects.

Official
Advanced
Shaarav4795Shaarav4795

ui-design-system

Architect token-driven UI design systems for Tailwind CSS, Radix UI, and shadcn/ui.

Community
Advanced
masumi-networkmasumi-network
11

building-components

Guide development of accessible, composable UI components with semantic HTML and ARIA.

Official
Advanced