lovable

Lovable 集成技能

初始化或重新初始化时，请使用 ../init/SKILL.md。提交任何 Lovable 提示词前，请应用提示词授权：开启 YOLO 即表示授予持续授权；关闭 YOLO 时，适用通用确认规则。

与 Lovable 交互前，请应用额度效率。尽可能在本地完成所有工作；检查后端状态时，请使用浏览器中的 Cloud 页面，而非 MCP/聊天；将不可或缺的托管操作合并到一条精简提示词中。

此技能可帮助 Claude Code 高效处理 Lovable.dev 项目，同时遵循 Lovable 的部署要求。

何时使用此技能

在以下情况下启用：

• 用户提及“Lovable”或“lovable.dev”
• 项目包含带有 Edge Functions 的 supabase/ 目录
• 用户要求部署边缘函数
• 用户创建数据库迁移
• 用户询问 Lovable Cloud 或后端部署
• 项目看起来是 Lovable 项目（React + Supabase 结构）

项目架构类型

Lovable 支持两种架构。提供建议前，请务必检测你正在处理的架构。

检测架构

检查用户项目的根目录：

• 存在 app.config.ts → TanStack Start（较新，SSR — 2026 年 4 月之后）
• 存在 vite.config.ts → Vite SPA（旧版，CSR — 2026 年 4 月之前）

两种架构都得到完整支持。旧项目会继续使用 Vite，不会被强制迁移。

---

Vite SPA 架构（旧版）

2026 年 4 月之前创建的项目。仅客户端渲染。

自动同步的内容（Vite SPA）

✅ 可自由编辑并推送到 main：

