building-components

Name: building-components
Availability: InStock
Author: Josh

Create accessible composable UI components with ARIA and focus management.

Updated Jan 14, 2026

Search Tags:#ui #architecture #accessibility #component #composition #design-tokens #slots

Ready to run

npx skills add https://github.com/JoshCantCode/Stack --skill building-components-joshcantcode

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: building-components
Source: https://github.com/JoshCantCode/Stack/tree/main/.opencode/skills/building-components
Command: npx skills add https://github.com/JoshCantCode/Stack --skill building-components-joshcantcode

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Streamlines the creation of accessible, well-structured UI components by providing a design-system oriented blueprint.

Core Features & Use Cases

Component decomposition patterns (Root, Item, Trigger, Content) to enable flexible composition.
Accessibility and focus-management best practices, ARIA attributes, and keyboard navigation guidance.
Theming and design-token integration with composable APIs and documentation scaffolding.

Quick Start

Create a new UI component module following the Root/Item/Trigger/Content pattern and reference the materials in references to ensure accessibility and composability.

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 semantics?▼

To build accessible UI components, implement ARIA semantics, focus management, and keyboard navigation guidance using a design-system oriented blueprint. This framework provides the functional requirements needed to ensure your React component library meets accessibility standards.

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

Creating composable React components involves using decomposition patterns like Root, Item, Trigger, and Content. This approach enables flexible composition with slot-based APIs, making it easier to build scalable component libraries and design system primitives.

How do I integrate design tokens into a UI component library?▼

Integrating design tokens requires combining them with composable APIs and documentation scaffolding. This framework streamlines theming and design-token integration to ensure your UI components maintain consistency across your design system.

Can I use this component architecture for any React project?▼

Yes, this component architecture is applicable across React projects, especially when designing primitives, patterns, and tokens. It is particularly suited for design systems and component libraries requiring accessible, composable structures.

How does slot-based composition work for UI component patterns?▼

Slot-based composition works by decomposing UI components into Root, Item, Trigger, and Content patterns. This functional requirement enables flexible assembly of component parts, allowing developers to build complex interfaces from composable primitives.