React 19、Next.js 16、Vue 3.5 前端开发专家 - 现代Web应用与组件架构模式

moai-domain-frontend by modu-ai/moai-adk

98 周安装量

888 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/modu-ai/moai-adk --skill moai-domain-frontend

Vue React 前端架构

🇨🇳中文介绍

前端开发专家

快速参考

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

核心能力：

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

何时使用：

现代 Web 应用程序开发
组件库创建
前端性能优化
具备可访问性的 UI/UX

模块索引

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

框架模式

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

服务器组件、并发特性、cache() API、表单处理

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

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

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

组合式 API、组合函数、响应式、Pinia、Provide/Inject

架构模式

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

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

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

Zustand、Redux Toolkit、React Context、Pinia

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

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

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

React 19 服务器组件

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

Next.js 服务器操作

创建一个带有 use server 指令的服务器操作文件。从 next/cache 导入 revalidatePath，从 zod 导入 z 用于验证。定义一个包含 title（至少 1 个字符）和 content（至少 10 个字符）的 schema。createPost 函数接受 FormData，使用 safeParse 进行验证，失败时返回错误，在数据库中创建帖子，并为 posts 页面调用 revalidatePath。

创建一个接受 userId ref 参数的 useUser 组合函数。将 user 定义为可空的 ref，loading 定义为布尔值 ref，fullName 定义为连接 firstName 和 lastName 的计算属性。使用 watchEffect 将 loading 设置为 true，异步获取用户数据，分配给 user ref，然后将 loading 设置为 false。返回 user、loading 和 fullName ref。

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

moai-domain-backend - 全栈开发
moai-library-shadcn - 组件库集成
moai-domain-uiux - UI/UX 设计原则
moai-lang-typescript - TypeScript 模式
moai-workflow-testing - 前端测试

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

语言：TypeScript 5.9+、JavaScript ES2024

样式：Tailwind CSS 3.4+、CSS 模块、shadcn/ui

动画：Framer Motion

状态：Zustand、Redux Toolkit、Pinia

测试：Vitest、Testing Library、Playwright

验证：Playwright（视觉检查、功能测试）

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

有关工作代码示例，请参阅 examples.md。

版本：2.1.0 最后更新：2026-03-28

🇺🇸English

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

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

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

AI-Assisted Frontend Patterns in modules/ai-frontend-patterns.md:

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

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

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.

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.

CVA Component

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.

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

Animation: Framer Motion

State: Zustand, Redux Toolkit, Pinia

Testing: Vitest, Testing Library, Playwright

Verification: Playwright (visual inspection, functional testing)

Resources

Module files in the modules directory contain detailed patterns.

For working code examples, see examples.md.

Official documentation:

Version: 2.1.0 Last Updated: 2026-03-28

Weekly Installs

Repository

modu-ai/moai-adk

GitHub Stars

888

First Seen

Jan 21, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

codex79

opencode77

gemini-cli74

cursor74

claude-code72

github-copilot66

Nuxt 4 模式指南：SSR、混合渲染、路由规则与数据获取最佳实践

779 周安装