--- name: "moai-domain-frontend" version: "4.0.0" created: 2025-11-11 updated: 2025-11-13 status: stable description: Enterprise Frontend Development with AI-powered modern architecture, Context7 integration, and intelligent component orchestration for scalable user interfaces keywords: ['frontend', 'react', 'vue', 'angular', 'typescript', 'component-architecture', '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 Frontend Development Expert ## Skill Metadata | Field | Value | | ----- | ----- | | **Skill Name** | moai-domain-frontend | | **Version** | 4.0.0 (2025-11-13) | | **Tier** | Enterprise Frontend Development Expert | | **AI-Powered** | ✅ Context7 Integration, Intelligent Architecture | | **Auto-load** | On demand when frontend keywords detected | --- ## What It Does Enterprise Frontend Development expert with AI-powered modern architecture, Context7 integration, and intelligent component orchestration for scalable user interfaces. **Revolutionary capabilities**: - 🤖 **AI-Powered Frontend Architecture** using Context7 MCP for latest frontend patterns - 📊 **Intelligent Component Orchestration** with automated design system optimization - 🚀 **Modern Framework Integration** with AI-driven performance optimization - 🔗 **Enterprise User Experience** with zero-configuration accessibility and internationalization - 📈 **Predictive Performance Analytics** with usage forecasting and optimization insights --- ## When to Use **Automatic triggers**: - Frontend architecture and modern UI framework discussions - Component design system and user experience planning - Performance optimization and accessibility implementation - Responsive design and cross-platform compatibility **Manual invocation**: - Designing enterprise frontend architectures with optimal UX patterns - Implementing modern component systems and design tokens - Planning frontend performance optimization strategies - Creating accessible and international user interfaces --- # Quick Reference (Level 1) ## Modern Frontend Stack (November 2025) ### Core Framework Ecosystem - **React 19**: Latest with concurrent features and Server Components - **Vue 3.5**: Composition API and performance optimizations - **Angular 18**: Standalone components and improved hydration - **Svelte 5**: Signals and improved TypeScript support - **Next.js 16**: App Router, Server Components, and Turbopack ### State Management Solutions - **Zustand**: Lightweight state management - **TanStack Query**: Server state management with caching - **Jotai**: Atomic state management - **Redux Toolkit**: Predictable state container - **Valtio**: Proxy-based state management ### Styling & UI Systems - **Tailwind CSS**: Utility-first CSS framework - **shadcn\/ui**: High-quality component library - **Material-UI**: React component library - **Chakra UI**: Accessible React components - **Styled Components**: CSS-in-JS with TypeScript ### Performance Optimization - **Code Splitting**: Dynamic imports and lazy loading - **Image Optimization**: Next.js Image and Cloudinary - **Bundle Analysis**: Webpack Bundle Analyzer - **Runtime Optimization**: React.memo and useMemo --- # Core Implementation (Level 2) ## Frontend Architecture Intelligence ```python # AI-powered frontend architecture optimization with Context7 class FrontendArchitectOptimizer: def __init__(self): self.context7_client = Context7Client() self.component_analyzer = ComponentAnalyzer() self.performance_optimizer = PerformanceOptimizer() async def design_optimal_frontend_architecture(self, requirements: FrontendRequirements) -> FrontendArchitecture: """Design optimal frontend architecture using AI analysis.""" # Get latest frontend documentation via Context7 react_docs = await self.context7_client.get_library_docs( context7_library_id='\/react\/docs', topic="hooks server-components performance optimization 2025", tokens=3000 ) nextjs_docs = await self.context7_client.get_library_docs( context7_library_id='\/vercel\/docs', topic="next.js app router optimization deployment 2025", tokens=2000 ) # Optimize component architecture component_design = self.component_analyzer.optimize_component_system( requirements.ui_complexity, requirements.team_size, react_docs ) # Optimize performance strategy performance_strategy = self.performance_optimizer.design_performance_strategy( requirements.performance_targets, requirements.user_base, nextjs_docs ) return FrontendArchitecture( framework_selection=self._select_framework(requirements), component_system=component_design, state_management=self._design_state_management(requirements), styling_strategy=self._design_styling_system(requirements), performance_optimization=performance_strategy, accessibility_compliance=self._ensure_accessibility(requirements), internationalization=self._configure_i18n(requirements) ) ``` ## Modern React Component Architecture ```typescript \/\/ Advanced React component with TypeScript and modern patterns import React, { useState, useEffect, useMemo, useCallback } from 'react'; import { useQuery, useMutation, useQueryClient } from '@tanstack\/react-query'; import { z } from 'zod'; import { motion, AnimatePresence } from 'framer-motion'; \/\/ Type definitions with Zod for runtime validation const UserSchema = z.object({ id: z.string(), name: z.string(), email: z.string().email(), avatar: z.string().url().optional(), role: z.enum(['admin', 'user', 'moderator']), createdAt: z.date(), }); type User = z.infer; \/\/ Props interface with strict typing interface UserListProps { onUserSelect: (user: User) => void; selectedUserId?: string; filters?: { role?: User['role']; search?: string; }; } \/\/ Custom hook for user data management function useUsers(filters?: UserListProps['filters']) { return useQuery({ queryKey: ['users', filters], queryFn: async () => { const params = new URLSearchParams(); if (filters?.role) params.append('role', filters.role); if (filters?.search) params.append('search', filters.search); const response = await fetch(`\/api\/users?${params}`); const data = await response.json(); return z.array(UserSchema).parse(data); }, staleTime: 5 * 60 * 1000, \/\/ 5 minutes cacheTime: 10 * 60 * 1000, \/\/ 10 minutes }); } \/\/ Main component with performance optimizations export const UserList: React.FC = React.memo(({ onUserSelect, selectedUserId, filters }) => { const [expandedUsers, setExpandedUsers] = useState>(new Set()); const queryClient = useQueryClient(); \/\/ Data fetching with React Query const { data: users, isLoading, error } = useUsers(filters); \/\/ Memoized filtered users for performance const filteredUsers = useMemo(() => { if (!users) return []; return users.filter(user => { if (filters?.role && user.role !== filters.role) return false; if (filters?.search && !user.name.toLowerCase().includes(filters.search.toLowerCase())) { return false; } return true; }); }, [users, filters]); \/\/ Optimized callback functions const handleUserClick = useCallback((user: User) => { onUserSelect(user); }, [onUserSelect]); const toggleUserExpansion = useCallback((userId: string) => { setExpandedUsers(prev => { const newSet = new Set(prev); if (newSet.has(userId)) { newSet.delete(userId); } else { newSet.add(userId); } return newSet; }); }, []); \/\/ Invalidate and refetch function const refreshUsers = useCallback(() => { queryClient.invalidateQueries({ queryKey: ['users'] }); }, [queryClient]); if (isLoading) return ; if (error) return ; if (!users) return

No users found<\/div>; return (

Users ({filteredUsers.length})<\/h2>

{user.name}<\/h3>
{user.email}<\/p> {user.role}<\/span> <\/div>

{user.name}<\/h3> {user.email}<\/p> {user.role}<\/span> <\/div>

{user.name}<\/h3>
{user.email}<\/p> {user.role}<\/span> <\/div>