moai-domain-uiux

Enterprise UI design systems unify design tokens, components, and theming across platforms. This Skill develops W3C-compliant token architectures using Style Dictionary 4.0, atomic component libraries for React 19 and Vue 3.5, and CSS variable-based theming with WCAG 2.2 AA/AAA accessibility compliance built in.

Yes. The Skill implements WCAG 2.2 AA and AAA standards through keyboard navigation, ARIA patterns, semantic HTML, and accessible component architecture. It provides accessibility specifications that integrate into your component library from the start.

Design tokens store reusable design decisions (colors, spacing, typography) in a centralized format. Style Dictionary 4.0 transforms these tokens into platform-specific outputs—CSS variables, JavaScript objects, and theme files—enabling consistent theming across React and Vue applications.

Component architecture defines reusable UI building blocks with consistent APIs and patterns. Theming applies visual variations (colors, typography, spacing) to those components through CSS variables and Theme Provider integration, allowing multi-brand or multi-platform deployments without code duplication.

Yes. The Skill covers design-system integration for both React 19 and Vue 3.5, including Theme Provider setup, CSS variable injection, and component-library patterns that work alongside existing projects. It supports incremental adoption of tokens and themed components.

Enterprise systems require extensible icon libraries, dynamic theme switching, and consistent icon-to-component integration. This Skill provides icon architecture patterns and theming mechanisms using CSS variables and Theme Provider, enabling runtime theme changes and multi-platform consistency.