skills.rest
seo-jinseok
seo-jinseokCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

moai-domain-uiux

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

Updated Dec 14, 2025
Search Tags:#accessibility#design system#ui/ux#design tokens#wcag#component architecture
One-click install
npx skills add https://github.com/seo-jinseok/regulation_manager --skill moai-domain-uiux-seo-jinseok
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: moai-domain-uiux
Source: https://github.com/seo-jinseok/regulation_manager/tree/main/.claude/skills/moai-domain-uiux
Command: npx skills add https://github.com/seo-jinseok/regulation_manager --skill moai-domain-uiux-seo-jinseok

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 maintainable user interfaces, focusing on design systems, component architecture, and accessibility standards.

Core Features & Use Cases

  • Design Systems: Implement W3C DTCG 2025.10 design tokens, manage theming, and integrate with tools like Pencil MCP.
  • Component Architecture: Utilize Atomic Design principles with React 19 and Vue 3.5, leveraging 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 efficiently.
  • Use Case: A team is building a new design system for a large enterprise application. They need to define design tokens, create reusable components, ensure accessibility, and integrate with their design tools. This Skill provides the framework and best practices to achieve this.

Quick Start

Consult the design token architecture documentation to set up semantic naming conventions for colors and spacing.

Frequently Asked Questions about moai-domain-uiux

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

FAQPage Schema
How do I structure design tokens for a UI/UX design system using W3C DTCG?▼

Structure design tokens by establishing semantic naming conventions for colors and spacing based on W3C DTCG 2025.10 standards. This provides the architecture to manage theming and build maintainable enterprise user interfaces.

How do I ensure WCAG 2.2 compliance when building accessible component architecture?▼

Ensure WCAG 2.2 compliance by implementing AA/AAA standards for keyboard navigation and screen reader optimization within your component architecture. This approach guarantees accessible interfaces using Atomic Design principles with libraries like Radix UI.

Can I use Atomic Design principles with React 19 and Vue 3.5?▼

Yes, you can apply Atomic Design principles with React 19 and Vue 3.5 using component libraries like shadcn/ui and Radix UI. This methodology enables building robust, reusable components for large-scale enterprise applications.

What is the best way to integrate design tokens with tools like Pencil MCP and Storybook?▼

The best way to integrate design tokens is by aligning your W3C DTCG token architecture directly with Pencil MCP and Storybook workflows. This synchronization bridges design assets and component libraries, ensuring consistent UI implementation.

How do I manage theming and icon libraries in an enterprise UI/UX design system?▼

Manage theming by defining semantic design tokens for colors and spacing, and integrate diverse icon sets efficiently using the provided framework. This strategy maintains visual consistency across large-scale user interfaces.

Related Skills

Explore More Design & Creative Skills→
windyskywindysky

moai-domain-uiux

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

Community
Basic
projectedanxprojectedanx
1

design-md

Manage design tokens and component specifications in machine-readable DESIGN.md files.

Community
Intermediate
aaltaayaaltaay

ckm:ui-styling

Build accessible React UI components with shadcn/ui, Tailwind, and Radix primitives.

Community
Advanced
superpollo02superpollo02

shadcn

Generate shadcn/ui-inspired component guidance with token-first rules and WCAG 2.2 AA constraints.

Community
Intermediate