Frontend Development Specialist

Quick Reference

Modern Frontend Development - Comprehensive patterns for React 19, Next.js 16, Vue 3.5.

Core Capabilities:

• React 19: Server components, concurrent features, cache(), Suspense
• Next.js 16: App Router, Server Actions, ISR, Route handlers
• Vue 3.5: Composition API, TypeScript, Pinia state management
• Component Architecture: Design systems, compound components, CVA
• Performance: Code splitting, dynamic imports, memoization

When to Use:

• Modern web application development
• Component library creation
• Frontend performance optimization
• UI/UX with accessibility

Module Index

Load specific modules for detailed patterns:

Framework Patterns

React 19 Patterns:

• Server Components, Concurrent features, cache() API, Form handling

Next.js 16 Patterns:

• App Router, Server Actions, ISR, Route Handlers, Parallel Routes

Vue 3.5 Patterns:

• Composition API, Composables, Reactivity, Pinia, Provide/Inject

Architecture Patterns

Component Architecture:

• Design tokens, CVA variants, Compound components, Accessibility

State Management:

• Zustand, Redux Toolkit, React Context, Pinia

Performance Optimization:

• Code splitting, Dynamic imports, Image optimization, Memoization

Implementation Quickstart

React 19 Server Component

import { cache } from 'react'
import { Suspense } from 'react'

const getData = cache(async (id: string) => {
  const res = await fetch(`/api/data/${id}`)
  return res.json()
})

export default async function Page({ params }: { params: { id: string } }) {
  return (
    <Suspense fallback={<Skeleton />}>
      <DataDisplay data={await getData(params.id)} />
    </Suspense>
  )
}

Next.js Server Action

'use server'

import { revalidatePath } from 'next/cache'
import { z } from 'zod'

const schema = z.object({
  title: z.string().min(1),
  content: z.string().min(10)
})

export async function createPost(formData: FormData) {
  const result = schema.safeParse({
    title: formData.get('title'),
    content: formData.get('content')
  })
  if (!result.success) return { errors: result.error.flatten().fieldErrors }
  await db.post.create({ data: result.data })
  revalidatePath('/posts')
}

Vue Composable

import { ref, computed, watchEffect } from 'vue'

export function useUser(userId: Ref<string>) {
  const user = ref<User | null>(null)
  const loading = ref(false)
  const fullName = computed(() =>
    user.value ? `${user.value.firstName} ${user.value.lastName}` : ''
  )
  watchEffect(async () => {
    loading.value = true
    user.value = await fetchUser(userId.value)
    loading.value = false
  })
  return { user, loading, fullName }
}

CVA Component

import { cva, type VariantProps } from 'class-variance-authority'

const buttonVariants = cva(
  'inline-flex items-center justify-center rounded-md font-medium',
  {
    variants: {
      variant: {
        default: 'bg-primary text-white hover:bg-primary/90',
        outline: 'border border-input hover:bg-accent',
      },
      size: {
        sm: 'h-9 px-3 text-sm',
        default: 'h-10 px-4',
        lg: 'h-11 px-8',
      },
    },
    defaultVariants: { variant: 'default', size: 'default' },
  }
)

export function Button({ variant, size, children }: ButtonProps) {
  return <button className={buttonVariants({ variant, size })}>{children}</button>
}

Works Well With

• moai-domain-backend - Full-stack development
• moai-library-shadcn - Component library integration
• moai-domain-uiux - UI/UX design principles
• moai-lang-typescript - TypeScript patterns
• moai-workflow-testing - Frontend testing

Technology Stack

Frameworks: React 19, Next.js 16, Vue 3.5, Nuxt 3 Languages: TypeScript 5.9+, JavaScript ES2024 Styling: Tailwind CSS 3.4+, CSS Modules, shadcn/ui State: Zustand, Redux Toolkit, Pinia Testing: Vitest, Testing Library, Playwright

Resources

Module files in modules/ directory contain detailed patterns.

• React: https://react.dev/
• Next.js: https://nextjs.org/docs
• Vue: https://vuejs.org/

Version: 2.0.0 | Last Updated: 2026-01-06