Enterprise Frontend Development with AI-powered modern architecture, Context7 integration, and intelligent component orchestration for scalable user interfaces
| 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 |
Enterprise Frontend Development expert with AI-powered modern architecture, Context7 integration, and intelligent component orchestration for scalable user interfaces.
Revolutionary v4.0.0 capabilities:
Automatic triggers:
Manual invocation:
# 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)
)
// 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<typeof UserSchema>;
// 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<UserListProps> = React.memo(({
onUserSelect,
selectedUserId,
filters
}) => {
const [expandedUsers, setExpandedUsers] = useState<Set<string>>(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 <UserListSkeleton />;
if (error) return <ErrorMessage error={error} onRetry={refreshUsers} />;
if (!users) return <div>No users found</div>;
return (
<motion.div
className="user-list"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.3 }}
>
<div className="user-list-header">
<h2>Users ({filteredUsers.length})</h2>
<button onClick={refreshUsers} className="refresh-button">
Refresh
</button>
</div>
<AnimatePresence>
{filteredUsers.map((user) => (
<UserCard
key={user.id}
user={user}
isExpanded={expandedUsers.has(user.id)}
isSelected={selectedUserId === user.id}
onClick={handleUserClick}
onToggleExpand={toggleUserExpansion}
/>
))}
</AnimatePresence>
</motion.div>
);
});
UserList.displayName = 'UserList';
// Individual user card component
interface UserCardProps {
user: User;
isExpanded: boolean;
isSelected: boolean;
onClick: (user: User) => void;
onToggleExpand: (userId: string) => void;
}
const UserCard: React.FC<UserCardProps> = React.memo(({
user,
isExpanded,
isSelected,
onClick,
onToggleExpand
}) => {
const handleClick = useCallback(() => {
onClick(user);
}, [onClick, user]);
const handleExpandClick = useCallback((e: React.MouseEvent) => {
e.stopPropagation();
onToggleExpand(user.id);
}, [onToggleExpand, user.id]);
return (
<motion.div
className={`user-card ${isSelected ? 'selected' : ''}`}
onClick={handleClick}
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.98 }}
layout
>
<div className="user-card-header">
<img
src={user.avatar || `https://api.dicebear.com/7.x/avataaars/svg?seed=${user.id}`}
alt={user.name}
className="user-avatar"
/>
<div className="user-info">
<h3 className="user-name">{user.name}</h3>
<p className="user-email">{user.email}</p>
<span className={`user-role ${user.role}`}>{user.role}</span>
</div>
<button
onClick={handleExpandClick}
className="expand-button"
aria-label={isExpanded ? 'Collapse' : 'Expand'}
>
{isExpanded ? '−' : '+'}
</button>
</div>
<AnimatePresence>
{isExpanded && (
<motion.div
className="user-details"
initial={{ height: 0, opacity: 0 }}
animate={{ height: 'auto', opacity: 1 }}
exit={{ height: 0, opacity: 0 }}
transition={{ duration: 0.2 }}
>
<p>Member since: {user.createdAt.toLocaleDateString()}</p>
<div className="user-actions">
<button className="edit-button">Edit</button>
<button className="message-button">Message</button>
</div>
</motion.div>
)}
</AnimatePresence>
</motion.div>
);
});
UserCard.displayName = 'UserCard';
// Advanced state management with Zustand and TypeScript
import { create } from 'zustand';
import { devtools, subscribeWithSelector } from 'zustand/middleware';
import { immer } from 'zustand/middleware/immer';
// Type definitions
interface User {
id: string;
name: string;
email: string;
preferences: {
theme: 'light' | 'dark';
language: string;
notifications: boolean;
};
}
interface AppState {
// User state
currentUser: User | null;
users: User[];
// UI state
theme: 'light' | 'dark';
sidebarOpen: boolean;
activeModal: string | null;
// Loading states
loading: {
users: boolean;
auth: boolean;
};
// Error states
errors: {
users: string | null;
auth: string | null;
};
}
interface AppActions {
// User actions
setCurrentUser: (user: User | null) => void;
updateUserPreferences: (preferences: Partial<User['preferences']>) => void;
// UI actions
setTheme: (theme: 'light' | 'dark') => void;
toggleSidebar: () => void;
setActiveModal: (modal: string | null) => void;
// Data actions
fetchUsers: () => Promise<void>;
addUser: (user: Omit<User, 'id'>) => Promise<void>;
// Error handling
clearError: (key: keyof AppState['errors']) => void;
}
// Create store with middleware
export const useAppStore = create<AppState & AppActions>()(
devtools(
subscribeWithSelector(
immer((set, get) => ({
// Initial state
currentUser: null,
users: [],
theme: 'light',
sidebarOpen: true,
activeModal: null,
loading: { users: false, auth: false },
errors: { users: null, auth: null },
// User actions
setCurrentUser: (user) => set((state) => {
state.currentUser = user;
}),
updateUserPreferences: (preferences) => set((state) => {
if (state.currentUser) {
Object.assign(state.currentUser.preferences, preferences);
}
}),
// UI actions
setTheme: (theme) => set((state) => {
state.theme = theme;
}),
toggleSidebar: () => set((state) => {
state.sidebarOpen = !state.sidebarOpen;
}),
setActiveModal: (modal) => set((state) => {
state.activeModal = modal;
}),
// Data actions
fetchUsers: async () => {
set((state) => { state.loading.users = true; });
try {
const response = await fetch('/api/users');
const users = await response.json();
set((state) => {
state.users = users;
state.loading.users = false;
state.errors.users = null;
});
} catch (error) {
set((state) => {
state.loading.users = false;
state.errors.users = error instanceof Error ? error.message : 'Failed to fetch users';
});
}
},
addUser: async (userData) => {
try {
const response = await fetch('/api/users', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(userData),
});
const newUser = await response.json();
set((state) => {
state.users.push(newUser);
});
} catch (error) {
set((state) => {
state.errors.users = error instanceof Error ? error.message : 'Failed to add user';
});
}
},
// Error handling
clearError: (key) => set((state) => {
state.errors[key] = null;
}),
}))
),
{ name: 'app-store' }
)
);
// Selectors for optimized re-renders
export const useCurrentUser = () => useAppStore((state) => state.currentUser);
export const useUsers = () => useAppStore((state) => state.users);
export const useTheme = () => useAppStore((state) => state.theme);
export const useSidebarOpen = () => useAppStore((state) => state.sidebarOpen);
// Derived state selectors
export const useActiveUsers = () => {
return useAppStore((state) =>
state.users.filter(user => user.preferences.notifications)
);
};
// Persistence middleware
useAppStore.subscribe(
(state) => ({
theme: state.theme,
sidebarOpen: state.sidebarOpen,
currentUser: state.currentUser,
}),
(persistedState) => {
localStorage.setItem('app-state', JSON.stringify(persistedState));
}
);
// Advanced performance optimization techniques
export class PerformanceOptimizer {
// Code splitting with dynamic imports
static lazyLoadComponents() {
const LazyComponent = React.lazy(() => import('./HeavyComponent'));
return (
<Suspense fallback={<ComponentSkeleton />}>
<LazyComponent />
</Suspense>
);
}
// Image optimization with next/image
static OptimizedImage: React.FC<{
src: string;
alt: string;
width: number;
height: number;
}> = ({ src, alt, width, height }) => {
return (
<Image
src={src}
alt={alt}
width={width}
height={height}
placeholder="blur"
blurDataURL="data:image/jpeg;base64,..."
loading="lazy"
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
/>
);
};
// Virtual scrolling for large lists
static useVirtualScrolling<T>(
items: T[],
itemHeight: number,
containerHeight: number
) {
const [scrollTop, setScrollTop] = useState(0);
const visibleItems = useMemo(() => {
const startIndex = Math.floor(scrollTop / itemHeight);
const endIndex = Math.min(
startIndex + Math.ceil(containerHeight / itemHeight) + 1,
items.length
);
return items.slice(startIndex, endIndex).map((item, index) => ({
item,
index: startIndex + index,
top: (startIndex + index) * itemHeight,
}));
}, [items, itemHeight, containerHeight, scrollTop]);
return {
visibleItems,
totalHeight: items.length * itemHeight,
onScroll: useCallback((e: React.UIEvent) => {
setScrollTop(e.currentTarget.scrollTop);
}, []),
};
}
// Request optimization with React Query
static useOptimizedQuery<T>(
queryKey: string[],
queryFn: () => Promise<T>,
options: {
staleTime?: number;
cacheTime?: number;
refetchOnWindowFocus?: boolean;
} = {}
) {
return useQuery({
queryKey,
queryFn,
staleTime: options.staleTime || 5 * 60 * 1000, // 5 minutes
cacheTime: options.cacheTime || 10 * 60 * 1000, // 10 minutes
refetchOnWindowFocus: options.refetchOnWindowFocus || false,
retry: 3,
retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 30000),
});
}
}
// Comprehensive accessibility implementation
export class AccessibilityManager {
// ARIA attributes management
static useAriaAttributes() {
const [announcements, setAnnouncements] = useState<string[]>([]);
const announce = useCallback((message: string, priority: 'polite' | 'assertive' = 'polite') => {
setAnnouncements(prev => [...prev, { message, priority }]);
setTimeout(() => {
setAnnouncements(prev => prev.slice(1));
}, 1000);
}, []);
return {
announce,
announcements,
};
}
// Keyboard navigation implementation
static useKeyboardNavigation(
items: string[],
onSelect: (item: string) => void
) {
const [focusedIndex, setFocusedIndex] = useState(0);
const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
switch (e.key) {
case 'ArrowDown':
e.preventDefault();
setFocusedIndex(prev => (prev + 1) % items.length);
break;
case 'ArrowUp':
e.preventDefault();
setFocusedIndex(prev => (prev - 1 + items.length) % items.length);
break;
case 'Enter':
case ' ':
e.preventDefault();
onSelect(items[focusedIndex]);
break;
case 'Escape':
e.preventDefault();
setFocusedIndex(-1);
break;
}
}, [items, focusedIndex, onSelect]);
return {
focusedIndex,
handleKeyDown,
setFocusedIndex,
};
}
// Focus management
static useFocusManagement() {
const [focusableElements, setFocusableElements] = useState<HTMLElement[]>([]);
useEffect(() => {
const updateFocusableElements = () => {
const elements = Array.from(
document.querySelectorAll(
'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
)
) as HTMLElement[];
setFocusableElements(elements);
};
updateFocusableElements();
document.addEventListener('DOMContentLoaded', updateFocusableElements);
return () => {
document.removeEventListener('DOMContentLoaded', updateFocusableElements);
};
}, []);
const trapFocus = useCallback((container: HTMLElement) => {
const firstElement = container.querySelector(
'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
) as HTMLElement;
if (firstElement) {
firstElement.focus();
}
}, []);
return {
focusableElements,
trapFocus,
};
}
}
// Advanced i18n implementation with react-i18next
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
// Resource configuration
const resources = {
en: {
translation: {
welcome: 'Welcome',
userManagement: 'User Management',
addNewUser: 'Add New User',
searchUsers: 'Search Users',
noUsersFound: 'No users found',
error: {
fetchUsersFailed: 'Failed to fetch users',
addUserFailed: 'Failed to add user',
},
},
},
es: {
translation: {
welcome: 'Bienvenido',
userManagement: 'Gestión de Usuarios',
addNewUser: 'Agregar Nuevo Usuario',
searchUsers: 'Buscar Usuarios',
noUsersFound: 'No se encontraron usuarios',
error: {
fetchUsersFailed: 'Error al obtener usuarios',
addUserFailed: 'Error al agregar usuario',
},
},
},
fr: {
translation: {
welcome: 'Bienvenue',
userManagement: 'Gestion des Utilisateurs',
addNewUser: 'Ajouter un Nouvel Utilisateur',
searchUsers: 'Rechercher des Utilisateurs',
noUsersFound: 'Aucun utilisateur trouvé',
error: {
fetchUsersFailed: 'Échec de la récupération des utilisateurs',
addUserFailed: 'Échec de l\'ajout d\'utilisateur',
},
},
},
};
// Initialize i18n
i18n
.use(LanguageDetector)
.use(initReactI18next)
.init({
resources,
fallbackLng: 'en',
debug: process.env.NODE_ENV === 'development',
interpolation: {
escapeValue: false,
},
detection: {
order: ['localStorage', 'navigator', 'htmlTag'],
caches: ['localStorage'],
},
});
// Type-safe translation hook
export const useTranslation = () => {
const { t } = i18next.useTranslation();
return {
t: (key: string, options?: i18n.TOptions) => t(key, options),
changeLanguage: i18n.changeLanguage,
currentLanguage: i18n.language,
};
};
// Language switcher component
export const LanguageSwitcher: React.FC = () => {
const { currentLanguage, changeLanguage } = useTranslation();
const languages = [
{ code: 'en', name: 'English', flag: '🇺🇸' },
{ code: 'es', name: 'Español', flag: '🇪🇸' },
{ code: 'fr', name: 'Français', flag: '🇫🇷' },
];
return (
<div className="language-switcher">
{languages.map((lang) => (
<button
key={lang.code}
onClick={() => changeLanguage(lang.code)}
className={currentLanguage === lang.code ? 'active' : ''}
aria-label={`Switch to ${lang.name}`}
>
<span>{lang.flag}</span>
<span>{lang.name}</span>
</button>
))}
</div>
);
};
create_component(name, props, children) - Create reusable componentuse_custom_hook(logic, dependencies) - Create custom React hookoptimize_performance(component) - Apply performance optimizationsimplement_accessibility(component) - Add accessibility featuresconfigure_i18n(languages, translations) - Set up internationalizationget_latest_react_documentation() - React docs via Context7analyze_frontend_patterns() - Frontend best practices via Context7optimize_component_architecture() - Component optimization via Context7moai-baas-foundation (Enterprise frontend architecture)moai-essentials-perf (Performance optimization)moai-lib-shadcn-ui (Component library integration)moai-domain-backend (Backend API integration)moai-security-api (Frontend security implementation)moai-foundation-trust (Accessibility and compliance)moai-domain-testing (Frontend testing strategies)moai-baas-vercel-ext (Frontend deployment optimization)End of Skill | Updated 2025-11-13
End of Enterprise Frontend Development Expert v4.0.0
