react-nextjs-development

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

React/Next.js Development Workflow

React/Next.js 开发工作流

Overview

概述

Specialized workflow for building React and Next.js 14+ applications with modern patterns including App Router, Server Components, TypeScript, and Tailwind CSS.

针对使用App Router、Server Components、TypeScript和Tailwind CSS等现代模式构建React与Next.js 14+应用的专属工作流。

When to Use This Workflow

适用场景

Use this workflow when:

Building new React applications
Creating Next.js 14+ projects with App Router
Implementing Server Components
Setting up TypeScript with React
Styling with Tailwind CSS
Building full-stack Next.js applications

以下场景可使用本工作流：

构建全新React应用
创建基于App Router的Next.js 14+项目
实现Server Components
为React配置TypeScript
使用Tailwind CSS进行样式开发
构建全栈Next.js应用

Workflow Phases

工作流阶段

Phase 1: Project Setup

阶段1：项目搭建

Skills to Invoke

调用技能

```
app-builder
```
- Application scaffolding
```
senior-fullstack
```
- Full-stack guidance
```
nextjs-app-router-patterns
```
- Next.js 14+ patterns
```
typescript-pro
```
- TypeScript setup

```
app-builder
```
- 应用脚手架搭建
```
senior-fullstack
```
- 全栈开发指导
```
nextjs-app-router-patterns
```
- Next.js 14+模式实践
```
typescript-pro
```
- TypeScript配置

Actions

操作步骤

Choose project type (React SPA, Next.js app)
Select build tool (Vite, Next.js, Create React App)
Scaffold project structure
Configure TypeScript
Set up ESLint and Prettier

选择项目类型（React单页应用、Next.js应用）
选择构建工具（Vite、Next.js、Create React App）
搭建项目结构
配置TypeScript
设置ESLint与Prettier

Copy-Paste Prompts

可复制提示语

Use @app-builder to scaffold a new Next.js 14 project with App Router

Use @nextjs-app-router-patterns to set up Server Components

Use @app-builder to scaffold a new Next.js 14 project with App Router

Use @nextjs-app-router-patterns to set up Server Components

Phase 2: Component Architecture

阶段2：组件架构

Skills to Invoke

调用技能

```
frontend-developer
```
- Component development
```
react-patterns
```
- React patterns
```
react-state-management
```
- State management
```
react-ui-patterns
```
- UI patterns

```
frontend-developer
```
- 组件开发
```
react-patterns
```
- React设计模式
```
react-state-management
```
- 状态管理
```
react-ui-patterns
```
- UI设计模式

Actions

操作步骤

Design component hierarchy
Create base components
Implement layout components
Set up state management
Create custom hooks

设计组件层级结构
创建基础组件
实现布局组件
设置状态管理方案
编写自定义hooks

Copy-Paste Prompts

可复制提示语

Use @frontend-developer to create reusable React components

Use @react-patterns to implement proper component composition

Use @react-state-management to set up Zustand store

Use @frontend-developer to create reusable React components

Use @react-patterns to implement proper component composition

Use @react-state-management to set up Zustand store

Phase 3: Styling and Design

阶段3：样式与设计

Skills to Invoke

调用技能

```
frontend-design
```
- UI design
```
tailwind-patterns
```
- Tailwind CSS
```
tailwind-design-system
```
- Design system
```
core-components
```
- Component library

```
frontend-design
```
- UI设计
```
tailwind-patterns
```
- Tailwind CSS实践
```
tailwind-design-system
```
- 设计系统搭建
```
core-components
```
- 组件库开发

Actions

操作步骤

Set up Tailwind CSS
Configure design tokens
Create utility classes
Build component styles
Implement responsive design

配置Tailwind CSS
设置设计令牌
创建工具类
编写组件样式
实现响应式设计

Copy-Paste Prompts

可复制提示语

Use @tailwind-patterns to style components with Tailwind CSS v4

Use @frontend-design to create a modern dashboard UI

Use @tailwind-patterns to style components with Tailwind CSS v4

Use @frontend-design to create a modern dashboard UI

Phase 4: Data Fetching

阶段4：数据获取

Skills to Invoke

调用技能

```
nextjs-app-router-patterns
```
- Server Components
```
react-state-management
```
- React Query
```
api-patterns
```
- API integration

```
nextjs-app-router-patterns
```
- Server Components实践
```
react-state-management
```
- React Query应用
```
api-patterns
```
- API集成

Actions

操作步骤

Implement Server Components
Set up React Query/SWR
Create API client
Handle loading states
Implement error boundaries

