skills.rest
Foodshareclub
FoodshareclubOFFICIAL
Explore all skills by this author →
Website𝕏@foodshareclubGitHub

building-components

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

Updated Dec 17, 2022
Search Tags:#typescript#accessibility#react#design system#components#composition#tailwind
One-click install
npx skills add https://github.com/Foodshareclub/foodshare-web --skill building-components-foodshareclub
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: building-components
Source: https://github.com/Foodshareclub/foodshare-web/tree/main/.agents/skills/building-components
Command: npx skills add https://github.com/Foodshareclub/foodshare-web --skill building-components-foodshareclub

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 must learn through trial and error. ## Core Features & Use Cases - Accessibility Patterns: Implement ARIA roles, keyboard navigation, focus management, 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 styling. - Distribution & Documentation: Publish components via npm, shadcn-style registries, or marketplaces, and write complete component documentation. - Use Case: When building a new Dialog component for a design system, use this Skill to structure it as composable subcomponents with proper focus trapping, ARIA attributes, and data attributes for Tailwind styling. ## Quick Start Use the building-components skill to create an accessible, composable Accordion component with keyboard navigation and data-state styling.

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. Prevent body scroll while open and label the dialog with aria-labelledby.

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.

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.

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 source directly, giving users ownership and customization, at the cost of manual update management.

Why is my Tailwind component library unstyled after npm install?▼

Tailwind does not scan node_modules by default, so classes inside your package are not generated. Consumers must add an @source directive pointing to your package in their CSS file.

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
Asymmetric-alAsymmetric-al
1

building-components

Build composable, accessible UI components with design tokens and documentation.

Official
Advanced
baloisebaloise
111

ds-test-component

Generate visual, accessibility, and unit tests for Helvetia Design System components.

Official
Advanced
Eng-susoEng-suso

radix-ui-design-system

Build accessible React component libraries using Radix UI headless primitives.

Community
Intermediate