skills.rest
abraham-yusuf
abraham-yusufCOMMUNITY
Explore all skills by this author →
𝕏@bram0511GitHub

building-components

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

2|1|Updated Apr 17, 2025
Search Tags:#typescript#accessibility#react#components#design tokens#composition#ui library
One-click install
npx skills add https://github.com/abraham-yusuf/pernikahan-web --skill building-components-abraham-yusuf
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: building-components
Source: https://github.com/abraham-yusuf/pernikahan-web/tree/main/.agents/skills/building-components
Command: npx skills add https://github.com/abraham-yusuf/pernikahan-web --skill building-components-abraham-yusuf

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building reusable UI components that are accessible, composable, and properly typed is hard to get right consistently. This Skill provides structured guidance covering accessibility, composition patterns, polymorphism, state management, styling, and distribution so components meet modern standards from the start. ## Core Features & Use Cases - Accessibility Patterns: Reference implementations for ARIA attributes, keyboard navigation, focus management, live regions, and WCAG contrast requirements for modals, dropdowns, tabs, and forms. - Composition & Polymorphism: Guidance on compound components, the asChild pattern with Radix Slot, the as prop, controlled vs uncontrolled state, and TypeScript typing for polymorphic components. - Styling & Distribution: Design token architecture with CSS variables, data-state and data-slot attribute patterns for Tailwind styling, plus publishing via npm, shadcn-style registries, and marketplaces. - Use Case: When building a new Dialog component for a design system, consult the accessibility reference for focus trapping and ARIA patterns, the composition reference for Root/Trigger/Content structure, and the docs reference for documentation requirements. ## Quick Start Ask the AI to help you build an accessible, composable React component such as an accordion or dialog following modern component library patterns.

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 modal dialog in React?▼

Use role="dialog" with aria-modal="true", trap focus within the modal, close on Escape, and restore focus to the triggering element on close. The accessibility reference provides a complete implementation including focus trapping and body scroll locking.

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

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

How do I style component states with Tailwind CSS?▼

Expose state via data-state attributes (e.g., data-state="open") and style them with Tailwind arbitrary variants like data-[state=open]:opacity-100. This avoids prop explosion from state-specific className props and keeps styling declarative.

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

npm packages provide version management and simple installation but hide source code from consumers. Registries distribute source directly for full customization and ownership. Choose based on whether users need to modify component internals.

Why is my polymorphic component losing TypeScript type safety?▼

Type safety breaks when using any or overly permissive types. Use generic PolymorphicProps with React.ElementType so props are inferred from the rendered element, making invalid props like href on a div a compile-time error.

Related Skills

Explore More Software Engineering Skills→
portalshqportalshq
5

design-system-patterns

Build design systems with tokens, theming infrastructure, and component architecture patterns.

Official
Advanced
FoodshareclubFoodshareclub

building-components

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

Official
Advanced
PrasadTelasulaPrasadTelasula

component-testing

Test React components with React Testing Library and Playwright for frontend correctness.

Community
Intermediate
tranhieutttranhieutt
70

radix-ui-design-system

Build accessible Radix UI design systems with headless primitives.

Community
Advanced