SuperAPI AI 工具集

frontend-dev-guidelines

前端与建站

查看项目

更新于 10-15 21:11

技能介绍

用途:为 Next.js 14+ App Router、React 19、shadcn/ui 应用提供一套有明确倾向的前端开发规范,强调性能、类型安全与良好用户体验,并包含 Supabase 集成。

默认技术栈:Next.js 14+(App Router)、React 19、shadcn/ui(Radix 原语)、Tailwind CSS、React Hook Form + Zod、React Context 与 TanStack Query(服务端状态)、TypeScript,部署于 Vercel。

主要能力与约定:默认使用 Server Component,仅在需要 hooks 或事件时添加 'use client';用 Server Actions 处理变更并配合 revalidatePath;用 shadcn/ui 组件与 cn() 组合 Tailwind 类;表单用 React Hook Form + Zod 校验;数据获取可用 Server Component、Server Actions 或 TanStack Query;提供 app/、components/、lib/ 目录结构示例,以及 metadata、loading.tsx、error.tsx、API Route 的写法参考。

使用方式:按新页面与新组件检查清单执行;需要某主题示例时,可让 Claude 生成对应模式(如 Server 与 Client 组件、数据获取、表单、shadcn/ui、Tailwind、性能、TypeScript、测试)。若要换栈,可运行 /customize-scaffold frontend 或使用 scaffold-customizer 智能体适配 Vue、Angular、Svelte、vanilla React 等。

适用场景:用 App Router 建页面、构建 Server/Client 组件、实现 Server Actions、添加 shadcn/ui 组件、Tailwind 样式、Supabase 数据获取、表单校验与性能优化。

限制:这是脚手架型技能,示例为教学性模式,需按项目自行生成资源;文中未提供具体安装命令、收费与价格信息,暂未提供。