skills.rest
Aadi-110i
Aadi-110iCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

building-components

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

Updated Jul 28, 2026
Search Tags:#typescript#accessibility#react#components#design tokens#composition#npm publishing
One-click install
npx skills add https://github.com/Aadi-110i/PEP-PROJECT --skill building-components-aadi-110i
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: building-components
Source: https://github.com/Aadi-110i/PEP-PROJECT/tree/main/skills/building-components
Command: npx skills add https://github.com/Aadi-110i/PEP-PROJECT --skill building-components-aadi-110i

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building reusable UI components involves many decisions—accessibility, composition patterns, state management, styling, and distribution—that are easy to get wrong. This Skill provides structured guidance covering the full lifecycle of modern component development so you avoid common pitfalls like prop explosion, inaccessible markup, and fragile styling APIs. ## Core Features & Use Cases - Accessibility Patterns: Implement ARIA roles, keyboard navigation, focus trapping, live regions, and WCAG-compliant contrast for modals, dropdowns, tabs, and forms. - Composition & Polymorphism: Apply compound component patterns, the asChild/Slot pattern, controlled vs uncontrolled state, and data-state/data-slot attributes for declarative styling. - Distribution & Documentation: Publish components via npm packages, shadcn-style registries, or marketplaces like 21st.dev, and write complete component documentation. - Use Case: You are building a design system in React with Tailwind CSS and need to create an accessible Dialog component with composable subcomponents, design token theming, and registry distribution—this Skill walks you through each decision with reference implementations. ## Quick Start Use the building-components skill to help me create an accessible, composable Accordion component in React with TypeScript and Tailwind.

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 React components?▼

Start with semantic HTML elements, then add ARIA roles, states, and properties only where native semantics fall short. Ensure full keyboard navigation, visible focus indicators, live regions for dynamic content, and WCAG-compliant color contrast ratios of 4.5:1 for normal text.

What is the difference between asChild and the as prop in React components?▼

The as prop explicitly specifies the rendered element type, while asChild uses Radix UI's Slot to merge props and behavior onto the child element. asChild offers better prop merging, ref forwarding, and event handler composition, but requires the @radix-ui/react-slot dependency.

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

Npm packages provide version management, automatic dependency resolution, and simple installation but hide source code from consumers. Registries distribute source directly into the user's repository, favoring ownership and customization over centralized version control.

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

Use data-state attributes to expose component state declaratively, then style with Tailwind arbitrary variants like data-[state=open]:opacity-100. This avoids prop explosion and works with any CSS approach while keeping states inspectable in DevTools.

Why does Tailwind not apply styles from my npm component package?▼

Tailwind only scans your project files by default and ignores node_modules. Add an @source directive pointing to your package in the consuming app's CSS file so Tailwind generates the classes your components use.

When should I use controlled vs uncontrolled component state?▼

Use controlled state when the parent must own the source of truth and react to changes via onChange callbacks. Use uncontrolled state with defaultValue for simpler cases, and support both patterns for flexible input components.

Related Skills

Explore More Software Engineering Skills→
Mischio95Mischio95
1

shadcn-ui

Set up shadcn/ui components and forms with React Hook Form and Zod.

Community
Advanced
eleva-labseleva-labs

test

Set up and run frontend tests with Jest, Vitest, Playwright, or Cypress.

Official
Intermediate
Javeria-JavaidJaveria-Javaid

rayden-use

Builds and audits Rayden UI components and screens in Figma via Figma MCP with design token enforcement.

Community
Advanced
richardadonnellrichardadonnell
45

radix-ui-design-system

Build accessible React design systems with Radix UI primitives.

Community
Advanced