skills.rest
yehezkieldio
yehezkieldioCOMMUNITY
Explore all skills by this author →
𝕏@yhezkieldioGitHub

building-components

Guides building accessible, composable React UI components with design tokens and distribution patterns.

Updated Aug 15, 2025
Search Tags:#accessibility#react#design system#composition#tailwind#ui components#npm publishing
One-click install
npx skills add https://github.com/yehezkieldio/topaz --skill building-components-yehezkieldio
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: building-components
Source: https://github.com/yehezkieldio/topaz/tree/main/.agents/skills/building-components
Command: npx skills add https://github.com/yehezkieldio/topaz --skill building-components-yehezkieldio

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building reusable UI components that are accessible, composable, and properly distributable requires deep knowledge of ARIA patterns, keyboard navigation, polymorphism, and packaging strategies that most developers implement inconsistently. ## Core Features & Use Cases - Accessibility Guidance: Covers semantic HTML, ARIA roles and states, keyboard navigation, focus management, live regions, and WCAG contrast requirements with concrete React code examples. - Composition Patterns: Explains compound components, the asChild pattern, polymorphic as props, controlled vs uncontrolled state, and data-attribute styling (data-state, data-slot) used by Radix UI and shadcn/ui. - Distribution & Documentation: Details publishing components via npm, shadcn-style registries, and marketplaces like 21st.dev, plus how to write component documentation. - Use Case: When building a new Dialog or Dropdown component for a design system, consult this Skill to implement correct focus trapping, ARIA attributes, and a composable API before publishing it to a registry. ## Quick Start Use the building-components skill to help me create an accessible, composable Accordion component with proper ARIA attributes and keyboard navigation.

Frequently Asked Questions about building-components

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build an accessible React component?▼

Start with semantic HTML elements, then add keyboard navigation, ARIA roles and states, and visible focus indicators. Manage focus trapping for modals, use aria-live regions for dynamic content, and ensure 4.5:1 color contrast for normal text.

What is the difference between the as prop and asChild pattern?▼

The as prop explicitly specifies the rendered element type, while asChild with Radix UI's Slot merges props onto the child element automatically. asChild offers better prop merging, ref forwarding, and event handler composition for component libraries.

Should I publish components to npm or a shadcn registry?▼

npm packages provide version management and simple installation but hide source code from consumers. Registries distribute copy-paste source code, giving users full ownership and customization at the cost of manual update management.

How do I style component states without extra className props?▼

Expose state through data-state attributes like data-state="open" and style them with Tailwind arbitrary variants such as data-[state=open]:opacity-100. This keeps a single className prop and works with any CSS approach.

Why does Tailwind not style components installed from npm?▼

Tailwind only scans your project files, not node_modules, so package classes are missing from the generated CSS. Add an @source directive pointing to the package path in your global CSS to include its classes.

Related Skills

Explore More Software Engineering Skills→
bilacchibilacchi

tailwind-design-system

Build Tailwind CSS design systems with design tokens, CVA component variants, and dark mode theming.

Community
Intermediate
pedronauckpedronauck
601

building-components

Guides building accessible, composable React UI components with design tokens and distribution workflows.

Community
Intermediate
huhuimike85huhuimike85

accessibility-checker

Check UI components for WCAG 2.1 accessibility compliance.

Community
Intermediate
tranhieutttranhieutt
70

radix-ui-design-system

Build accessible Radix UI design systems with headless primitives.

Community
Advanced