Verified:GitHub

moai-domain-uiux

Guide UI/UX design systems with W3C DTCG 2025.10 tokens and Atomic Design.

Updated Mar 14, 2026

Search Tags:#theming #accessibility #design system #ui/ux #component library #design tokens #wcag

One-click install

npx skills add https://github.com/jinwoonghong/MESAsim --skill moai-domain-uiux-jinwoonghong

Or copy as Structured Prompt for Agent▼

Please help me install this Agent Skill.
Skill: moai-domain-uiux
Source: https://github.com/jinwoonghong/MESAsim/tree/main/.claude/skills/moai-domain-uiux
Command: npx skills add https://github.com/jinwoonghong/MESAsim --skill moai-domain-uiux-jinwoonghong

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides comprehensive guidance and implementation patterns for building enterprise-grade UI/UX design systems, ensuring accessibility, and maintaining design consistency across platforms.

Core Features & Use Cases

Design Systems: Implement W3C DTCG 2025.10 token standards, manage design tokens with Style Dictionary, and automate design-to-code workflows using Pencil MCP.
Component Architecture: Follow Atomic Design principles for building reusable UI components in React 19 and Vue 3.5.
Accessibility: Ensure WCAG 2.2 AA/AAA compliance, implement keyboard navigation, and conduct automated accessibility testing.
Icon Libraries: Integrate and optimize over 10 major icon libraries with over 200,000 icons.
Theming: Set up robust theming systems with light/dark modes and brand customization.
Use Case: A team is building a new design system for a large enterprise application. They need to define design tokens, create a component library following best practices, ensure accessibility compliance, and integrate with their design tools. This Skill provides the framework and examples for all these tasks.

Quick Start

Use the moai-domain-uiux skill to set up a design system using W3C DTCG 2025.10 tokens and Atomic Design principles.

Frequently Asked Questions about moai-domain-uiux

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I implement W3C DTCG 2025.10 design tokens in a component library?▼

To implement W3C DTCG 2025.10 design tokens, use Style Dictionary to manage tokens and automate design-to-code workflows, integrating them into your component architecture for consistent theming across platforms.

What is the best way to structure a React 19 component library using Atomic Design?▼

The best way to structure a React 19 component library is applying Atomic Design principles to build reusable UI components, ensuring maintainable architecture and seamless integration with Storybook for visualization.

How do I ensure WCAG 2.2 accessibility compliance when building a UI design system?▼

To ensure WCAG 2.2 accessibility compliance in a UI design system, implement proper keyboard navigation, conduct automated accessibility testing, and target AA or AAA conformance levels across all components.

Can I integrate Pencil MCP with Vue 3.5 for design-to-code workflows?▼

Yes, you can integrate Pencil MCP with Vue 3.5 to automate design-to-code workflows, allowing you to sync design tokens and component definitions directly from your design tools into your codebase.