实现Server Components
设置React Query/SWR
创建API客户端
处理加载状态
实现错误边界

Copy-Paste Prompts

可复制提示语

Use @nextjs-app-router-patterns to implement Server Components data fetching

Use @nextjs-app-router-patterns to implement Server Components data fetching

Phase 5: Routing and Navigation

阶段5：路由与导航

Skills to Invoke

调用技能

```
nextjs-app-router-patterns
```
- App Router
```
nextjs-best-practices
```
- Next.js patterns

```
nextjs-app-router-patterns
```
- App Router实践
```
nextjs-best-practices
```
- Next.js最佳实践

Actions

操作步骤

Set up file-based routing
Create dynamic routes
Implement nested routes
Add route guards
Configure redirects

设置基于文件的路由
创建动态路由
实现嵌套路由
添加路由守卫
配置重定向规则

Copy-Paste Prompts

可复制提示语

Use @nextjs-app-router-patterns to set up parallel routes and intercepting routes

Use @nextjs-app-router-patterns to set up parallel routes and intercepting routes

Phase 6: Forms and Validation

阶段6：表单与验证

Skills to Invoke

调用技能

```
frontend-developer
```
- Form development
```
typescript-advanced-types
```
- Type validation
```
react-ui-patterns
```
- Form patterns

```
frontend-developer
```
- 表单开发
```
typescript-advanced-types
```
- 类型验证
```
react-ui-patterns
```
- 表单设计模式

Actions

操作步骤

Choose form library (React Hook Form, Formik)
Set up validation (Zod, Yup)
Create form components
Handle submissions
Implement error handling

选择表单库（React Hook Form、Formik）
设置验证方案（Zod、Yup）
创建表单组件
处理表单提交
实现错误处理

Copy-Paste Prompts

可复制提示语

Use @frontend-developer to create forms with React Hook Form and Zod

Use @frontend-developer to create forms with React Hook Form and Zod

Phase 7: Testing

阶段7：测试

Skills to Invoke

调用技能

```
javascript-testing-patterns
```
- Jest/Vitest
```
playwright-skill
```
- E2E testing
```
e2e-testing-patterns
```
- E2E patterns

```
javascript-testing-patterns
```
- Jest/Vitest测试
```
playwright-skill
```
- 端到端测试
```
e2e-testing-patterns
```
- 端到端测试模式

Actions

操作步骤

Set up testing framework
Write unit tests
Create component tests
Implement E2E tests
Configure CI integration

配置测试框架
编写单元测试
创建组件测试
实现端到端测试
配置CI集成

Copy-Paste Prompts

可复制提示语

Use @javascript-testing-patterns to write Vitest tests

Use @playwright-skill to create E2E tests for critical flows

Use @javascript-testing-patterns to write Vitest tests

Use @playwright-skill to create E2E tests for critical flows

Phase 8: Build and Deployment

阶段8：构建与部署

Skills to Invoke

调用技能

```
vercel-deployment
```
- Vercel deployment
```
vercel-deploy-claimable
```
- Vercel deployment
```
web-performance-optimization
```
- Performance

```
vercel-deployment
```
- Vercel部署
```
vercel-deploy-claimable
```
- Vercel部署
```
web-performance-optimization
```
- 性能优化

Actions

操作步骤

Configure build settings
Optimize bundle size
Set up environment variables
Deploy to Vercel
Configure preview deployments

配置构建设置
优化包体积
设置环境变量
部署至Vercel
配置预览部署

Copy-Paste Prompts

可复制提示语

Use @vercel-deployment to deploy Next.js app to production

Use @vercel-deployment to deploy Next.js app to production

Technology Stack

技术栈

Category	Technology
Framework	Next.js 14+, React 18+
Language	TypeScript 5+
Styling	Tailwind CSS v4
State	Zustand, React Query
Forms	React Hook Form, Zod
Testing	Vitest, Playwright
Deployment	Vercel

分类	技术
框架	Next.js 14+, React 18+
语言	TypeScript 5+
样式	Tailwind CSS v4
状态管理	Zustand, React Query
表单	React Hook Form, Zod
测试	Vitest, Playwright
部署	Vercel

Quality Gates

质量检查项

Related Workflow Bundles

Limitations

局限性

Use this skill only when the task clearly matches the scope described above.
Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.

仅当任务完全匹配上述描述范围时使用本技能。
输出内容不可替代环境特定的验证、测试或专家评审。
若缺少必要输入、权限、安全边界或成功标准，请暂停操作并请求澄清。