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.
when_to_use	Use for frontend development: React 19, Next.js 16, Vue 3.5 components, responsive UIs, TypeScript/JavaScript, state management, hooks, props, JSX/TSX, DOM, CSS, Tailwind, and client-side browser performance.
license	Apache-2.0
compatibility	Designed for Claude Code
allowed-tools	Read, Grep, Glob
user-invocable	false
metadata	{"version":"2.1.0","category":"domain","status":"active","updated":"2026-03-28","tags":"frontend, react, nextjs, vue, ui, components","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, Framer Motion animations

When to Use:

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

---

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

AI-Assisted Frontend Patterns:

• Visual reference strategy, Playwright verification, motion design, reasoning-level tuning

Vercel React Best Practices:

• 45 rules across 8 categories from Vercel Engineering
• Eliminating waterfalls, bundle optimization, server-side performance
• Client-side data fetching, re-render optimization, rendering performance

---

Implementation Quickstart

React 19 Server Component

Create an async page component that uses the cache function from React to memoize data fetching. Import Suspense for loading states. Define a getData function that fetches from the API endpoint with an id parameter and returns JSON. In the page component, wrap the DataDisplay component with Suspense using a Skeleton fallback, and pass the awaited getData result as the data prop.

Next.js Server Action

Create a server action file with the use server directive. Import revalidatePath from next/cache and z from zod for validation. Define a schema with title (minimum 1 character) and content (minimum 10 characters). The createPost function accepts FormData, validates with safeParse, returns errors on failure, creates the post in the database, and calls revalidatePath for the posts page.