moai-domain-frontend

name	moai-domain-frontend
description	Frontend development specialist covering React 19, Next.js 16, Vue 3.5, and modern UI/UX patterns with component architecture. Use when building web UIs, implementing components, optimizing frontend performance, or integrating state management.
version	2.0.0
category	domain
modularized	true
user-invocable	false
tags	["frontend","react","nextjs","vue","ui","components"]
context7-libraries	["/facebook/react","/vercel/next.js","/vuejs/vue"]
updated	"2026-01-08T00:00:00.000Z"
allowed-tools	["Read","Grep","Glob","mcp__context7__resolve-library-id","mcp__context7__get-library-docs"]
status	active
author	MoAI-ADK Team

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 =  ()
   res.()
})

    () {
   (
    
  )
}