Standardizes UI component development by combining Joy UI aesthetics with Base UI accessibility primitives.
This skill provides comprehensive guidance for building web interfaces using the Base-Joy design system, which bridges Joy UI’s polished visual language with Base UI’s unstyled, accessible foundation. It helps developers maintain visual consistency across variants (solid, soft, outlined, plain), implement semantic color systems, and adhere to a strict component architecture that separates behavior from styling. It is particularly useful when creating new UI components, ensuring ARIA compliance, or customizing existing design patterns without breaking accessibility standards.
주요 기능
01Enforces Base UI accessibility patterns and ARIA standards
02Manages context-aware inheritance for colors and sizing
03Guides a three-layer component architecture for maximum flexibility
04Provides rules for semantic color usage and interactive state behaviors
05Standardizes Joy UI visual variants: Solid, Soft, Outlined, and Plain
060 GitHub stars
사용 사례
01Building new accessible UI components from scratch using Base UI primitives
02Theming and customizing an existing Base-Joy application without breaking accessibility
03Auditing UI code for consistency with the established design system principles
