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.
Works with
AI-first code editor with Composer
Before installing skills in Cursor, ensure your development environment meets these requirements:
node --versionmoai-domain-uiuxExecute the skills CLI command in your project's root directory to begin installation:
Fetches moai-domain-uiux from modu-ai/moai-adk and configures it for Cursor.
The CLI shows a list of agents. Use arrow keys and space to select Cursor:
Confirm successful installation by checking the skill directory location:
Restart Cursor to activate moai-domain-uiux. Access via /moai-domain-uiux in your agent's command palette.
We perform automated surface-level scans (Gen AI Scanner, Socket, Snyk) during installation. These checks detect common vulnerabilities but do not guarantee complete security. Always review skill source code and verify the publisher's reputation before production use.
Skills execute code in your environment. Always review source, verify the publisher, and test in isolation before production.
Submit your Claude Code skill and start earning
Automate repetitive workflows and reduce manual effort
Example
Generate reports, summarize documents, draft communications
Save 3-5 hours per week on routine tasks
Learn new skills, understand complex topics, get expert guidance
Example
Explain concepts, provide examples, suggest learning resources
Accelerate learning and skill development by 2x
Enhance output quality through reviews, suggestions, and refinements
Example
Review drafts, suggest improvements, catch errors
Improve work quality by 30-40% with less effort
2
total installs
2
this week
906
GitHub stars
0
upvotes
Run in your terminal
2
installs
2
this week
906
stars
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:
When to Use:
Module Organization:
Core Technologies:
Quick Decision Guide:
For design tokens, use modules/design-system-tokens.md with DTCG 2025.10 and Style Dictionary 4.0.
For component patterns, use modules/component-architecture.md with Atomic Design, React 19, and shadcn/ui.
For accessibility, use modules/accessibility-wcag.md with WCAG 2.2, jest-axe, and keyboard navigation.
For icons, use modules/icon-libraries.md with Lucide, React Icons, Tabler, Iconify, and Hugeicons.
For Nova preset and design presets, use moai-design-tools skill (reference/pencil-renderer.md).
For theming, use modules/theming-system.md with CSS variables and Theme Provider.
For practical examples, use examples.md with React and Vue implementations.
Step 1: Initialize design tokens by creating a JSON file with DTCG schema URL. Define color tokens with type color and primary 500 value. Define spacing tokens with type dimension and md value of 1rem.
Step 2: Transform tokens with Style Dictionary by installing the package and running the build command.
Step 3: Integrate with components by importing colors and spacing from the tokens directory.
See modules/design-system-tokens.md for complete token architecture.
Step 1: Initialize shadcn/ui by running the init command, then add button, form, and dialog components.
Step 2: Set up Atomic Design structure with atoms directory for Button, Input, and Label components, molecules directory for FormGroup and Card components, and organisms directory for DataTable and Modal components.
Step 3: Implement with accessibility by adding aria-label attributes to interactive elements.
See modules/component-architecture.md for patterns and examples.
Step 1: Choose icon library based on needs. Install lucide-react for general purpose, iconify/react for maximum variety, or tabler/icons-react for dashboard optimization.
Step 2: Implement type-safe icons by importing specific icons and applying className for sizing and color.
See modules/icon-libraries.md for library comparison and optimization.
Step 1: Configure CSS variables in root selector for primary and background colors. Define dark class with inverted values for dark mode.
Step 2: Implement Theme Provider by wrapping the application with attribute set to class and defaultTheme set to system.
See modules/theming-system.md for complete theme system.
Design Token First:
Accessibility by Default:
Component Composition:
Performance Optimization:
Required Practices:
Use design tokens exclusively for all color, spacing, and typography values. Design tokens provide a single source of truth, enabling consistent theming, multi-platform support, and scalable design systems. Hardcoded values create maintenance debt and break theme switching.
Include ARIA labels on all icon-only interactive elements. Screen readers cannot interpret visual icons without text alternatives. Missing ARIA labels violate WCAG 2.2 AA compliance.
Import icons individually rather than using namespace imports. Namespace imports bundle entire libraries, defeating tree-shaking optimization. Bundle sizes increase by 500KB-2MB per icon library.
Test all components in both light and dark modes. Theme switching affects color contrast, readability, and accessibility compliance.
Implement keyboard navigation for all interactive components. Keyboard-only users require Tab, Enter, Escape, and Arrow key support.
Provide visible focus indicators for all focusable elements. Focus indicators communicate current keyboard position for navigation and accessibility.
Use Tailwind utility classes instead of inline styles. Tailwind provides consistent spacing scale, responsive design, and automatic purging for optimal bundle sizes.
Include loading states for all asynchronous operations. Loading states provide feedback during data fetching, preventing user uncertainty.
Skills:
Agents:
Commands:
For detailed module documentation, see the modules directory.
For practical code examples, see examples.md.
For external documentation links, see reference.md.
Official Resources:
Last Updated: 2026-03-11 Status: Production Ready Version: 3.0.0
Prerequisites
Time Estimate
15-45 minutes depending on use case complexity
Steps
Common Pitfalls
✓ Do
✗ Don't
💡 Pro Tips
✓ Use when
Use when skill capabilities match your task, clear ROI on time saved, and you can validate outputs. Best for repetitive tasks, learning, and quality improvement.
✗ Avoid when
Avoid when task requires deep expertise you can't validate, involves sensitive decisions, or when learning process is more valuable than speed of completion.
anthropics/claude-code
mblode/agent-skills
github/awesome-copilot
leonxlnx/taste-skill
sickn33/antigravity-awesome-skills
erichowens/some_claude_skills
moai-domain-uiux fits our agent workflows well — practical, well scoped, and easy to wire into existing repos.
Registry listing for moai-domain-uiux matched our evaluation — installs cleanly and behaves as described in the markdown.
I recommend moai-domain-uiux for anyone iterating fast on agent tooling; clear intent and a small, reviewable surface area.
We added moai-domain-uiux from the explainx registry; install was straightforward and the SKILL.md answered most questions upfront.
Solid pick for teams standardizing on skills: moai-domain-uiux is focused, and the summary matches what you get after install.
Useful defaults in moai-domain-uiux — fewer surprises than typical one-off scripts, and it plays nicely with `npx skills` flows.
Keeps context tight: moai-domain-uiux is the kind of skill you can hand to a new teammate without a long onboarding doc.
I recommend moai-domain-uiux for anyone iterating fast on agent tooling; clear intent and a small, reviewable surface area.
Registry listing for moai-domain-uiux matched our evaluation — installs cleanly and behaves as described in the markdown.
Registry listing for moai-domain-uiux matched our evaluation — installs cleanly and behaves as described in the markdown.
showing 1-10 of 38