react-nextjs-development

React/Next.js 开发工作流

概述

用于构建 React 和 Next.js 14+ 应用的专业工作流，涵盖 App Router、Server Components、TypeScript 和 Tailwind CSS 等现代模式。

何时使用此工作流

在以下情况下使用此工作流：

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

在选择版本之前，请阅读现有的 package/lockfile 和已安装框架的文档；Next.js 的缓存、路由参数以及服务器端/客户端 API 会因版本而异。Server Components 和 UI 路由守卫并不能取代所有服务器操作、路由或数据访问中的授权。将机密信息仅保留在服务器端，验证运行时输入，并将部署/发布视为需要单独授权的环境操作。提及的技能是可选的可用组件，并非要求搭建脚手架、添加所有库或自动部署的指令。

工作流阶段

阶段 1：项目设置

要调用的技能

• app-builder - 应用脚手架搭建
• senior-fullstack - 全栈指导
• nextjs-app-router-patterns - Next.js 14+ 模式
• typescript-pro - TypeScript 设置

操作

1. 选择项目类型（React SPA、Next.js 应用）
2. 选择受支持的框架/构建工具（例如 Next.js 或 Vite）；新项目不要选择已弃用的 Create React App
3. 搭建项目结构
4. 配置 TypeScript
5. 设置 ESLint 和 Prettier

可复制粘贴的提示词

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

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

阶段 2：组件架构

要调用的技能

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

操作

1. 设计组件层级
2. 创建基础组件
3. 实现布局组件
4. 设置状态管理
5. 创建自定义 Hook

可复制粘贴的提示词

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

阶段 3：样式与设计

要调用的技能

• frontend-design - UI 设计
• tailwind-patterns - Tailwind CSS
• tailwind-design-system - 设计系统
• core-components - 组件库

操作

1. 设置 Tailwind CSS
2. 配置设计令牌
3. 创建实用工具类
4. 构建组件样式
5. 实现响应式设计

可复制粘贴的提示词

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

Use @frontend-design to create a modern dashboard UI

阶段 4：数据获取

要调用的技能

• nextjs-app-router-patterns - Server Components
• react-state-management - React Query
• api-patterns - API 集成

操作

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

可复制粘贴的提示词

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

阶段 5：路由与导航

要调用的技能

• nextjs-app-router-patterns - App Router
• nextjs-best-practices - Next.js 模式

操作

1. 设置基于文件的路由
2. 创建动态路由
3. 实现嵌套路由
4. 添加路由守卫
5. 配置重定向

可复制粘贴的提示词

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

阶段 6：表单与验证

要调用的技能

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

操作

1. 选择表单库（React Hook Form、Formik）
2. 设置验证（Zod、Yup）
3. 创建表单组件
4. 处理提交
5. 实现错误处理

可复制粘贴的提示词

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

阶段 7：测试

要调用的技能

• javascript-testing-patterns - Jest/Vitest
• playwright-skill - E2E 测试
• e2e-testing-patterns - E2E 模式

操作

1. 设置测试框架
2. 编写单元测试
3. 创建组件测试
4. 实现 E2E 测试
5. 配置 CI 集成

可复制粘贴的提示词

Use @javascript-testing-patterns to write Vitest tests

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

阶段 8：构建与部署

要调用的技能

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

操作

1. 配置构建设置
2. 优化打包体积
3. 设置环境变量
4. 部署到 Vercel
5. 配置预览部署

可复制粘贴的提示词

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

技术栈

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

质量门槛

• TypeScript 编译无错误
• 所有测试均通过
• 代码检查无问题
• 所选测量方案的性能指标（LCP、CLS、INP）达标
• 已检查无障碍性（WCAG 2.1）
• 已验证响应式设计

相关工作流包

• development - 常规开发
• testing-qa - 测试工作流
• documentation - 文档
• typescript-development - TypeScript 模式

限制

• 仅当任务明确符合上述范围时，才使用此技能。
• 请勿将输出视为环境特定验证、测试或专家审查的替代品。
• 如果缺少必要的输入、权限、安全边界或成功标准，请暂停并请求澄清。