skills.rest
Hainrixz
HainrixzCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

building-components

Design accessible React UI components with ARIA and keyboard navigation.

184|61|Updated Mar 19, 2026
Search Tags:#documentation#accessibility#build#ui components#composability#design-tokens
One-click install
npx skills add https://github.com/Hainrixz/claude-webkit --skill building-components-hainrixz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: building-components
Source: https://github.com/Hainrixz/claude-webkit/tree/main/.claude/skills/building-components
Command: npx skills add https://github.com/Hainrixz/claude-webkit --skill building-components-hainrixz

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This guide helps developers craft modern, accessible, and composable UI components with clear patterns, shared state, and interoperable APIs, reducing boilerplate and ensuring consistency across design systems.

Core Features & Use Cases

  • Accessible by default: ARIA roles, keyboard navigation, and focus management baked into patterns for primitives and composite components.
  • Composable APIs and patterns: Root/Item/Trigger/Content and asChild/slots enable flexible composition and cross-component interoperability.
  • Tokenized design and documentation: guidance for design tokens, theming, and publish-ready component docs for registries, npm, or internal kits.

Quick Start

Create a minimal composable Accordion with Root, Item, Trigger, and Content to demonstrate shared state and ARIA wiring.

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 wiring and keyboard navigation?▼

To build accessible UI components, you enforce ARIA roles, keyboard navigation, and focus management directly within your React primitives, ensuring shared state and cross-component interoperability for composite patterns.

What is the asChild pattern and how does it enable composable React component APIs?▼

The asChild pattern, alongside slots, enables composable React component APIs by allowing flexible composition and cross-component interoperability without adding extra DOM nodes, reducing boilerplate and maintaining consistent component behavior.

How do I tokenize a design system and document UI components for an npm registry?▼

To tokenize a design system for an npm registry, you establish shared design tokens and theming rules, then generate publish-ready component documentation that ensures consistency and maintainability across your internal kits.

Can I use this to create composable Accordion primitives with shared state and ARIA?▼

Yes, you can create composable Accordion primitives using Root, Item, Trigger, and Content elements to demonstrate shared state management and proper ARIA wiring within React-based projects.

Does this approach require any specific external dependencies or UI libraries?▼

No specific external dependencies are required to implement these composable patterns, as the skill focuses on designing clear component APIs and accessible primitives directly within your React-based projects.

When should I not use composite patterns like Root, Item, and Trigger for UI components?▼

You should avoid composite patterns like Root, Item, and Trigger when a simple, self-contained UI component is sufficient, as overusing these composable APIs can introduce unnecessary boilerplate and complexity for basic use cases.

Related Skills

Explore More Software Engineering Skills→
nickstradnickstrad

tailwind-design-system

Build scalable design systems with Tailwind CSS and design tokens.

Community
Intermediate
yehezkieldioyehezkieldio

building-components

Guide engineers in building accessible, composable UI components with design-token support.

Community
Advanced
doanchienthangdevdoanchienthangdev
4

implementing-accessibility

Implement WCAG 2.1 AA compliant React interfaces with ARIA and keyboard navigation.

Community
Intermediate
AmidVoshakulAmidVoshakul

radix-ui-design-system

Build accessible design systems with Radix UI headless primitives.

Community
Advanced