skills.rest
quanngynx
quanngynxCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

building-components

Build accessible composable UI components with TypeScript, Tailwind, and CVA styling.

Updated Mar 27, 2026
Search Tags:#accessibility#design tokens#composition#ui components#aria#react patterns#tailwind styling
One-click install
npx skills add https://github.com/quanngynx/GDGO-2026.Servexa-Warranty-AI --skill building-components-quanngynx
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: building-components
Source: https://github.com/quanngynx/GDGO-2026.Servexa-Warranty-AI/tree/main/servexa-warranty-ai/.agents/skills/building-components
Command: npx skills add https://github.com/quanngynx/GDGO-2026.Servexa-Warranty-AI --skill building-components-quanngynx

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you design and build modern UI components that are accessible, reusable, and easy to customize—so you don’t end up with brittle APIs, inaccessible interactions, or unmaintainable styling patterns.

Core Features & Use Cases

  • Accessibility-first component design: semantic HTML, keyboard navigation, ARIA patterns, focus management, and common pitfalls.
  • Composable component architecture: compound/compound subcomponent patterns, clean naming conventions, and ergonomic APIs.
  • Polymorphism & composition patterns: asChild and as approaches for element flexibility while preserving behavior and event handling.
  • Scalable styling systems: Tailwind-based class composition using cn, clsx, tailwind-merge, and CVA-driven variants.
  • State & theming foundations: controlled vs uncontrolled state patterns, data-state styling, and semantic design tokens.
  • Docs-ready distribution practices: guidance for component documentation, registries, npm publishing, and marketplaces.

Quick Start

Use the building-components skill to plan an accessible, composable component API and styling approach for your new UI component.

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

Build accessible UI components by applying semantic HTML, ARIA patterns, and focus management to ensure correct keyboard navigation and screen reader interactions.

What's the best way to style React components using Tailwind and CVA variants?▼

Style React components using Tailwind with CVA-driven variants and class merging tools like clsx and tailwind-merge to create scalable, maintainable styling systems.

How does the asChild polymorphism pattern work for composable React components?▼

The asChild polymorphism pattern passes component behavior and event handling to a child element, preserving composition flexibility without rendering extra DOM nodes.

When should I use controlled vs uncontrolled state patterns in UI components?▼

Use controlled state when parent components need to manage data explicitly, and uncontrolled state when the component maintains its own internal state for simpler interactions.

Can I use semantic design tokens for consistent component theming?▼

Use semantic design tokens to define consistent theming foundations, enabling predictable data-state styling and maintainable visual component architecture.

Does this approach support component documentation and npm registry publishing?▼

This approach supports docs-ready distribution practices, providing guidance for component documentation, npm publishing, and marketplace registry integration.

Related Skills

Explore More Design & Creative Skills→
Impertio-StudioImpertio-Studio

shadcn-core-stack

Diagnose shadcn-ui component bugs in className overrides, cva variants, and Radix imports.

Official
Advanced
MaxStrootmannMaxStrootmann

building-components

Guides design and implementation of accessible, composable UI components for npm.

Community
Advanced
viktorbezdekviktorbezdek
10

frontend-design

Create accessible, responsive UI design systems with Tailwind CSS, Radix UI, and shadcn/ui.

Community
Advanced
nilecuinilecui
27

using-shadcn-ui

Integrate shadcn/ui components and shadcnblocks.com blocks into React projects.

Community
Intermediate