Can I use it with Figma?

Yes, the skill includes workflows for Figma MCP to bridge the gap between design files and code using automated design token transformations.

Which icon libraries are supported?

It supports over 10 ecosystems including Lucide, React Icons (35K+), Tabler Icons (5900+), and Iconify (200K+), focusing on tree-shaking and performance.

How does it handle web accessibility (a11y)?

It enforces WCAG 2.2 compliance through automated testing patterns with jest-axe, semantic HTML, ARIA implementation, and strict keyboard navigation standards.

Does this skill support the latest React and Vue versions?

Yes, it is specifically optimized for React 19 and Vue 3.5, including support for Server Components, the Composition API, and modern rendering patterns.

What design token standards does it use?

It follows the W3C DTCG 2025.10 specification for platform-agnostic design variables, managed through Style Dictionary 4.0 for multi-platform transformation.

Moai Domain UI/UX Expert

Name: Moai Domain UI/UX Expert
Author: modu-ai

bymodu-ai

•

デザインツール

Accelerates frontend development by implementing enterprise-grade design systems, accessible component architectures, and comprehensive theming solutions.

概要

This skill transforms Claude into a senior UI/UX engineer capable of architecting modern frontend systems using industry-standard patterns like Atomic Design and W3C Design Token Community Group (DTCG) specifications. It provides deep expertise in React 19 and Vue 3.5 component libraries, ensures strict WCAG 2.2 accessibility compliance, manages complex icon ecosystems, and implements robust multi-theme support using CSS variables and Tailwind CSS. Whether you are bootstrapping a new design system with Style Dictionary or optimizing an existing component library for performance and accessibility, this skill ensures production-grade results with best practices baked in.

主な機能

Accessible Component Patterns (WCAG 2.2 AA/AAA & Radix UI)
Comprehensive Icon Management (200K+ icons across 10+ ecosystems)
Design Token Architecture (W3C DTCG 2025.10 & Style Dictionary 4.0)
16 GitHub stars
Modern Framework Integration (React 19, Vue 3.5, & shadcn/ui)
Advanced Theming Systems (Multi-theme, dark mode, & CSS variables)

ユースケース

Auditing and refactoring existing UI components for WCAG 2.2 accessibility compliance.
Implementing a scalable, type-safe icon and theming strategy for multi-platform applications.
Building a custom enterprise design system from scratch using tokens and Atomic Design.

概要

主な機能

Accessible Component Patterns (WCAG 2.2 AA/AAA & Radix UI)
Comprehensive Icon Management (200K+ icons across 10+ ecosystems)
Design Token Architecture (W3C DTCG 2025.10 & Style Dictionary 4.0)
16 GitHub stars
Modern Framework Integration (React 19, Vue 3.5, & shadcn/ui)
Advanced Theming Systems (Multi-theme, dark mode, & CSS variables)

ユースケース

Auditing and refactoring existing UI components for WCAG 2.2 accessibility compliance.
Implementing a scalable, type-safe icon and theming strategy for multi-platform applications.
Building a custom enterprise design system from scratch using tokens and Atomic Design.