메뉴
Enterprise Frontend Development with AI-powered modern architecture, Context7 integration, and intelligent component orchestration for scalable user interfaces
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.
npx skills add https://github.com/AJBcoding/claude-skill-eval --skill moai-domain-frontend명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.
로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.
SKILL.md 표시 중
SOC 직업 분류 기준
| name | moai-domain-frontend |
| version | 4.0.0 |
| created | 2025-11-11T00:00:00.000Z |
| updated | 2025-11-13T00:00:00.000Z |
| 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"] |
| 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}
{isExpanded ? '−' : '+'}
{isExpanded && (
Member since: {user.createdAt.toLocaleDateString()}
Edit
Message
)}
);
});
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