skills.rest
iBz-04
iBz-04COMMUNITY
Explore all skills by this author →
WebsiteGitHub

building-components

Design accessible, composable UI components with ARIA, slots, and data-state styling.

63|12|Updated Mar 9, 2026
Search Tags:#accessibility#composition#ui components#aria#asChild#data-slot#data-state
One-click install
npx skills add https://github.com/iBz-04/gloamy --skill building-components-ibz-04
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: building-components
Source: https://github.com/iBz-04/gloamy/tree/main/.agents/skills/building-components
Command: npx skills add https://github.com/iBz-04/gloamy --skill building-components-ibz-04

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you design and implement modern UI components that are accessible, composable, and maintainable so you avoid brittle APIs, inconsistent styling, and common accessibility pitfalls.

Core Features & Use Cases

  • Accessible-first component design: Apply semantic HTML, keyboard navigation, focus management, ARIA roles/states/properties, and color/contrast best practices.
  • Composable component architecture: Use compound components, context-driven state sharing, slots/children patterns, and naming conventions that scale with complexity.
  • Polymorphism and prop-safe flexibility: Choose between as and asChild patterns (Slot-based prop merging) to support custom rendered elements while preserving behavior and refs.
  • Declarative styling for state and structure: Use data-state for visual states and data-slot for stable targeting in Tailwind/CSS without prop explosion.
  • Documentation-ready guidance: Follow documentation structure expectations (overview, demos, install, API, accessibility notes, changelog) so components are easy to adopt.

Quick Start

Ask the AI to help you implement a new accessible, composable component API and include how to document ARIA/keyboard behavior, data-state/data-slot styling hooks, and any polymorphism needs.

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 ARIA and keyboard support?▼

Build accessible UI components by applying semantic HTML, keyboard navigation, focus management, and ARIA roles/states/properties to ensure inclusive interaction patterns and maintainable component architecture.

What is the difference between as and asChild polymorphism in component design?▼

The `as` pattern directly renders a custom element, while `asChild` uses Slot-based prop merging to pass behavior and refs to a child element, preserving component functionality without adding extra DOM nodes.

How do I use data-state and data-slot for declarative styling in Tailwind?▼

Use `data-state` attributes to trigger visual state changes and `data-slot` attributes for stable CSS targeting, preventing prop explosion and enabling declarative styling within your Tailwind or CSS architecture.

What's the best way to structure composable component APIs using compound components?▼

Structure composable component APIs by using compound components, context-driven state sharing, and slots/children patterns, adopting naming conventions that scale effectively as component complexity increases.

Can I use this approach to document accessibility and keyboard behavior for component libraries?▼

Yes, this approach supports documentation-ready guidance by defining structure expectations including overviews, demos, installation, API references, and specific accessibility notes for keyboard and ARIA behavior.

When should I avoid using asChild polymorphism in UI components?▼

Avoid using `asChild` polymorphism when your component requires direct DOM manipulation of a wrapper element, as Slot-based merging passes props directly to the child and eliminates the intermediate node.

Related Skills

Explore More Design & Creative Skills→
traylinxtraylinx
2

web-artifacts-builder

Bundle React, Tailwind, and shadcn/ui artifacts into a single HTML file.

Official
Advanced
espensevespensev

frontend-patterns

Apply reusable React and Next.js component patterns for scalable UI architectures.

Community
Advanced
BrunoAMSilvaBrunoAMSilva

composition-pattern

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

Community
Intermediate
AmidVoshakulAmidVoshakul

radix-ui-design-system

Build accessible design systems with Radix UI headless primitives.

Community
Advanced