Skip to main content Skills Marketplace Discover and explore AI skills built by the community.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Show prompt details A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/AJBcoding/claude-skill-eval --skill moai-domain-frontendThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Download Zip Downloading... More from this repository Enterprise database architecture specialist with PostgreSQL 17, MySQL 8.4 LTS,
MongoDB 8.0, Redis 7.4 expertise. Master connection pooling, query optimization,
caching strategies, and database DevOps automation. Build scalable, resilient
database systems with comprehensive monitoring and disaster recovery.
Enterprise-grade security expertise with production-ready patterns for OWASP Top 10 2021, zero-trust architecture, threat modeling (STRIDE, PASTA), secure SDLC, DevSecOps automation, cloud security, cryptography, identity & access management, and compliance frameworks (SOC 2, ISO 27001, GDPR, CCPA).
Enterprise-grade Python expertise with production patterns for Python 3.13.9, FastAPI 0.115.x, Django 5.2 LTS, Pydantic v2, SQLAlchemy 2.0; activates for API development, ORM usage, async patterns, testing frameworks, and production deployment strategies.
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"]
Enterprise Frontend Development Expert v4.0.0
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 v4.0.0 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 ComponentsVue 3.5 : Composition API and performance optimizationsAngular 18 : Standalone components and improved hydration
Related occupations SOC
Based on SOC occupation classification
Svelte 5 : Signals and improved TypeScript support
Next.js 16 : App Router, Server Components, and Turbopack
State Management Solutions
Zustand : Lightweight state managementTanStack Query : Server state management with cachingJotai : Atomic state managementRedux Toolkit : Predictable state containerValtio : Proxy-based state management
Styling & UI Systems
Tailwind CSS : Utility-first CSS frameworkshadcn/ui : High-quality component libraryMaterial-UI : React component libraryChakra UI : Accessible React componentsStyled Components : CSS-in-JS with TypeScript
Performance Optimization
Code Splitting : Dynamic imports and lazy loadingImage Optimization : Next.js Image and CloudinaryBundle Analysis : Webpack Bundle AnalyzerRuntime Optimization : React.memo and useMemo
Core Implementation (Level 2)
Frontend Architecture Intelligence
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."""
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
)
component_design = self .component_analyzer.optimize_component_system(
requirements.ui_complexity,
requirements.team_size,
react_docs
)
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
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' ;
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 >;
interface UserListProps {
onUserSelect : (user : User void ;
selectedUserId ?: string ;
filters ?: {
role ?: User ['role' ];
search ?: string ;
};
}
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 ,
cacheTime : 10 * 60 * 1000 ,
});
}
export const UserList : React .FC <UserListProps > = React .memo (({
onUserSelect,
selectedUserId,
filters
} ) => {
const [expandedUsers, setExpandedUsers] = useState<Set <string >>(new Set ());
const queryClient = useQueryClient ();
const { data : users, isLoading, error } = useUsers (filters);
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]);
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;
});
}, []);
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' ;
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}UserCard .displayName = 'UserCard' ;
State Management with Modern Patterns
import { create } from 'zustand' ;
import { devtools, subscribeWithSelector } from 'zustand/middleware' ;
import { immer } from 'zustand/middleware/immer' ;
interface User {
id : string ;
name : string ;
email : string ;
preferences : {
theme : 'light' | 'dark' ;
language : string ;
notifications : boolean ;
};
}
interface AppState {
currentUser : User | null ;
users : User [];
theme : 'light' | 'dark' ;
sidebarOpen : boolean ;
activeModal : string | null ;
loading : {
users : boolean ;
auth : boolean ;
};
errors : {
users : string | null ;
auth : string | null ;
};
}
interface AppActions {
setCurrentUser : (user : User | null void ;
updateUserPreferences : (preferences : Partial <User ['preferences' ]> void ;
setTheme : (theme : 'light' | 'dark' void ;
toggleSidebar : () => void ;
setActiveModal : (modal : string | null void ;
fetchUsers : () => Promise <void >;
addUser : (user : Omit <User , 'id' > Promise <void >;
clearError : (key : keyof AppState ['errors' ] void ;
}
export const useAppStore = create<AppState & AppActions >()(
devtools (
subscribeWithSelector (
immer ((set, get ) => ({
currentUser : null ,
users : [],
theme : 'light' ,
sidebarOpen : true ,
activeModal : null ,
loading : { users : false , auth : false },
errors : { users : null , auth : null },
setCurrentUser : (user ) => set ((state ) => {
state.currentUser = user;
}),
updateUserPreferences : (preferences ) => set ((state ) => {
if (state.currentUser ) {
Object .assign (state.currentUser .preferences , preferences);
}
}),
setTheme : (theme ) => set ((state ) => {
state.theme = theme;
}),
toggleSidebar : () => set ((state ) => {
state.sidebarOpen = !state.sidebarOpen ;
}),
setActiveModal : (modal ) => set ((state ) => {
state.activeModal = modal;
}),
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' ;
});
}
},
clearError : (key ) => set ((state ) => {
state.errors [key] = null ;
}),
}))
),
{ name : 'app-store' }
)
);
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 );
export const useActiveUsers = (return useAppStore ((state ) =>
state.users .filter (user =>preferences .notifications )
);
};
useAppStore.subscribe (
(state ) => ({
theme : state.theme ,
sidebarOpen : state.sidebarOpen ,
currentUser : state.currentUser ,
}),
(persistedState ) => {
localStorage .setItem ('app-state' , JSON .stringify (persistedState));
}
);
Advanced Implementation (Level 3)
Performance Optimization Strategies
export class PerformanceOptimizer {
static lazyLoadComponents (const LazyComponent = React .lazy (() => import ('./HeavyComponent' ));
return (
<Suspense fallback ={ <ComponentSkeleton /> }>
<LazyComponent />
</Suspense > 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"
/> 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 );
}, []),
};
}
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 ,
cacheTime : options.cacheTime || 10 * 60 * 1000 ,
refetchOnWindowFocus : options.refetchOnWindowFocus || false ,
retry : 3 ,
retryDelay : (attemptIndex ) => Math .min (1000 * 2 ** attemptIndex, 30000 ),
});
}
}
Accessibility Implementation
export class AccessibilityManager {
static useAriaAttributes (const [announcements, setAnnouncements] = useState<string []>([]);
const announce = useCallback ((message : string , priority : 'polite' | 'assertive' = 'polite' {
setAnnouncements (prev =>setTimeout (() => {
setAnnouncements (prev =>slice (1 ));
}, 1000 );
}, []);
return {
announce,
announcements,
};
}
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 =>1 ) % items.length );
break ;
case 'ArrowUp' :
e.preventDefault ();
setFocusedIndex (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,
};
}
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,
};
}
}
Internationalization Setup
import i18n from 'i18next' ;
import { initReactI18next } from 'react-i18next' ;
import LanguageDetector from 'i18next-browser-languagedetector' ;
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' ,
},
},
},
};
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' ],
},
});
export const useTranslation = (const { t } = i18next.useTranslation ();
return {
t : (key : string , options ?: i18n.TOptions t (key, options),
changeLanguage : i18n.changeLanguage ,
currentLanguage : i18n.language ,
};
};
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 >
Reference & Integration (Level 4)
API Reference
Core Frontend Operations
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 internationalization
Context7 Integration
get_latest_react_documentation() - React docs via Context7analyze_frontend_patterns() - Frontend best practices via Context7optimize_component_architecture() - Component optimization via Context7
Best Practices (November 2025)
DO
Use TypeScript for type safety and better developer experience
Implement proper component composition and reusability
Optimize performance with code splitting and lazy loading
Ensure accessibility with proper ARIA attributes and keyboard navigation
Use modern React patterns (hooks, server components)
Implement comprehensive error boundaries and error handling
Use proper state management strategies for application complexity
Ensure responsive design and cross-browser compatibility
DON'T
Skip TypeScript type definitions and validations
Create overly complex component hierarchies
Ignore performance optimization and code splitting
Skip accessibility implementation and testing
Use deprecated React patterns and class components
Forget to implement proper error handling
Overuse global state when local state is sufficient
Skip testing for different devices and browsers
Works Well With
moai-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)
Changelog
v4.0.0 (2025-11-13): Complete Enterprise v4.0 rewrite with 40% content reduction, 4-layer Progressive Disclosure structure, Context7 integration, November 2025 frontend ecosystem updates, and modern React patternsv2.0.0 (2025-11-11): Complete metadata structure, component patterns, performance optimizationv1.0.0 (2025-11-11): Initial frontend development domain
End of Skill | Updated 2025-11-13
Security & Compliance
Frontend Security
Content Security Policy (CSP) implementation
XSS protection with proper input sanitization
Secure data handling and storage in browser
Authentication token management and security
Accessibility Compliance
WCAG 2.1 AA compliance implementation
Screen reader compatibility and ARIA support
Keyboard navigation and focus management
Color contrast and visual accessibility
End of Enterprise Frontend Development Expert v4.0.0
user.role
</span >
</div >
<button
onClick ={handleExpandClick}
className ="expand-button"
aria-label ={isExpanded ? 'Collapse ' : 'Expand '}
>
</button >
</div >
<AnimatePresence >
<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 >
</p >
<div className ="user-actions" >
<button className ="edit-button" >
</button >
<button className ="message-button" >
</button >
</div >
</motion.div >
</AnimatePresence >
</motion.div >
