SuperAPI AI 工具集

react-nextjs-development

前端与建站

查看项目

更新于 10-15 16:46

技能介绍

用途:这是一套用于构建 React 与 Next.js 14+ 应用的工作流,强调 App Router、Server Components、TypeScript 与 Tailwind CSS 等现代前端模式。适用于新建 React 应用、创建 Next.js 14+ 项目、实现 Server Components、配置 TypeScript、使用 Tailwind CSS 样式以及构建全栈 Next.js 应用。

主要能力按阶段划分:项目搭建可选项目类型与构建工具并完成脚手架、TypeScript、ESLint 与 Prettier 配置;组件架构涉及组件层级设计、基础与布局组件、状态管理及自定义 Hook;样式与设计涉及 Tailwind 配置、设计令牌、工具类与响应式设计;数据获取涉及 Server Components、React Query/SWR、API 客户端与加载/错误处理;路由涉及文件路由、动态与嵌套路由、路由守卫和重定向;表单涉及表单库、校验、提交与错误处理;测试涉及单元、组件与 E2E 测试及 CI 集成;构建部署涉及构建配置、体积优化、环境变量、Vercel 部署与预览部署。

使用方式:流程中给出可复制提示词,通过 @技能名 调用相关技能,例如用 @app-builder 搭建 Next.js 14 项目、@nextjs-app-router-patterns 实现 Server Components 数据获取、@frontend-developer 创建可复用组件、@tailwind-patterns 使用 Tailwind CSS v4 设置样式、@javascript-testing-patterns 编写 Vitest 测试、@vercel-deployment 部署到生产。技术栈包括 Next.js 14+/React 18+、TypeScript 5+、Tailwind CSS v4、Zustand 与 React Query、React Hook Form 与 Zod、Vitest 与 Playwright、Vercel。质量门槛包括 TypeScript 无错误编译、测试通过、Lint 干净、性能指标达标、无障碍检查与响应式验证。

限制:资料未提供具体安装命令、代码示例细节、定价与平台限制等信息。