SuperAPI AI 工具集

react-nextjs-development

前端与建站

查看项目

更新于 10-16 07:26

技能介绍

用途:该工作流用于构建 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 CSS、设计令牌、响应式设计);数据获取(Server Components、React Query/SWR、API 客户端、加载与错误边界);路由与导航(文件路由、动态与嵌套路由、路由守卫、重定向);表单与校验(React Hook Form、Zod/Yup);测试(Vitest、Playwright、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 干净、性能指标达标(LCP、CLS、FID)、无障碍检查(WCAG 2.1)与响应式验证。

限制:资料未提供具体安装命令、版本兼容细节、收费与价格信息,也未说明各技能的实际可用性与平台支持范围,相关事实暂未提供。