skills.rest
globalmsq
globalmsqOFFICIAL
Explore all skills by this author →
WebsiteGitHub

moai-foundation-uiux

Provides UI/UX foundation guidance covering tokens, components, accessibility, icons, and theming for React and Vue.

Updated Aug 27, 2026
Search Tags:#theming#accessibility#components#icons#design-systems#uiux
One-click install
npx skills add https://github.com/globalmsq/msq-relayer-service --skill moai-foundation-uiux
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: moai-foundation-uiux
Source: https://github.com/globalmsq/msq-relayer-service/tree/main/.claude/skills/moai-foundation-uiux
Command: npx skills add https://github.com/globalmsq/msq-relayer-service --skill moai-foundation-uiux

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a Core UI/UX Foundation for enterprise design systems, including token-driven design systems, component architecture, accessibility, icon libraries, and theming integration to accelerate UI development and ensure consistency across platforms.

Core Features & Use Cases

  • Design Systems: Token-based design tokens, token workflows, and platform-agnostic theming.
  • Component Architecture: Atomic design patterns across React (v19) and Vue (3.5) with modern tooling.
  • Accessibility: WCAG 2.2 AA/AAA compliance, keyboard navigation, screen reader optimization.
  • Icons & Theming: Large icon libraries and theming system with dark mode support.

Quick Start

Initiate the foundation to scaffold enterprise UI basics; integrate tokens, icons, and theming into React and Vue projects for consistent UX patterns.

Frequently Asked Questions about moai-foundation-uiux

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

FAQPage Schema
How do I build a design system with design tokens and theming?▼

Design tokens define your visual language—colors, typography, spacing—in a platform-agnostic format. This Skill provides token-driven workflows aligned with DTCG 2025.10 and Style Dictionary 4.0, enabling you to generate themed outputs for React, Vue, and CSS variables across light and dark modes.

Can I use design tokens with React 19 and Vue 3.5?▼

Yes. This Skill delivers component architecture patterns and token integration for both React 19 and Vue 3.5, ensuring consistent token application, CSS variable binding, and multi-platform theming across your modern component frameworks.

How do I ensure my UI meets WCAG 2.2 accessibility standards?▼

WCAG 2.2 AA/AAA compliance requires keyboard navigation, semantic structure, and screen reader optimization. This Skill provides guidance and implementation patterns for accessible component design, keyboard handling, and icon labeling to meet enterprise accessibility requirements.

What's the best way to manage icon libraries and dark mode theming?▼

Icon libraries and theming systems work together through CSS variables and design tokens. This Skill covers large-scale icon library integration, dark mode support via token switching, and Figma automation to synchronize icons and themes across platforms.

Do I need Figma or Style Dictionary to use this foundation?▼

This Skill supports both. It includes Figma MCP automation for design-to-code workflows and Style Dictionary 4.0 transformations for token generation, but you can adopt either tool independently based on your workflow and platform needs.

What problem does a token-based design system solve?▼

Token-based systems eliminate manual style synchronization across platforms and components. They enforce consistency, reduce maintenance overhead, and enable rapid theming changes by centralizing design decisions in a single source of truth.

Related Skills

Explore More Design & Creative Skills→
GainInsightDevGainInsightDev

af-retrofit-design-grammar

Retrofit existing projects with design tokens, component mapping, and Style Dictionary pipelines.

Official
Advanced
markky21markky21

tailwind-design-system

Build scalable design systems with Tailwind CSS v4 and design tokens.

Community
Advanced
windyskywindysky

moai-domain-uiux

Establish domain UI/UX foundations with design tokens and theming for React and Vue.

Community
Basic
kyamsSRLkyamsSRL

design-system-patterns

Build scalable design systems with Style Dictionary token pipelines and React theme providers.

Community
Advanced