Ready to supercharge your AI agents?

Install any skill in seconds. Free to start, no credit card required.

Get Started Free →

Moai Domain Uiux · modu-ai | DecimalAI

frontendby modu-ai

Moai Domain Uiux

modu-ai/moai-domain-uiux

Source modu-ai/moai-adk ↗License Apache-2.0

UI/UX design systems specialist covering accessibility, icons, theming, design tokens, and user experience patterns.

SkillScore95Maintained

Automatic

Frontend / UI pack

Last verified 8/15/2026

What it changes

Passed 21 of 22 test cases with the skill, and 19 of 22 without it.

Without skill86%

With skill95%

Checks it passed that the model alone missed

Uses CSS variables or token references rather than hardcoded hex values
Uses semantic CSS variables or design tokens instead of hardcoded utility color classes like bg-blue-600

2 fixed19 passed either way1 still failing0 broke

Pass-rate lift: +9 pp
Tokens: +96%
Agent turns: 0%
Response time: -18%

Model gemini-3.6-flashMeasured 8/15/2026v121 of 22 cases passed with skill

Tokens, turns and time describe resource use, not a dollar price.

Use this skill

Save it into your project's skills folder. Claude Code picks it up in its next session.

curl -fsSL --create-dirs -o .claude/skills/modu-ai-moai-domain-uiux/SKILL.md https://app.decimal.ai/s/modu-ai-moai-domain-uiux/SKILL.md

Want it pinned and updatable? pip install "decimalai>=0.15", then decimalai skills add modu-ai-moai-domain-uiux, and start Claude Code with claude --plugin-dir "$(git rev-parse --show-toplevel)/.agents"

1 · One-time — install the CLI (docs ↗)

pip install "decimalai>=0.15"

2 · Get the skill — writes .agents/skills/modu-ai-moai-domain-uiux/ and pins it in .decimal/skills.lock

decimalai skills add modu-ai-moai-domain-uiux

No CLI? Get the same file — curl · raw file

curl -fsSL --create-dirs -o .claude/skills/modu-ai-moai-domain-uiux/SKILL.md https://app.decimal.ai/s/modu-ai-moai-domain-uiux/SKILL.md

Raw file: /s/modu-ai-moai-domain-uiux/SKILL.md ↗ · machine-readable summary at /s/modu-ai-moai-domain-uiux.json ↗

Safety checks: 3 of 3 passed

Code scan CleanIntent PassedContent Clean

See it in action

One of 2 test cases the skill fixed. Same model, same prompt, with and without the skill.

1 of 2

Prompt

We are building a new enterprise frontend library and want to organize our UI components using an atomic design structure. Please provide a step-by-step directory layout and code implementation for setting up standard buttons, form groups, and dialogs following accessible component architecture guidelines, including proper directory classification from foundational elements up to composite organisms.

What was checked, without and with the skill
Checked	Without skill	With skill
Uses semantic CSS variables or design tokens instead of hardcoded utility color classes like bg-blue-600	Missed	Passed
Places Button in the atoms directory	Passed	Passed
Places FormGroup in the molecules directory	Passed	Passed
Places Dialog or Modal in the organisms directory	Passed	Passed

case-01 · gemini-3.6-flash · 8/15/2026 · answers are capped and redacted

What's inside

The instructions your model reads when the skill loads.

SKILL.md248 lines3 files

Quick Reference

Core UI/UX Foundation - Enterprise-grade UI/UX foundation integrating design systems (W3C DTCG 2025.10), component architecture (React 19, Vue 3.5), accessibility (WCAG 2.2), icon libraries (200K+ icons), and theming systems.

Unified Capabilities:

Design Systems: W3C DTCG 2025.10 tokens, Style Dictionary 4.0, Pencil MCP workflows
Component Architecture: Atomic Design, React 19, Vue 3.5, shadcn/ui, Radix 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+, Hugeicons 27K+)
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-grade user interfaces
Setting up design token architecture for multi-platform projects
Integrating comprehensive icon systems with optimal bundle sizes
Creating customizable theming systems with dark mode support

Module Organization:

Components: modules/component-architecture.md (Atomic Design, component patterns, props APIs)
Design Systems: modules/design-system-tokens.md (DTCG tokens, Style Dictionary, Pencil MCP)
Accessibility: modules/accessibility-wcag.md (WCAG 2.2 compliance, testing, navigation)
Icons: modules/icon-libraries.md (10+ libraries, selection guide, performance optimization)
Theming: modules/theming-system.md (theme system, CSS variables, brand customization)
Web Interface Guidelines: modules/web-interface-guidelines.md (Vercel Labs comprehensive UI/UX compliance, frontend composition rules)
Examples: examples.md (practical implementation examples)
Reference: reference.md (external documentation links)

Implementation Guide

Foundation Stack

Core Technologies:

React 19 with Server Components and Concurrent Rendering

Track record

Benchmark

21 / 22

test cases passed, vs 19 / 22 without

Adoption

Users: 0
Times used: 0

Safety and source details

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v4 — 8/3/2026

View 15 scanner checks

live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing

IntentSafe

LLM judge · does the skill do what it claims

ContentClean

LLM judge · policy & harmful-content review

Source

Imported

modu-ai / moai-adk

.moai/archive/skills/v3.0/moai-domain-uiux/SKILL.md

View on GitHub ↗

License Apache-2.0Imported 8/3/2026Version v1Bundled 2 files

More skills from the same source and nearby in the registry, with their headline benchmark lift.