skills.rest
CJ-1981
CJ-1981COMMUNITY
Explore all skills by this author →
GitHub

moai-domain-uiux

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

Updated Feb 2, 2026
Search Tags:#theming#accessibility#design system#ui/ux#design tokens#wcag#component architecture
One-click install
npx skills add https://github.com/CJ-1981/excel-processor --skill moai-domain-uiux-cj-1981
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: moai-domain-uiux
Source: https://github.com/CJ-1981/excel-processor/tree/main/.claude/skills/moai-domain-uiux
Command: npx skills add https://github.com/CJ-1981/excel-processor --skill moai-domain-uiux-cj-1981

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes 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 patterns with React 19 and Vue 3.5.
  • Accessibility: Ensure WCAG 2.2 AA/AAA compliance, keyboard navigation, and ARIA patterns.
  • Icon Libraries: Integrate diverse icon sets with performance optimization.
  • Theming: Set up customizable theming systems with dark mode support.
  • Use Case: A team is building a new design system and needs to establish a robust foundation for tokens, components, and accessibility. This Skill provides the blueprints and best practices to ensure a high-quality, maintainable, and accessible UI.

Quick Start

Use the moai-domain-uiux skill to set up a design system with 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 new design system?▼

Implement W3C DTCG 2025.10 design tokens by structuring your token categories and utilizing Style Dictionary workflows to generate platform-specific output for scalable UI theming and consistent visual language.

What is the best way to structure React 19 components using Atomic Design?▼

The best way to structure React 19 components is applying Atomic Design principles to break down interfaces into reusable atoms, molecules, and organisms, ensuring maintainable and scalable enterprise-level component architecture.

How do I ensure WCAG 2.2 AA and AAA accessibility compliance in my UI?▼

Ensure WCAG 2.2 accessibility compliance by implementing proper ARIA patterns, robust keyboard navigation, and semantic HTML structures, addressing strict enterprise-level requirements for highly usable and accessible user interfaces.

Can I use Style Dictionary and Pencil MCP workflows for dark mode theming?▼

Yes, you can use Style Dictionary and Pencil MCP workflows to set up customizable theming systems with dark mode support, processing W3C DTCG tokens to generate dynamic style outputs across platforms.

Does this guidance support Vue 3.5 component architecture alongside React 19?▼

Yes, this guidance supports Vue 3.5 component architecture alongside React 19, utilizing Atomic Design patterns to build scalable, accessible, and performant user interfaces across both frameworks.

How do I optimize diverse icon library integration for performant user interfaces?▼

Optimize diverse icon library integration by applying performance best practices to manage asset delivery and rendering, ensuring lightweight, accessible, and high-performing enterprise user interfaces.

Related Skills

Explore More Design & Creative Skills→
windyskywindysky

moai-domain-frontend

Guide React 19, Next.js 16, and Vue 3.5 frontend architecture with reusable components.

Community
Advanced
Sheldon-92Sheldon-92
3

web-frontend

Generate React component libraries and themes from DESIGN.md and tokens.json.

Community
Advanced
seo-jinseokseo-jinseok

moai-domain-uiux

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

Community
Advanced
rakibulismrakibulism
2

design-token-architect

Design or audit design token systems with primitive, semantic, and component layers.

Community
Advanced