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