skills.rest
MaxStrootmann
MaxStrootmannCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

building-components

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

Updated Feb 27, 2024
Search Tags:#accessibility#npm#components#composition#design-tokens#polymorphism
One-click install
npx skills add https://github.com/MaxStrootmann/lumen-yoga --skill building-components-maxstrootmann
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: building-components
Source: https://github.com/MaxStrootmann/lumen-yoga/tree/main/.agents/skills/building-components
Command: npx skills add https://github.com/MaxStrootmann/lumen-yoga --skill building-components-maxstrootmann

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Building robust UI components requires balancing accessibility, composability, styling, and distribution; teams often duplicate effort, miss ARIA/keyboard requirements, and create brittle styling APIs. This Skill centralizes best-practices and patterns so authors can create accessible, type-safe, and themeable components that integrate cleanly into design systems.

Core Features & Use Cases

  • Accessibility by default: ARIA roles, keyboard maps, focus management, live regions, and contrast guidance to make components usable for assistive technologies.
  • Composable APIs & Polymorphism: Patterns for compound components, asChild/as prop polymorphism, slots, and data-slot identification to enable flexible composition.
  • Styling & Theming: Guidance on design tokens, Tailwind integration, data-state/data-slot approaches for declarative styling, and class merging with cn/tailwind-merge.
  • Types & Distribution: TypeScript typing patterns, controlled/uncontrolled state, and publishing strategies for npm, registries, and marketplaces.
  • Use Case: Implementing a Button, Dialog, or Menu primitive that is headless, accessible, themeable, and publishable as a component or registry item.

Quick Start

Create a new accessible Button component that supports asChild polymorphism, data-state attributes for styling, keyboard navigation, ARIA roles, and exported TypeScript prop types.

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 that meet ARIA and keyboard requirements?▼

To build accessible UI components, implement ARIA roles, complete keyboard interaction maps, focus management, and live regions to ensure assistive technologies can interact with your interface seamlessly.

What is the best way to create composable React components with asChild polymorphism?▼

Creating composable components with asChild polymorphism uses compound component patterns, slot identification, and data-slot attributes to enable flexible composition while maintaining type safety and predictable rendering behavior.

How do I apply design tokens and data-state attributes for component styling?▼

Applying design tokens for component styling involves mapping visual decisions to semantic tokens and using data-state attributes for declarative styling, often integrating with Tailwind and class merging utilities.

Can I use TypeScript typing patterns for controlled and uncontrolled component state?▼

TypeScript typing patterns for component state support controlled and uncontrolled behaviors, allowing you to define precise prop interfaces that enforce correct data flow and prevent invalid state combinations.

What are the steps to publish a component library to an npm registry?▼

Publishing a component library to an npm registry requires configuring your package.json, defining TypeScript build outputs, and setting up distribution strategies to push themeable primitives to public or private registries.

When should I use headless UI components in a design system?▼

Use headless UI components in a design system when you need accessible, logic-complete primitives that integrate cleanly with custom styling approaches like Tailwind, without imposing rigid structural or visual constraints.

Related Skills

Explore More Software Engineering Skills→
PiercingXXPiercingXX
1

neon

Generate Neon design-system guidelines with semantic tokens and accessibility criteria.

Community
Intermediate
wong2wong2
4

tsdown

Bundle TypeScript and JavaScript libraries into multiple formats with Rolldown.

Community
Advanced
corey-alixcorey-alix

Atomic CSS

Create atomic CSS utility classes using token-based custom properties.

Official
Intermediate
efekrbasefekrbas
41

radix-ui-design-system

Design accessible React component systems with Radix UI primitives.

Community
Advanced