App Builder Skill
该技能提供构建全栈应用的系统化知识，支持从零搭建或增强现有项目。涵盖项目识别、技术栈选择、脚手架模式、实施规划与功能构建。
内容
项目识别 – 用关键词矩阵判定项目类型
技术栈 – 2025 默认技术及备选方案
脚手架 – 目录结构与核心文件
实施规划 – 需求分析、任务拆解、计划格式
功能构建 – 分析与实现模式
协同 – 多阶段开发流程
关键词矩阵
关键词 → 项目类型 → 推荐栈
blog, post, article → Blog → Next.js Static
e-commerce, product, cart, payment → E-commerce → Next.js + Stripe
dashboard, panel, management → Admin Dashboard → Next.js + Supabase
api, backend, service, rest → API Service → Express 或 FastAPI
python, fastapi, django → Python API → FastAPI
mobile, android, ios, react native → Mobile App → React Native (Expo)
portfolio, personal, cv → Portfolio → Next.js Static
crm, customer, sales → CRM → Next.js + Supabase
saas, subscription, stripe → SaaS → Next.js + Stripe + Auth
landing, promotional, marketing → Landing Page → Next.js Static
extension, plugin, chrome → Browser Extension → Chrome MV3
cli, command line, terminal → CLI Tool → Node.js
识别流程
- 分词用户请求
- 提取关键词并匹配项目类型
- 发现缺失信息 → 追问澄清
- 推荐合适技术栈
- 用户确认后继续
默认 Web App 栈
Frontend
framework: Next.js 16 (Stable)
language: TypeScript 5.7+
styling: Tailwind CSS v4
state: React 19 Actions / Server Components
bundler: Turbopack (Dev Mode)
Backend
runtime: Node.js 23
framework: Next.js API Routes
validation: Zod
Database
primary: PostgreSQL
provider: Supabase
orm: Prisma
Auth
provider: Supabase Auth 或 Clerk
Deployment
tool: 内置 deploy 命令
备选方案
需求 → 默认 → 替代
实时 → Supabase Realtime → Socket.io
文件存储 → Supabase Storage → Cloudinary, S3
支付 → Stripe → LemonSqueezy, Paddle
邮件 → Resend → SendGrid
搜索 → — → Algolia, Typesense
Next.js 全栈结构
project-name/
├── src/
│ ├── app/ # 仅路由（薄层）
│ │ ├── layout.tsx
│ │ ├── page.tsx
│ │ ├── globals.css
│ │ ├── (auth)/ # 路由组 - 认证页
│ │ │ ├── login/page.tsx
│ │ │ └── register/page.tsx
│ │ ├── (dashboard)/ # 路由组 - 控制台
│ │ │ ├── layout.tsx
│ │ │ └── page.tsx
│ │ └── api/
│ │ └── [resource]/route.ts
│ ├── features/ # 按功能模块
│ │ ├── auth/
│ │ │ ├── components/
│ │ │ ├── hooks/
│ │ │ ├── actions.ts # Server Actions
│ │ │ ├── queries.ts # 数据获取
│ │ │ └── types.ts
│ │ └── [other-features]/
│ ├── shared/ # 共享工具
│ │ ├── components/ui/ # 复用 UI 组件
│ │ ├── lib/ # 工具函数
│ │ └── hooks/ # 全局 hooks
│ └── server/ # 仅服务器代码
│ ├── db/ # 数据库客户端
│ ├── auth/ # 认证配置
│ └── services/ # 外部 API 集成
├── prisma/
│ ├── schema.prisma
│ └── seed.ts
├── public/
├── .env.example
├── package.json
├── tailwind.config.ts
└── tsconfig.json
结构原则
原则 → 实现
功能隔离 → 各功能置于 features/，含独立组件、hooks、actions
服务器/客户端分离 → 服务器代码放 server/，防意外客户端引入
薄路由 → app/ 仅负责路由，逻辑在 features/
路由组 → (groupName)/ 共享布局，不影响 URL
共享代码 → shared/ 存放真正复用的 UI 与工具
路径别名（tsconfig.json）
{
"compilerOptions": {
"paths": {
"@/": ["./src/"],
"@/features/": ["./src/features/"],
"@/shared/": ["./src/shared/"],
"@/server/": ["./src/server/"]
}
}
}
新建项目或功能前，按以下结构化步骤执行。
需求分析
将用户请求拆成具体功能
确定数据模型及其关系
列出所需 API 端点或 Server Actions
列出所需 UI 组件
提前识别潜在阻塞点
任务拆解
创建带依赖的有序任务列表
评估各任务复杂度（简单 / 中等 / 复杂）
标记需用户决策或外部服务的任务
计划输出格式
向用户展示计划时采用：
# 实施计划：[项目名称]
概述
[简述将构建的内容]
数据模型
by