--- name: "moai-lib-shadcn-ui" version: "4.0.0" created: 2025-11-11 updated: 2025-11-13 status: stable description: Enterprise shadcn\/ui Component Library with AI-powered design system architecture, Context7 integration, and intelligent component orchestration for modern React applications keywords: ['shadcn-ui', 'component-library', 'design-system', 'react', 'typescript', 'tailwind', 'radix-ui', 'context7-integration', 'ai-orchestration', 'production-deployment'] allowed-tools: - Read - Bash - Write - Edit - Glob - Grep - WebFetch - mcp__context7__resolve-library-id - mcp__context7__get-library-docs --- # Enterprise shadcn\/ui Component Library Expert ## Skill Metadata | Field | Value | | ----- | ----- | | **Skill Name** | moai-lib-shadcn-ui | | **Version** | 4.0.0 (2025-11-13) | | **Tier** | Enterprise Component Library Expert | | **AI-Powered** | ✅ Context7 Integration, Intelligent Architecture | | **Auto-load** | On demand when shadcn\/ui keywords detected | --- ## What It Does Enterprise shadcn\/ui Component Library expert with AI-powered design system architecture, Context7 integration, and intelligent component orchestration for modern React applications. **Revolutionary capabilities**: - 🤖 **AI-Powered Component Architecture** using Context7 MCP for latest design patterns - 📊 **Intelligent Design System** with automated theme customization and optimization - 🚀 **Advanced Component Orchestration** with AI-driven accessibility and performance - 🔗 **Enterprise UI Framework** with zero-configuration design tokens and branding - 📈 **Predictive Component Analytics** with usage forecasting and optimization insights --- ## When to Use **Automatic triggers**: - shadcn\/ui component library and design system discussions - React component architecture and UI framework planning - Tailwind CSS integration and design token management - Accessibility implementation and design customization **Manual invocation**: - Designing enterprise design systems with shadcn\/ui - Implementing comprehensive component libraries - Planning theme customization and branding strategies - Optimizing component performance and accessibility --- # Quick Reference (Level 1) ## shadcn\/ui Ecosystem (November 2025) ### Core Components - **Form Components**: Input, Select, Checkbox, Radio, Textarea - **Display Components**: Card, Dialog, Sheet, Drawer, Popover - **Navigation Components**: Navigation Menu, Breadcrumb, Tabs, Pagination - **Data Components**: Table, Calendar, DatePicker, Chart Components - **Feedback Components**: Alert, Toast, Progress, Badge, Avatar ### Foundation Technologies - **React 19**: Latest React with server components and concurrent features - **TypeScript 5.5**: Full type safety and enhanced developer experience - **Tailwind CSS 3.4**: Utility-first CSS framework with JIT compilation - **Radix UI**: Unstyled, accessible component primitives - **Framer Motion**: Production-ready motion library for animations - **Lucide React**: Beautifully designed icon library ### Design System Features - **Dark Mode**: Comprehensive dark mode support with system detection - **Responsive Design**: Mobile-first responsive components - **Accessibility**: WCAG 2.1 AA compliance with proper ARIA support - **Theming**: CSS variables for comprehensive theme customization - **Animation**: Smooth animations and transitions with Framer Motion ### Integration Benefits - **Developer Experience**: Excellent DX with TypeScript and hot reloading - **Customization**: Fully customizable with Tailwind CSS classes - **Performance**: Optimized bundle size and runtime performance - **Accessibility**: Built-in accessibility with Radix UI primitives - **Consistency**: Design system ensures consistent UI across applications --- # Core Implementation (Level 2) ## shadcn\/ui Architecture Intelligence ```python # AI-powered shadcn\/ui architecture optimization with Context7 class ShadcnUIArchitectOptimizer: def __init__(self): self.context7_client = Context7Client() self.component_analyzer = ComponentAnalyzer() self.theme_optimizer = ThemeOptimizer() async def design_optimal_shadcn_architecture(self, requirements: DesignSystemRequirements) -> ShadcnUIArchitecture: """Design optimal shadcn\/ui architecture using AI analysis.""" # Get latest shadcn\/ui and React documentation via Context7 shadcn_docs = await self.context7_client.get_library_docs( context7_library_id='\/shadcn-ui\/docs', topic="component library design system theming accessibility 2025", tokens=3000 ) react_docs = await self.context7_client.get_library_docs( context7_library_id='\/react\/docs', topic="hooks server-components performance optimization 2025", tokens=2000 ) # Optimize component selection component_selection = self.component_analyzer.optimize_component_selection( requirements.ui_components, requirements.user_needs, shadcn_docs ) # Optimize theme configuration theme_configuration = self.theme_optimizer.optimize_theme_system( requirements.brand_guidelines, requirements.accessibility_requirements, shadcn_docs ) return ShadcnUIArchitecture( component_library=component_selection, theme_system=theme_configuration, accessibility_compliance=self._ensure_accessibility_compliance( requirements.accessibility_requirements ), performance_optimization=self._optimize_component_performance( component_selection ), integration_patterns=self._design_integration_patterns( requirements.framework_stack ), customization_strategy=self._plan_customization_strategy( requirements.customization_needs ) ) ``` ## Component System Implementation ```typescript \/\/ Advanced shadcn\/ui component with TypeScript and modern patterns import * as React from "react"; import { Slot } from "@radix-ui\/react-slot"; import { cva, type VariantProps } from "class-variance-authority"; import { cn } from "@\/lib\/utils"; \/\/ Component variants using class-variance-authority const buttonVariants = cva( "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50", { variants: { variant: { default: "bg-primary text-primary-foreground shadow hover:bg-primary\/90", destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive\/90", outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground", secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary\/80", ghost: "hover:bg-accent hover:text-accent-foreground", link: "text-primary underline-offset-4 hover:underline", }, size: { default: "h-9 px-4 py-2", sm: "h-8 rounded-md px-3 text-xs", lg: "h-10 rounded-md px-8", icon: "h-9 w-9", }, }, defaultVariants: { variant: "default", size: "default", }, } ); export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps { asChild?: boolean; loading?: boolean; loadingText?: string; } \/\/ Enhanced button component with loading state and accessibility const Button = React.forwardRef( ({ className, variant, size, asChild = false, loading, loadingText, children, disabled, ...props }, ref) => { const Comp = asChild ? Slot : "button"; return ( {loading && (

)} {loading && loadingText ? ( {loadingText} <\/span> ) : null} {loading ? loadingText || children : children} <\/Comp> ); } ); Button.displayName = "Button"; export { Button, buttonVariants }; \/\/ Advanced form component with validation import { useForm } from "react-hook-form"; import { zodResolver } from "@hookform\/resolvers\/zod"; import { z } from "zod"; const formSchema = z.object({ username: z.string().min(2, { message: "Username must be at least 2 characters.", }), email: z.string().email({ message: "Please enter a valid email address.", }), password: z.string().min(8, { message: "Password must be at least 8 characters.", }), }); type FormValues = z.infer; export function UserForm() { const form = useForm({ resolver: zodResolver(formSchema), defaultValues: { username: "", email: "", password: "", }, }); const onSubmit = async (data: FormValues) => { try { \/\/ Handle form submission console.log("Form data:", data); } catch (error) { console.error("Submission error:", error); } }; return (

Username<\/Label> {form.formState.errors.username && (

{form.formState.errors.username.message} <\/p> )} <\/div>

Email<\/Label> {form.formState.errors.email && (

{form.formState.errors.email.message} <\/p> )} <\/div>

Password<\/Label> {form.formState.errors.password && (

{form.formState.errors.password.message} <\/p> )} <\/div>

Multi-Step Form<\/h1> Step {currentStep + 1} of {steps.length}: {steps[currentStep].title} <\/p> <\/div> <\/div>

Multi-Step Form<\/h1>
Step {currentStep + 1} of {steps.length}: {steps[currentStep].title} <\/p> <\/div>
<\/div>