skills.rest
yuehanjohn
yuehanjohnCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

building-components

Design accessible, composable UI components with TypeScript typings and keyboard navigation.

Updated Mar 27, 2026
Search Tags:#accessibility#react#build#composition#ui-components#data-slot#as-child
One-click install
npx skills add https://github.com/yuehanjohn/enfuce-6 --skill building-components-yuehanjohn
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: building-components
Source: https://github.com/yuehanjohn/enfuce-6/tree/main/.agents/skills/building-components
Command: npx skills add https://github.com/yuehanjohn/enfuce-6 --skill building-components-yuehanjohn

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Building scalable, accessible UI components is hard without a cohesive pattern; this skill provides a composable, accessible set of primitives to accelerate UI library development.

Core Features & Use Cases

  • Composition-driven primitives (Root, Item, Trigger, Content) enable breaking complex widgets into small, reusable parts.
  • Accessibility-first design with keyboard navigation, ARIA attributes, and focus management baked in.
  • Pattern support for asChild, polymorphism, and data-slot to integrate with design systems and enable stable styling.

Quick Start

Import the Root, Item, Trigger, and Content components and assemble a simple accordion in your app.

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 UI components with proper keyboard navigation and ARIA attributes?▼

Build accessible UI components by using composition-driven primitives like Root, Item, Trigger, and Content that bake in keyboard navigation, ARIA attributes, and focus management for scalable design-system libraries.

What is the asChild or Slot polymorphism pattern in React component libraries?▼

The asChild or Slot polymorphism pattern passes props to child elements without rendering a wrapper DOM node, enabling flexible composition and stable styling in React component libraries.

How do I implement data-slot attributes for accessible design system components?▼

Implement data-slot attributes to provide stable styling and integration hooks in design system components, ensuring consistent accessible patterns and focus management across composable UI primitives.

Does this React UI component pattern work without external dependencies?▼

Yes, the composition-driven UI component pattern works without external dependencies, relying on TypeScript typings, ARIA attributes, and polymorphic Slot primitives to establish accessible web app behaviors.

What's the best way to structure composable React components for a design system?▼

Structure composable React components by breaking complex widgets into small, reusable parts like Root, Item, Trigger, and Content, prioritizing accessibility-first design with focus management and keyboard navigation.

How do I manage focus and keyboard navigation in accessible React UI components?▼

Manage focus and keyboard navigation by leveraging accessibility-first composition patterns with built-in ARIA attributes and TypeScript typings to ensure robust interactions in reusable UI primitives.

Related Skills

Explore More Software Engineering Skills→
dylantarredylantarre
38

react

Create token-driven React components with TypeScript and ARIA compliance.

Community
Intermediate
SlanyCukrSlanyCukr
2

radix-ui

Provides accessible, unstyled React primitives with built-in ARIA and keyboard navigation for building UI components.

Community
Intermediate
mrodrigues1mrodrigues1

web-component-design

Design reusable, accessible UI component libraries for React, Vue, or Svelte.

Community
Advanced
Happy-HorizonHappy-Horizon

building-components

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

Official
Advanced