用途 该技能用于帮用户从零创建一个可运行的 Web 应用,并部署到用户自己的 Cloudflare 域名上。整个过程由 AI 通过各命令行工具自行完成,只在必须由人操作时(浏览器登录、设备码、付款、密钥)才向用户请求协助。交流使用用户的语言,消息简短,避免术语。
技术栈(除用户要求外不替换任何一层)
- 应用、路由、服务端函数:TanStack Start(React、TypeScript、Vite)
- UI:Base UI 上的 shadcn/ui + Tailwind CSS v4、lucide-react 图标、sonner 提示
- 数据库、后端、文件、定时任务:全部使用 Convex,不使用其他数据库或 API 服务器
- 认证:通过 @convex-dev/better-auth 使用 Better Auth,默认邮件 OTP
- 营销与登录邮件:通过 @lumail/convex 使用 Lumail
- 支付(仅当应用需要售卖时):Stripe Checkout,参见 stripe-checkout 技能
- 视频:Tella 嵌入(用户粘贴 Tella URL)
- 托管、域名、DNS:Cloudflare Workers + @cloudflare/vite-plugin,用 cf 部署
- 代码:Git + 一个私有 GitHub 仓库
客户端任务优先使用 TanStack 库:数据获取与缓存用 @tanstack/react-query + @convex-dev/react-query;列表与表格用 @tanstack/react-table;长列表用 @tanstack/react-virtual;表单与校验用 @tanstack/react-form + zod;Markdown 渲染用 @tanstack/markdown;快捷键用 @tanstack/react-hotkeys;防抖与节流用 @tanstack/react-pacer;应用内 AI 对话或生成用 @tanstack/ai-react。使用前须查看各包当前 API 文档,不得凭记忆猜测。
使用方式
- 写代码前先检查访问权限:验证 git 与 gh 登录、cf 版本与身份、Convex 版本、Lumail 认证测试;先修复失败项;浏览器登录时给出准确链接或代码并等待确认;密钥只放 .env.local、Convex 环境变量或 Cloudflare secrets,绝不提交到文件。
- 先“盘问”再构建:写任何代码前运行 grill-me 技能,询问目标用户、主要动作、数据、可见性、付费、邮件、域名、外观、v1 范围与完成标准,并给出推荐答案,用户确认简报后才开始构建。默认:首页在 /、应用在 /app、英文界面、OTP 登录、用户是唯一管理员。随后用 TanStack Start + Tailwind + shadcn 初始化脚手架,git init 并创建私有 GitHub 仓库。
- Convex:npx convex dev --once 创建项目并写入 .env.local;单一 schema.ts 为每个查询建索引;每个公开函数服务端校验登录用户与所有权;仅服务端调用的用 internal*;读取用 .take(n) 或 .paginate() 限制。
- Better Auth:在 convex/convex.config.ts 注册 betterAuth 与 lumail 组件,配置 emailOTP 插件等;BETTER_AUTH_SECRET 与 SITE_URL 设为 Convex 环境变量;在路由 beforeLoad 和每个 Convex 函数中保护 /app。
- Lumail:所有调用集中于 convex/email.ts,API 密钥不进入浏览器;登录验证码用 transactional 邮件,无密钥时输出到 Convex 控制台便于本地开发;注册时在用户创建后 upsert 订阅者并打标签;对已通过 OTP 或付款证明邮箱归属的用户默认跳过双重确认,冷启动表单(如新闻订阅、等候名单)保留双重确认;发送域名通过 lumail 命令创建并在 Cloudflare 添加未代理 DNS 记录。
- 页面数据通过 useSuspenseQuery(convexQuery(...)) 实时更新;支付先用模拟结账,拿到 Stripe 测试密钥后接入真实 Checkout 与签名 webhook;完善错误页、404 页、favicon 与页面标题。
- 部署:配置 wrangler.jsonc,npx convex deploy 部署生产后端并设置生产环境变量,使用 cf build / cf deploy 部署,域名须在用户的 Cloudflare 账户中。
- 验证:打开线上 URL 走真实流程(首页、真实 OTP 登录、主要操作、真实数据列表、测试购买、快捷键、退出、404),确认 Lumail 中订阅状态与标签正确,修复所有错误并运行 audit-safety 检查认证、数据访问与支付后再宣布上线。
适用场景 需要借助固定全栈方案快速搭建并上线带认证、数据、邮件、可选支付的 Web 应用的场景。
限制 技术栈固定,除非用户要求不替换层级;需要用户拥有 Cloudflare 账户与域名;涉及浏览器登录、付款、密钥时须用户介入;未提供具体收费、价格或效果数据。