skills.rest
tjdwls101010
tjdwls101010COMMUNITY
Explore all skills by this author →
WebsiteGitHub

moai-domain-uiux

Integrate design tokens, accessibility, and theming across React 19 and Vue 3.5.

Updated Aug 23, 2026
Search Tags:#design#theming#accessibility#tokens#design-systems#uiux
One-click install
npx skills add https://github.com/tjdwls101010/seongjin_extension_youtube-summarize --skill moai-domain-uiux-tjdwls101010
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: moai-domain-uiux
Source: https://github.com/tjdwls101010/seongjin_extension_youtube-summarize/tree/main/.claude/skills/moai-domain-uiux
Command: npx skills add https://github.com/tjdwls101010/seongjin_extension_youtube-summarize --skill moai-domain-uiux-tjdwls101010

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a centralized domain UI/UX foundation for enterprise products, reducing design-to-code churn, ensuring accessibility, token management, and theming across platforms.

Core Features & Use Cases

  • Design Systems: W3C DTCG tokens, Style Dictionary, Figma MCP workflows
  • Component Architecture: Atomic Design, React 19, Vue 3.5, shadcn/ui primitives
  • Accessibility: WCAG 2.2 AA/AAA compliance, keyboard navigation, screen reader optimization
  • Icon Libraries: 10+ ecosystems (Lucide, React Icons 35K+, Tabler 5900+, Iconify 200K+)
  • Theming: CSS variables, light/dark modes, theme provider, brand customization
  • When to Use: Building modern UI component libraries with design system foundations; implementing accessible enterprise interfaces; token architecture for multi-platform projects; integrating comprehensive icon systems; creating customizable theming systems with dark mode support
  • Examples: Practical implementation patterns across React/Vue with tokens, accessibility, and theming

Quick Start

Example: activate the moai-domain-uiux skill and run the Foundation Setup to initialize design tokens, accessibility patterns, and component architecture for your app.

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 a design system with design tokens and ensure WCAG accessibility compliance?▼

Design tokens structured with W3C DTCG standards and Style Dictionary transformations provide a single source of truth for enterprise UI systems. This Skill applies token-driven architecture to React 19 and Vue 3.5, enforcing WCAG 2.2 AA/AAA conformance through accessibility patterns, component primitives, and keyboard navigation built into the token layer.

Can I integrate Figma design files directly into my React or Vue component library with tokens?▼

Yes. Figma MCP workflows enable design-to-code automation by connecting Figma token definitions to Style Dictionary 4.0 transformations, CSS variables, and component architecture. This Skill orchestrates that pipeline for React 19 and Vue 3.5, reducing manual token synchronization and maintaining consistency across platforms.

What's the best way to implement light and dark mode theming across a multi-platform enterprise application?▼

CSS variables with a theme provider pattern enables runtime theme switching without recompilation. This Skill builds brand-customizable theming systems using W3C DTCG tokens and Style Dictionary, supporting light/dark modes and token-driven UI rendering across React, Vue, and other platforms in a single architecture.

How do I choose and integrate icon libraries for an accessible enterprise component system?▼

Icon libraries like Lucide, React Icons (35K+), Tabler (5900+), and Iconify (200K+) integrate into component architecture through token-driven theming. This Skill provides patterns for accessible icon usage—semantic markup, ARIA labels, keyboard support—ensuring icons meet WCAG standards across your design system.

Does this approach support atomic design and component composition for scalable UI systems?▼

Yes. Atomic Design principles combine with token architecture, React 19 and Vue 3.5 primitives, and shadcn/ui-style component foundations to build scalable, composable systems. This Skill applies that structure to enterprise applications, ensuring consistency from design tokens through composed components.

What are the limitations when migrating existing component libraries to a token-based design system?▼

Token adoption requires coordinating Style Dictionary transformations, CSS variable naming, and component refactoring. This Skill addresses that scope—design-to-code churn, theming conflicts, and accessibility retrofits—but success depends on aligning existing component architecture with atomic patterns and token consumption.

Related Skills

Explore More Design & Creative Skills→
shawn-sandyshawn-sandy

figma-design-tokens

Extract design tokens from Figma and generate CSS, SCSS, JSON, TypeScript, and DTCG files.

Community
Advanced
johinsDevjohinsDev

ui

Develop shared UI components with Base UI, shadcn, and Storybook 9.

Community
Intermediate
wukangcheng2944wukangcheng2944

icon-finder

Search six Iconify libraries and deliver icons as SVG or components.

Community
Intermediate
phazurlabsphazurlabs
35

Design Systems Architecture

Standardize design system architecture with W3C DTCG tokens and Figma-to-code synchronization.

Community
Advanced