moai-domain-frontend

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

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

现代前端开发 - 涵盖React 19、Next.js 16、Vue 3.5的全面模式。

核心能力：

React 19：Server Components、并发特性、cache()、Suspense
Next.js 16：App Router、Server Actions、ISR、路由处理器
Vue 3.5：组合式API、TypeScript、Pinia状态管理
组件架构：设计系统、复合组件、CVA
性能优化：代码分割、动态导入、记忆化

适用场景：

现代Web应用开发
组件库创建
前端性能优化
兼顾可访问性的UI/UX设计

Module Index

模块索引

Load specific modules for detailed patterns:

加载特定模块获取详细模式：

Framework Patterns

框架模式

React 19 Patterns in modules/react19-patterns.md:

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

Next.js 16 Patterns in modules/nextjs16-patterns.md:

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

Vue 3.5 Patterns in modules/vue35-patterns.md:

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

React 19模式（位于modules/react19-patterns.md）：

Server Components、并发特性、cache() API、表单处理

Next.js 16模式（位于modules/nextjs16-patterns.md）：

App Router、Server Actions、ISR、路由处理器、并行路由

Vue 3.5模式（位于modules/vue35-patterns.md）：

组合式API、Composables、响应式、Pinia、Provide/Inject

Architecture Patterns

架构模式

Component Architecture in modules/component-architecture.md:

Design tokens, CVA variants, Compound components, Accessibility

State Management in modules/state-management.md:

Zustand, Redux Toolkit, React Context, Pinia

Performance Optimization in modules/performance-optimization.md:

Code splitting, Dynamic imports, Image optimization, Memoization

Vercel React Best Practices in modules/vercel-react-best-practices.md:

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

组件架构（位于modules/component-architecture.md）：

设计令牌、CVA变体、复合组件、可访问性

状态管理（位于modules/state-management.md）：

Zustand、Redux Toolkit、React Context、Pinia

性能优化（位于modules/performance-optimization.md）：

代码分割、动态导入、图片优化、记忆化

Vercel React最佳实践（位于modules/vercel-react-best-practices.md）：

来自Vercel工程团队的8大类别共45条规则
消除请求瀑布流、包优化、服务端性能
客户端数据获取、重渲染优化、渲染性能

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.

创建一个异步页面组件，使用React的cache函数来记忆化数据获取。导入Suspense用于加载状态。定义一个getData函数，通过API端点根据id参数获取数据并返回JSON。在页面组件中，使用Suspense包裹DataDisplay组件并设置Skeleton作为加载回退，将await getData的结果作为data属性传递给该组件。

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.

创建一个包含'use server'指令的服务端操作文件。从next/cache导入revalidatePath，从zod导入工具用于验证。定义一个验证规则，要求title最少1个字符，content最少10个字符。createPost函数接收FormData，使用safeParse进行验证，验证失败时返回错误信息，验证成功则在数据库中创建帖子，并调用revalidatePath刷新帖子页面。

Vue Composable

Create a useUser composable that accepts a userId ref parameter. Define user as a nullable ref, loading as a boolean ref, and fullName as a computed property that concatenates firstName and lastName. Use watchEffect to set loading true, fetch the user data asynchronously, assign to user ref, and set loading false. Return the user, loading, and fullName refs.

创建一个useUser组合式函数，接收userId ref作为参数。定义user为可空ref，loading为布尔类型ref，fullName为计算属性，用于拼接firstName和lastName。使用watchEffect设置loading为true，异步获取用户数据，将结果赋值给user ref，然后设置loading为false。返回user、loading和fullName ref。

CVA Component

CVA组件

Import cva and VariantProps from class-variance-authority. Define buttonVariants with base classes for inline-flex, items-center, justify-center, rounded-md, and font-medium. Add variants object with variant options for default (primary background with hover) and outline (border with hover accent). Add size options for sm (h-9, px-3, text-sm), default (h-10, px-4), and lg (h-11, px-8). Set defaultVariants for variant and size. Export a Button component that applies the variants to a button element className.

从class-variance-authority导入cva和VariantProps。定义buttonVariants，包含基础类：inline-flex、items-center、justify-center、rounded-md、font-medium。添加variants对象，包含variant选项：default（主背景色带 hover 效果）和outline（边框带 hover 强调色）。添加size选项：sm（h-9、px-3、text-sm）、default（h-10、px-4）、lg（h-11、px-8）。设置variant和size的默认值。导出一个Button组件，将变体应用到button元素的className上。

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

moai-domain-backend - 全栈开发
moai-library-shadcn - 组件库集成
moai-domain-uiux - UI/UX设计原则
moai-lang-typescript - TypeScript模式
moai-workflow-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

框架：React 19、Next.js 16、Vue 3.5、Nuxt 3

语言：TypeScript 5.9+、JavaScript ES2024

样式：Tailwind CSS 3.4+、CSS Modules、shadcn/ui

状态管理：Zustand、Redux Toolkit、Pinia

测试：Vitest、Testing Library、Playwright

Resources

资源

Module files in the modules directory contain detailed patterns.

For working code examples, see examples.md.

Official documentation:

Version: 2.0.0 Last Updated: 2026-01-11

modules目录下的模块文件包含详细模式。

如需可运行的代码示例，请查看examples.md。

官方文档：

版本：2.0.0 最后更新：2026-01-11