• src/ - 所有 React 组件、页面、钩子和工具函数
• public/ - 静态资源
• 配置文件 - vite.config.ts、tailwind.config.js、tsconfig.json
• package.json - 依赖项
• supabase/functions/*/index.ts - Edge Function 代码（不包括部署）
• supabase/migrations/*.sql - 迁移文件（不包括应用）

需要 Lovable 部署的内容（Vite SPA）

⚠️ 编辑后，提供 Lovable 提示词：

更改类型	Lovable 提示词
Edge Function 代码	"Deploy the [name] edge function"
所有 Edge Functions	"Deploy all edge functions"
新迁移文件	"Apply pending Supabase migrations"
需要新表	"Create a [name] table with columns: [list]"
RLS 策略	"Enable RLS on [table] allowing [who] to [what]"
Storage 存储桶	"Create a [public/private] bucket called [name]"
密钥/环境变量	手动操作：Cloud → Secrets → Add

---

TanStack Start 架构（新项目）

2026 年 4 月之后创建的项目。通过 TanStack Start 实现完整的服务端渲染（SSR）。

与 Vite SPA 的主要区别

• 路由基于 app/routes/ 中的文件（而非 src/App.tsx 中的 React Router）
• 配置文件为 app.config.ts（而非 vite.config.ts）
• 服务端函数（createServerFn）允许将服务端逻辑直接写在组件文件中——简单的服务端逻辑无需边缘函数
• 名为 *.server.ts 的文件仅在服务端运行，不会发送到浏览器
• 页面会先在服务器上渲染为完整 HTML，然后再发送到浏览器

自动同步的内容（TanStack Start）

✅ 可自由编辑并推送到 main：

• app/ - 所有路由、组件、服务端函数和布局
• app/routes/ - 基于文件的路由页面
• public/ - 静态资源
• app.config.ts、tailwind.config.js、tsconfig.json - 配置文件
• package.json - 依赖项
• app/**/*.server.ts - TanStack 服务端函数（自动部署，无需 Lovable 提示词）
• supabase/functions/*/index.ts - Supabase Edge Function 代码（不包括部署）
• supabase/migrations/*.sql - 迁移文件（不包括应用）

需要通过 Lovable 部署的内容（TanStack Start）

⚠️ 编辑后，请提供 Lovable 提示词：

更改类型	Lovable 提示词
Supabase Edge Function 代码	"Deploy the [name] edge function"
所有 Supabase Edge Functions	"Deploy all edge functions"
新迁移文件	"Apply pending Supabase migrations"
需要新建表	"Create a [name] table with columns: [list]"
RLS 策略	"Enable RLS on [table] allowing [who] to [what]"
存储桶	"Create a [public/private] bucket called [name]"
Secret/环境变量	手动：Cloud → Secrets → Add

注意： TanStack 服务端函数（createServerFn）不是 Supabase Edge Functions。它们位于 app/ 中，通过 GitHub 同步自动部署，无需 Lovable 提示词。只有 supabase/functions/ 需要手动部署。

TanStack Start 文件结构

project/
├── app/                          # ✅ Safe - auto-syncs
│   ├── routes/                   # File-based routing
│   │   ├── __root.tsx            # Root layout
│   │   ├── index.tsx             # Home page (/)
│   │   └── [route].tsx           # Other pages
│   ├── components/               # Shared UI components
│   ├── lib/                      # Utilities and helpers
│   └── *.server.ts               # ✅ Server functions (auto-deploy)
├── app.config.ts                 # TanStack Start config
├── public/                       # Static assets
├── supabase/
│   ├── functions/                # ✅ Edit code, ⚠️ needs deploy
│   └── migrations/               # ✅ Create files, ⚠️ needs apply
└── CLAUDE.md                     # Project context

---

核心概念（两种架构均适用）

Lovable 仅在 main 分支上使用双向 GitHub 同步：

• 前端和服务端代码（包括 TanStack 服务端函数）会自动同步
• Supabase Edge Functions 和数据库迁移在代码更改后需要 Lovable 提示词

响应格式

需要部署后端时，始终输出：

📋 **LOVABLE PROMPT:**
> "[exact prompt to copy-paste]"

对于破坏性操作，添加：

⚠️ **Warning**: [explanation of risk]

文件结构参考

Vite SPA（旧版 — 存在 vite.config.ts）

project/
├── src/                          # ✅ Safe - auto-syncs
│   ├── components/
│   ├── pages/
│   ├── hooks/
│   ├── lib/
│   └── integrations/supabase/
│       ├── client.ts             # ⚠️ Has Supabase URLs
│       └── types.ts
├── supabase/
│   ├── functions/                # ✅ Edit code, ⚠️ needs deploy
│   │   └── [function-name]/
│   │       └── index.ts
│   ├── migrations/               # ✅ Create files, ⚠️ needs apply
│   │   └── YYYYMMDDHHMMSS_*.sql
│   └── config.toml               # ⚠️ Lovable Cloud manages
├── .env                          # Local only - Lovable ignores
└── CLAUDE.md                     # Project context

TanStack Start（新版 — 存在 app.config.ts）

project/
├── app/                          # ✅ Safe - auto-syncs
│   ├── routes/                   # File-based routing
│   │   ├── __root.tsx            # Root layout
│   │   ├── index.tsx             # Home route (/)
│   │   └── [name].tsx            # Named routes
│   ├── components/               # Shared components
│   ├── lib/                      # Utilities
│   ├── integrations/supabase/    # Supabase client + types
│   └── *.server.ts               # ✅ Server functions (auto-deploy, no prompt needed)
├── app.config.ts                 # TanStack Start config
├── public/                       # Static assets
├── supabase/
│   ├── functions/                # ✅ Edit code, ⚠️ needs deploy via Lovable
│   │   └── [function-name]/
│   │       └── index.ts
│   ├── migrations/               # ✅ Create files, ⚠️ needs apply via Lovable
│   │   └── YYYYMMDDHHMMSS_*.sql
│   └── config.toml               # ⚠️ Lovable Cloud manages
├── .env                          # Local only - Lovable ignores
└── CLAUDE.md                     # Project context

后端类型

Lovable Cloud

• 后端完全由 Lovable 管理
• 无法访问 Supabase 控制台
• 所有操作均通过 Lovable 提示词完成
• 在 Cloud → Secrets 界面中管理 Secret

自有 Supabase

• 可直接访问 Supabase 控制台
• 可以使用 Supabase CLI：supabase functions deploy
• 灵活性更高，但需要手动设置

常用提示词参考

Edge Functions

"Deploy all edge functions"
"Deploy the send-email edge function"
"Create an edge function called [name] that [description]"
"Show logs for [name] edge function"
"The [name] edge function returns [error]. Fix it"

数据库

"Create a [name] table with columns: id (uuid), name (text), created_at (timestamp)"
"Add a [column] column of type [type] to [table]"
"Add foreign key from [table1].[col] to [table2].id"
"Apply pending Supabase migrations"

RLS 策略

"Enable RLS on [table]"
"Add RLS policy on [table] allowing authenticated users to read all rows"
"Add RLS policy on [table] allowing users to only access their own rows"

存储

"Create a public storage bucket called [name]"
"Create a private storage bucket called [name]"
"Allow authenticated users to upload to [bucket]"

身份验证

"Enable Google authentication"
"Enable GitHub authentication"
"When user signs up, create row in profiles table"

分支规则

• 只有 main 会与 Lovable 同步
• 功能分支在合并前不会部署
• Lovable 会在推送后 1-2 分钟内同步

Yolo 模式 — 自动部署（Beta）

当 CLAUDE.md 中设置 yolo_mode: on 时，通过浏览器自动化完成部署：

工作原理

yolo 技能（/skills/yolo/SKILL.md）会接管，不再显示手动提示词：

1. 自动导航至 Lovable.dev
2. 提交部署提示词
3. 监控成功或失败状态
4. 运行验证测试（如果已启用）
5. 汇报部署摘要

Yolo 模式的启用时机

• 执行 /lovable:deploy-edge 命令期间
• 执行 /lovable:apply-migration 命令期间
• CLAUDE.md 中设置 yolo_mode: on 时

配置 Yolo 模式

/lovable:yolo on               # Enable with testing
/lovable:yolo on --no-testing  # Enable without testing
/lovable:yolo on --debug       # Enable with verbose logs
/lovable:yolo off              # Disable

Beta 状态

⚠️ Yolo 模式处于 Beta 阶段：

• 需要 Claude in Chrome 扩展
• 可能存在 Bug 或 UI 兼容性问题
• 始终提供手动备用方案
• 详情请参阅 /skills/yolo/SKILL.md

调试清单

1. 前端没有更新？

   • 是否在 main 分支？
   • 是否已推送更改？
   • 等待 1-2 分钟

2. Edge Function 无法正常工作？

   • 是否已通过 Lovable（或 Yolo 模式）部署？
   • 是否已在 Cloud 界面中设置 Secret？
   • 检查 Lovable 中的日志

3. 数据库查询失败？

   • 是否已应用迁移（通过 Lovable 或 Yolo 模式）？
   • RLS 策略是否正确？
   • 表是否存在？

4. Yolo 模式无法正常工作？

   • 检查 CLAUDE.md 中是否设置 yolo_mode: on
   • 是否已安装 Chrome 扩展？
   • 是否已登录 Lovable？
   • 故障排除请参阅 yolo 技能