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

Ready to run

npx skills add https://github.com/Hainrixz/claude-webkit --skill building-components-hainrixz

💬 Prompt for ChatGPT / Claude Chat▼

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.