building-components

To build accessible UI components, implement ARIA attributes, keyboard navigation, and focus management to ensure inclusive interfaces. This Skill guides structuring components from primitives to templates while maintaining accessibility best practices throughout the component architecture.

The best way to structure a scalable component architecture is to categorize artifacts from primitives to templates and apply composition patterns like compound components. This approach ensures maintainable and flexible UI component libraries for software engineers.

Composition patterns like compound components and slots work in React by allowing flexible component design through techniques such as polymorphism and the `asChild` pattern. This enables highly composable and reusable UI elements within your library.

You need design tokens to create a maintainable theming system for UI components because they provide a single source of truth for styling values. Setting up token systems ensures consistent theming across your entire component library architecture.

You should refactor existing UI components into a composable component library when you need to improve accessibility, maintainability, and scalability. This process involves re-evaluating component architecture and applying modern composition patterns like slots.