moai-domain-uiux

Name: moai-domain-uiux
Availability: InStock
Author: binee108

Develop enterprise UI/UX design systems with tokens, components, theming, and accessibility.

Updated Aug 27, 2026

Search Tags:#theming #accessibility #components #tokens #design-systems #uiux

Ready to run

npx skills add https://github.com/binee108/webserver --skill moai-domain-uiux

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Domain UI/UX expertise for enterprise-grade design systems, component architecture, accessibility, icons, and theming integration.

Core Features & Use Cases

Design System Tokens: W3C tokens, Style Dictionary integration
Component Architecture: Atomic Design across React and Vue
Accessibility: WCAG 2.2 AA compliance
Icons & Theming: Extensive icon libraries and theming support
Use Cases: Building enterprise UI libraries, theming multi-platform apps, accessible components

Quick Start

Start by exploring the Design System Components module to create a reusable button library.

Frequently Asked Questions about moai-domain-uiux

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

FAQPage Schema

How do I build an enterprise UI design system with tokens and components?▼

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.

Can I use this for WCAG 2.2 accessibility compliance in my components?▼

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.

How do design tokens and Style Dictionary work together?▼

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.

What's the difference between component architecture and theming in design systems?▼

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.

Can I apply this design system approach to existing React and Vue projects?▼

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.

What icon and theming support does an enterprise design system need?▼

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.