How does it handle web accessibility?

The skill enforces strict [HARD] implementation standards for ARIA attributes, keyboard navigation, and WCAG 2.1 AA compliance across all UI components.

Does this skill support the latest React and Tailwind versions?

Yes, it is optimized for React 19, TypeScript 5.5, and Tailwind CSS 3.4, ensuring your code remains modern and maintainable.

Can I use this for complex application themes?

Absolutely. It specializes in CSS variable-based theming, dark mode support, and AI-powered theme optimization via Context7 integration.

Does it include form validation patterns?

Yes, it provides implementation guides for integrating shadcn components with React Hook Form and Zod for robust schema-based validation.

What is the primary benefit of the moai-library-shadcn skill?

It provides Claude with expert knowledge on shadcn/ui best practices, helping you generate high-quality, accessible, and performant React components that follow enterprise standards.

Enterprise Shadcn UI Expert

Name: Enterprise Shadcn UI Expert
Author: modu-ai

bymodu-ai

•

デザインツール

Orchestrates professional design systems and accessible React components using the shadcn/ui framework and Tailwind CSS.

概要

This skill transforms Claude into a senior frontend architect specialized in shadcn/ui and Radix UI primitives. It provides domain-specific guidance for building enterprise-grade design systems, ensuring strict adherence to WCAG 2.1 AA accessibility standards, performance optimization, and intelligent component orchestration. Leveraging AI-powered architecture through Context7, it helps developers manage complex implementations including theme customization with CSS variables, advanced form validation with Zod, and modern React 19 patterns.

主な機能

Strict WCAG 2.1 AA accessibility compliance and keyboard navigation
Performance-tuned component patterns for React 19 and Tailwind 3.4
16 GitHub stars
AI-powered component architecture and design system orchestration
Advanced form integration with React Hook Form and Zod validation
Comprehensive theme customization using CSS variables and design tokens

ユースケース

Optimizing React application performance and accessibility scores
Architecting and implementing enterprise-scale design systems
Building accessible, production-ready UI component libraries

概要

主な機能

Strict WCAG 2.1 AA accessibility compliance and keyboard navigation
Performance-tuned component patterns for React 19 and Tailwind 3.4
16 GitHub stars
AI-powered component architecture and design system orchestration
Advanced form integration with React Hook Form and Zod validation
Comprehensive theme customization using CSS variables and design tokens

ユースケース

Optimizing React application performance and accessibility scores
Architecting and implementing enterprise-scale design systems
Building accessible, production-ready UI component libraries