skills.rest
JoshCantCode
JoshCantCodeCOMMUNITY
Explore all skills by this author →
GitHub

building-components

Create accessible composable UI components with ARIA and focus management.

Updated Jan 14, 2026
Search Tags:#ui#architecture#accessibility#component#composition#design-tokens#slots
One-click install
npx skills add https://github.com/JoshCantCode/Stack --skill building-components-joshcantcode
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
catalinakarstulovic2-aicatalinakarstulovic2-ai

building-components

Build accessible, composable UI primitives with design tokens and npm publication workflows.

Community
Advanced
ogc-mapsogc-maps

add-map-component

Scaffold Storybook UI components with TSX, stories, and barrel exports.

Official
Intermediate
dylantarredylantarre
38

react

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

Community
Intermediate
tranhieutttranhieutt
70

radix-ui-design-system

Build accessible Radix UI design systems with headless primitives.

Community
Advanced