Frontend Development Specialist
Quick Reference (30 seconds)
Modern Frontend Development - Comprehensive frontend patterns covering React 19, Next.js 16, Vue 3.5, and modern UI/UX architecture.
Core Capabilities:
- React 19: Server components, concurrent features, optimized patterns
- Next.js 16: App router, server actions, advanced optimization
- 🟢 Vue 3.5: Composition API, TypeScript integration, reactivity
- Component Architecture: Design systems, component libraries, story-driven development
- Responsive Design: Mobile-first, accessibility, performance optimization
When to Use:
- Modern web application development
- Component library creation and management
- Performance optimization for frontend
- UI/UX implementation with accessibility
- Cross-platform frontend development
Implementation Guide
React 19 Server Components
Modern React Architecture:
// app/components/UserProfile.tsx
import { cache } from 'react'
import { getUser } from '@/lib/users'
const getUserCached = cache(getUser)
interface UserProfileProps {
userId: string
}
export default async function UserProfile({ userId }: UserProfileProps) {
const user = await getUserCached(userId)
return (
<div className="user-profile">
<h2>{user.name}</h2>
<p>{user.email}</p>
<ClientActions userId={userId} />
</div>
)
}
'use client'
function ClientActions({ userId }: { userId: string }) {
const [isFollowing, setIsFollowing] = useState(false)
return (
<button onClick={() => setIsFollowing(!isFollowing)}>
{isFollowing ? 'Unfollow' : 'Follow'}
</button>
)
}Concurrent Features:
import { Suspense } from 'react'
import { ErrorBoundary } from 'react-error-boundary'
function App() {
return (
<ErrorBoundary fallback={<div>Something went wrong</div>}>
<Suspense fallback={<Loading />}>
<UserProfile userId="123" />
</Suspense>
</ErrorBoundary>
)
}Next.js 16 App Router
Server Actions and Data Fetching:
// app/actions/users.ts
'use server'
import { revalidatePath } from 'next/cache'
import { redirect } from 'next/navigation'
export async function createUser(formData: FormData) {
const name = formData.get('name') as string
const email = formData.get('email') as string
const user = await db.user.create({
data: { name, email }
})
revalidatePath('/users')
redirect(`/users/${user.id}`)
}
// app/users/page.tsx
import { createUser } from '../actions/users'
export default function UsersPage() {
return (
<form action={createUser}>
<input name="name" placeholder="Name" required />
<input name="email" type="email" placeholder="Email" required />
<button type="submit">Create User</button>
</form>
)
}Advanced Route Patterns:
// app/[category]/[slug]/page.tsx
interface PageProps {
params: { category: string; slug: string }
searchParams: { [key: string]: string | string[] | undefined }
}
export default async function Page({ params, searchParams }: PageProps) {
const { category, slug } = params
const page = searchParams.page ?? '1'
const data = await getData(category, slug, page)
return <ContentComponent data={data} />
}
// Generate static params for performance
export async function generateStaticParams() {
const posts = await getAllPosts()
return posts.map((post) => ({
category: post.category,
slug: post.slug
}))
}Vue 3.5 Composition API
Modern Vue Patterns:
<!-- components/UserCard.vue -->
<script setup lang="ts">
import { ref, computed, onMounted, watchEffect } from 'vue'
interface User {
id: string
name: string
email: string
}
interface Props {
userId: string
}
const props = defineProps<Props>()
const emit = defineEmits<{
userLoaded: [user: User]
}>()
const user = ref<User | null>(null)
const loading = ref(true)
const error = ref<string | null>(null)
const initials = computed(() => {
return user.value?.name
.split(' ')
.map(n => n[0])
.join('')
.toUpperCase() ?? '??'
})
const fetchUser = async () => {
try {
loading.value = true
error.value = null
user.value = await getUser(props.userId)
emit('userLoaded', user.value)
} catch (err) {
error.value = err instanceof Error ? err.message : 'Failed to load user'
} finally {
loading.value = false
}
}
watchEffect(() => {
fetchUser()
})
</script>
<template>
<div class="user-card">
<div v-if="loading" class="loading">Loading...</div>
<div v-else-if="error" class="error">{{ error }}</div>
<div v-else-if="user" class="user-info">
<div class="avatar">{{ initials }}</div>
<div class="details">
<h3>{{ user.name }}</h3>
<p>{{ user.email }}</p>
</div>
</div>
</div>
</template>
<style scoped>
.user-card {
@apply border rounded-lg p-4 shadow-sm;
}
.avatar {
@apply w-12 h-12 rounded-full bg-blue-500 text-white flex items-center justify-center font-semibold;
}
</style>Component Architecture
Design System Components:
// components/Button/Button.tsx
import { forwardRef } from 'react'
import { cva, type VariantProps } from 'class-variance-authority'
const buttonVariants = cva(
'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none',
{
variants: {
variant: {
default: 'bg-primary text-primary-foreground hover:bg-primary/90',
destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
outline: 'border border-input hover:bg-accent hover:text-accent-foreground',
secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
ghost: 'hover:bg-accent hover:text-accent-foreground',
link: 'underline-offset-4 hover:underline text-primary',
},
size: {
default: 'h-10 py-2 px-4',
sm: 'h-9 px-3 rounded-md',
lg: 'h-11 px-8 rounded-md',
icon: 'h-10 w-10',
},
},
defaultVariants: {
variant: 'default',
size: 'default',
},
}
)
export interface ButtonProps
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
VariantProps<typeof buttonVariants> {
asChild?: boolean
}
const Button = forwardRef<HTMLButtonElement, ButtonProps>(
({ className, variant, size, asChild = false, ...props }, ref) => {
return (
<button
className={cn(buttonVariants({ variant, size, className }))}
ref={ref}
{...props}
/>
)
}
)
Button.displayName = 'Button'
export { Button, buttonVariants }Compound Components Pattern:
// components/Card/Card.tsx
import { createContext, useContext } from 'react'
interface CardContextValue {
variant: 'default' | 'outlined'
}
const CardContext = createContext<CardContextValue>({
variant: 'default'
})
interface CardProps {
variant?: 'default' | 'outlined'
children: React.ReactNode
}
export function Card({ variant = 'default', children }: CardProps) {
return (
<CardContext.Provider value={{ variant }}>
<div className={`card card--${variant}`}>
{children}
</div>
</CardContext.Provider>
)
}
export function CardHeader({ children }: { children: React.ReactNode }) {
return <div className="card__header">{children}</div>
}
export function CardContent({ children }: { children: React.ReactNode }) {
return <div className="card__content">{children}</div>
}
export function CardFooter({ children }: { children: React.ReactNode }) {
return <div className="card__footer">{children}</div>
}
// Usage
<Card variant="outlined">
<CardHeader>
<h3>Title</h3>
</CardHeader>
<CardContent>
<p>Card content goes here</p>
</CardContent>
<CardFooter>
<Button>Action</Button>
</CardFooter>
</Card>Advanced Patterns
Performance Optimization
React Optimization Patterns:
import { memo, useMemo, useCallback, useMemo, useDeferredValue } from 'react'
const ExpensiveList = memo(({ items, onItemClick }: {
items: Item[]
onItemClick: (item: Item) => void
}) => {
const expensiveValue = useMemo(() => {
return items.reduce((sum, item) => sum + item.value, 0)
}, [items])
const handleClick = useCallback((item: Item) => {
onItemClick(item)
}, [onItemClick])
return (
<div>
<p>Total: {expensiveValue}</p>
{items.map(item => (
<div key={item.id} onClick={() => handleClick(item)}>
{item.name}
</div>
))}
</div>
)
})Next.js Performance:
// Dynamic imports for code splitting
import dynamic from 'next/dynamic'
const DynamicChart = dynamic(
() => import('@/components/Chart'),
{
loading: () => <div>Loading chart...</div>,
ssr: false // Client-side only for heavy components
}
)
// Image optimization
import Image from 'next/image'
function OptimizedImage({ src, alt, ...props }) {
return (
<Image
src={src}
alt={alt}
{...props}
placeholder="blur"
blurDataURL="data:image/jpeg;base64,..."
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
/>
)
}State Management
Zustand for Modern State Management:
import { create } from 'zustand'
import { devtools, persist } from 'zustand/middleware'
interface UserState {
user: User | null
isLoading: boolean
login: (email: string, password: string) => Promise<void>
logout: () => void
updateUser: (updates: Partial<User>) => void
}
export const useUserStore = create<UserState>()(
devtools(
persist(
(set, get) => ({
user: null,
isLoading: false,
login: async (email: string, password: string) => {
set({ isLoading: true })
try {
const user = await authService.login(email, password)
set({ user, isLoading: false })
} catch (error) {
set({ isLoading: false })
throw error
}
},
logout: () => {
set({ user: null })
},
updateUser: (updates: Partial<User>) => {
set(state => ({
user: state.user ? { ...state.user, ...updates } : null
}))
}
}),
{
name: 'user-storage',
partialize: (state) => ({ user: state.user })
}
)
)
)Works Well With
- moai-domain-backend - Full-stack development
- moai-library-shadcn - Component library integration
- moai-domain-uiux - UI/UX design principles
- moai-quality-security - Frontend security and accessibility
- moai-system-universal - Cross-platform optimization
Technology Stack
Primary Technologies:
- Frameworks: React 19, Next.js 16, Vue 3.5, Nuxt 3
- Languages: TypeScript 5.9+, JavaScript ES2024
- Styling: Tailwind CSS 3.4+, CSS Modules, Styled Components
- State Management: Zustand, Redux Toolkit, Pinia
- Testing: Vitest, Testing Library, Playwright
- Build Tools: Vite 5, Turbopack, SWC
Component Libraries:
- shadcn/ui, Material-UI, Ant Design
- Headless UI, Radix UI
- Custom design systems
Status: Production Ready Last Updated: 2025-11-30 Maintained by: MoAI-ADK Frontend Team