jikime-domain-uiux

Configure enterprise design systems with W3C DTCG tokens and WCAG 2.2 accessibility.

5|1|Updated Jan 24, 2026
One-click install
npx skills add https://github.com/jikime/jikime-adk --skill jikime-domain-uiux
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: jikime-domain-uiux
Source: https://github.com/jikime/jikime-adk/tree/main/templates/.claude/skills/jikime-domain-uiux
Command: npx skills add https://github.com/jikime/jikime-adk --skill jikime-domain-uiux

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill provides a robust foundation for building enterprise-grade user interfaces, ensuring consistency, accessibility, and maintainability across applications.

Core Features & Use Cases

  • Design Systems: Integrates W3C DTCG 2025.10 tokens and Style Dictionary for a single source of truth.
  • Component Architecture: Implements Atomic Design principles with React 19 and Vue 3.5, leveraging libraries like shadcn/ui and Radix UI.
  • Accessibility: Enforces WCAG 2.2 AA/AAA compliance, keyboard navigation, and screen reader optimization.
  • Icon Systems: Manages integration of 10+ icon libraries with over 200K icons.
  • Theming: Supports customizable theming with light/dark modes using CSS variables.
  • Use Case: Kickstart a new React project by establishing a comprehensive design system, including tokens, accessible components, and theming, ready for enterprise adoption.

Quick Start

Initialize a new React project with the jikime-domain-uiux skill, focusing on design system tokens and basic button components.

Frequently Asked Questions about jikime-domain-uiux

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

FAQPage Schema
How do I set up an enterprise design system using W3C DTCG tokens and Style Dictionary?

To set up an enterprise design system, use W3C DTCG 2025.10 tokens processed through Style Dictionary to create a single source of truth. This foundation ensures UI consistency and maintainability across modern applications by centralizing design properties.

How do I build accessible React 19 components that meet WCAG 2.2 AA standards?

Build accessible React 19 components by enforcing WCAG 2.2 AA/AAA compliance, optimizing keyboard navigation, and enhancing screen reader interactions. Implementing Atomic Design principles with libraries like Radix UI ensures robust accessibility architecture.

Does this UI/UX foundation support Vue 3.5 component architecture?

Yes, this UI/UX foundation fully supports Vue 3.5 component architecture alongside React 19. It applies Atomic Design principles to both frameworks, allowing you to build scalable enterprise interfaces using your preferred modern JavaScript ecosystem.

What is the best way to manage theming with light and dark modes using CSS variables?

The best way to manage theming is by utilizing customizable CSS variables to toggle between light and dark modes. This approach integrates seamlessly with W3C DTCG design tokens, allowing dynamic theme switching without reloading the application.

How do I integrate multiple icon libraries into a modern web application?

Integrate multiple icon libraries by utilizing a managed icon system that supports over 200K icons across 10+ different libraries. This centralized management approach ensures consistent icon usage and easy updates within your enterprise component architecture.

Can I use shadcn/ui and Radix UI for enterprise component architecture?

Yes, you can leverage shadcn/ui and Radix UI to implement Atomic Design principles within your enterprise component architecture. These libraries provide accessible, customizable foundation components that integrate perfectly with W3C DTCG tokens.