skills.rest
modu-ai
modu-aiOFFICIAL
Explore all skills by this author →
Website𝕏@MODU_AIGitHub

moai-domain-uiux

Guide UI/UX design systems with WCAG 2.2 and W3C DTCG 2025.10 tokens.

67|27|Updated Dec 24, 2025
Search Tags:#theming#accessibility#ui/ux#design systems#design tokens#component architecture
One-click install
npx skills add https://github.com/modu-ai/cc-plugins --skill moai-domain-uiux-modu-ai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: moai-domain-uiux
Source: https://github.com/modu-ai/cc-plugins/tree/main/.claude/skills/moai-domain-uiux
Command: npx skills add https://github.com/modu-ai/cc-plugins --skill moai-domain-uiux-modu-ai

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill provides comprehensive guidance and best practices for building modern, accessible, and performant user interfaces, focusing on design systems, component architecture, and accessibility standards.

Core Features & Use Cases

  • Design Systems: Implement W3C DTCG 2025.10 design tokens, Style Dictionary, and Pencil MCP workflows.
  • Component Architecture: Utilize Atomic Design principles with React 19 and Vue 3.5, integrating libraries like shadcn/ui and Radix UI.
  • Accessibility: Ensure WCAG 2.2 AA/AAA compliance, keyboard navigation, and screen reader optimization.
  • Icon Libraries: Integrate diverse icon sets with performance and accessibility in mind.
  • Theming: Create robust theming systems with light/dark mode support.
  • Use Case: A frontend team needs to establish a consistent design system for a new enterprise application, ensuring it's accessible and maintainable across multiple platforms.

Quick Start

Use the moai-domain-uiux skill to set up a design system foundation with W3C DTCG 2025.10 tokens and implement accessible React components using Atomic Design.

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 WCAG 2.2 accessibility compliance in React 19 components?▼

Implement WCAG 2.2 accessibility in React 19 components by applying ARIA patterns, ensuring keyboard navigation, and optimizing for screen readers. This Skill provides specialized guidance to ensure your user interface meets AA/AAA compliance standards effectively.

How do I set up W3C design tokens for a UI design system?▼

Set up W3C DTCG 2025.10 design tokens for a UI design system by utilizing Style Dictionary and Pencil MCP workflows. This Skill guides you through establishing a consistent foundation for theming and component architecture.

Can I use Atomic Design principles with Vue 3.5 and Tailwind CSS?▼

Yes, you can use Atomic Design principles with Vue 3.5 and Tailwind CSS. This Skill guides component architecture using these frameworks, integrating libraries like shadcn/ui and Radix UI to build maintainable interfaces.

What is the best way to create a dark mode theming system with design tokens?▼

The best way to create a dark mode theming system is by leveraging W3C DTCG 2025.10 design tokens. This Skill provides workflows to establish robust light and dark mode support while maintaining accessibility and performance.

How do I integrate icon libraries with accessibility in a design system?▼

Integrate icon libraries with accessibility by following this Skill's guidance on optimizing for performance and screen readers. It covers incorporating diverse icon sets into your design system while maintaining WCAG 2.2 compliance.

Does this Skill support building enterprise applications needing consistent UI patterns?▼

Yes, this Skill supports building enterprise applications by establishing a consistent design system. It ensures your UI is accessible and maintainable across multiple platforms using React 19, Vue 3.5, and W3C design tokens.

Related Skills

Explore More Design & Creative Skills→
jikimejikime
5

jikime-domain-frontend

Develops frontend apps with React 19, Next.js 16, and Vue 3.5, optimizing component architecture and performance via Tailwind CSS integration.

Community
Advanced
AI-Foundry-CoreAI-Foundry-Core
4

accessibility-compliance

Audit and enforce WCAG 2.2 accessibility compliance for web and mobile UI components.

Official
Advanced
soo-kate-yeonsoo-kate-yeon

moai-domain-uiux

Guide UI/UX design systems with W3C DTCG 2025.10 tokens and WCAG 2.2 accessibility.

Community
Advanced
jinwoonghongjinwoonghong

moai-domain-uiux

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

Community
Advanced