skills.rest
catalinakarstulovic2-ai
catalinakarstulovic2-aiCOMMUNITY
Explore all skills by this author →
GitHub

building-components

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

Updated Jun 9, 2026
Search Tags:#documentation#publishing#accessibility#patterns#composition#ui-components#design-tokens
One-click install
npx skills add https://github.com/catalinakarstulovic2-ai/hotel --skill building-components-catalinakarstulovic2-ai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: building-components
Source: https://github.com/catalinakarstulovic2-ai/hotel/tree/main/.claude/skills/building-components
Command: npx skills add https://github.com/catalinakarstulovic2-ai/hotel --skill building-components-catalinakarstulovic2-ai

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Building modern UI components that are accessible by default and highly composable, reducing time-to-delivery and ensuring consistency across design systems.

  • Accessible by default ensures semantic HTML, proper ARIA attributes, and keyboard navigation.
  • Composable APIs enable assembling complex widgets from primitives using slots, render props, and composition patterns.
  • Design tokens & theming promote token-driven styling and design-system alignment across products.

Core Features & Use Cases

  • Provides a set of UI primitives and patterns (including accessibility considerations) that can be composed into blocks, dialogs, menus, and more.
  • Demonstrates design-token driven theming, publication workflows (npm/registry), and component documentation best practices.
  • Supports publishing to registries or npm and writing thorough component documentation for DX.

Quick Start

Create a minimal composable Button following the guide to seed your design system.

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 that support composition and theming?▼

To build accessible UI components with composition and theming, you use semantic HTML, proper ARIA attributes, and keyboard navigation alongside design tokens to ensure consistency across your design system.

What's the best way to structure composable APIs for front-end design systems?▼

The best way to structure composable APIs for front-end design systems is assembling complex widgets from primitives using slots, render props, and composition patterns that enable flexible UI assembly.

How do I publish UI component libraries to npm or a registry with documentation?▼

You publish UI component libraries to npm or a registry by following publication workflows that integrate thorough component documentation best practices, ensuring optimal developer experience and distribution.

Can I use design tokens to drive theming across multiple UI components?▼

Yes, you can use design tokens to drive theming across multiple UI components, promoting token-driven styling and design-system alignment to maintain visual consistency across different products.

Does building composable UI components require handling accessibility manually?▼

Building composable UI components does not require handling accessibility manually if the primitives are accessible by default, incorporating semantic HTML, ARIA attributes, and keyboard navigation out of the box.

Why does component composition fail when primitives lack accessible HTML structure?▼

Component composition fails when primitives lack accessible HTML structure because assembling complex widgets from inaccessible elements breaks keyboard navigation, ARIA attribute relationships, and overall design-system accessibility.

Related Skills

Explore More Software Engineering Skills→
viably-labsviably-labs

design-to-tailwind

Convert Figma, Sketch, and Penpot designs into semantic Tailwind HTML structures.

Official
Intermediate
yehezkieldioyehezkieldio

building-components

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

Community
Advanced
remiconnessonremiconnesson

building-components

Guide building accessible, composable UI components with ARIA and design tokens.

Community
Advanced
trycompaitrycompai
1.8k

ui

Enforce design-system tokens, theming, and accessible component patterns in React/TS frontend development.

Official
Intermediate