moai-domain-uiux

Create a JSON token file following the W3C DTCG 2025.10 schema with $type and $value fields, then configure Style Dictionary 4.0 with platform targets like css/variables or typescript declarations and run the build command.

Lucide suits general-purpose UI with 1000+ icons at ~30KB, Tabler fits dashboards with 5900+ icons, Iconify offers 200K+ icons via CDN, and Hugeicons is the default for Nova/shadcn presets. Import icons individually to preserve tree-shaking.

Use jest-axe with React Testing Library to run automated accessibility audits in unit tests, checking for violations like missing ARIA labels. Combine with Storybook's a11y addon for visual testing and manual keyboard navigation checks.

Yes, Tailwind v4 uses a CSS-first configuration with the @theme directive instead of tailwind.config.js, integrating naturally with CSS variables for design tokens. Dark mode uses class-based switching with a ThemeProvider.

WCAG 2.2 Level AA requires 4.5:1 contrast for normal text and 3:1 for large text, while AAA requires 7:1 and 4.5:1 respectively. The Skill includes a getContrastRatio utility to validate color pairs programmatically.

Avoid full design token architecture for simple static sites, rapid prototypes, or single-use projects where the overhead outweighs maintenance benefits. Plain Tailwind CSS or existing component libraries are better fits for those cases.