Back to Details

lovable

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Lovable Integration Skill

Lovable 集成技能

This skill enables Claude Code to work effectively with Lovable.dev projects while respecting Lovable's deployment requirements.
该技能使Claude Code能够在遵循Lovable部署要求的前提下，高效处理Lovable.dev项目。

When to Use This Skill

适用场景

Activate when:
  • User mentions "Lovable" or "lovable.dev"
  • Project has 
    supabase/
    directory with Edge Functions
  • User asks to deploy edge functions
  • User creates database migrations
  • User asks about Lovable Cloud or backend deployment
  • Project appears to be a Lovable project (React + Supabase structure)
在以下场景下激活：
  • 用户提及“Lovable”或“lovable.dev”
  • 项目包含带有Edge Functions的
    supabase/
    目录
  • 用户要求部署edge functions
  • 用户创建数据库迁移
  • 用户询问Lovable Cloud或后端部署相关问题
  • 项目为Lovable项目（React + Supabase架构）

Core Concept

核心概念

Lovable uses two-way GitHub sync on the 
main
branch only:
  • Frontend code syncs automatically
  • Backend operations (Edge Functions, migrations, RLS) require Lovable prompts
Lovable仅在
main
分支上使用双向GitHub同步：
  • 前端代码自动同步
  • 后端操作（Edge Functions、迁移、RLS）需要使用Lovable指令

What Syncs Automatically (GitHub → Lovable)

自动同步内容（GitHub → Lovable）

✅ Edit freely and push to 
main
:
  • src/
    - All React components, pages, hooks, utils
  • public/
    - Static assets
  • Config files - vite.config.ts, tailwind.config.js, tsconfig.json
  • package.json
    - Dependencies
  • supabase/functions/*/index.ts
    - Edge Function code (not deployment)
  • supabase/migrations/*.sql
    - Migration files (not application)
✅ 可自由编辑并推送到
main
分支：
  • src/
    - 所有React组件、页面、钩子、工具函数
  • public/
    - 静态资源
  • 配置文件 - vite.config.ts、tailwind.config.js、tsconfig.json
  • package.json
    - 依赖项
  • supabase/functions/*/index.ts
    - Edge Function 代码（不包含部署）
  • supabase/migrations/*.sql
    - 迁移 文件（不包含应用）

What Requires Lovable Deployment

需要Lovable部署的内容

⚠️ After editing, provide Lovable prompt:
Change TypeLovable Prompt
Edge Function code
"Deploy the [name] edge function"
All Edge Functions
"Deploy all edge functions"
New migration file
"Apply pending Supabase migrations"
New table needed
"Create a [name] table with columns: [list]"
RLS policy
"Enable RLS on [table] allowing [who] to [what]"
Storage bucket
"Create a [public/private] bucket called [name]"
Secret/env varManual: Cloud → Secrets → Add
⚠️ 编辑完成后，需提供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]"
存储桶
"Create a [public/private] bucket called [name]"
密钥/环境变量手动操作：Cloud → Secrets → 添加

Response Format

响应格式

When backend deployment is needed, always output:
📋 **LOVABLE PROMPT:**
> "[exact prompt to copy-paste]"
For destructive operations, add:
⚠️ **Warning**: [explanation of risk]
当需要进行后端部署时，需始终输出：
📋 **LOVABLE 指令：**
> "[可直接复制粘贴的精准指令]"
对于破坏性操作，需添加：
⚠️ **警告**：[风险说明]

File Structure Reference

文件结构参考

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
project/
├── src/                          # ✅ 安全 - 自动同步
│   ├── components/
│   ├── pages/
│   ├── hooks/
│   ├── lib/
│   └── integrations/supabase/
│       ├── client.ts             # ⚠️ 包含Supabase URL
│       └── types.ts
├── supabase/
│   ├── functions/                # ✅ 可编辑代码，⚠️ 需要部署
│   │   └── [function-name]/
│   │       └── index.ts
│   ├── migrations/               # ✅ 可创建文件，⚠️ 需要应用
│   │   └── YYYYMMDDHHMMSS_*.sql
│   └── config.toml               # ⚠️ 由Lovable Cloud管理
├── .env                          # 仅本地使用 - Lovable会忽略
└── CLAUDE.md                     # 项目上下文

Backend Types

后端类型

Lovable Cloud

Lovable Cloud

  • Backend managed entirely by Lovable
  • No Supabase dashboard access
  • All operations via Lovable prompts
  • Secrets in Cloud → Secrets UI
  • 后端完全由Lovable管理
  • 无Supabase控制台访问权限
  • 所有操作通过Lovable指令完成
  • 密钥在Cloud → Secrets界面中管理

Own Supabase

自有Supabase

  • Direct Supabase dashboard access
  • Can use Supabase CLI: 
    supabase functions deploy
  • More flexibility but manual setup
  • 可直接访问Supabase控制台
  • 可使用Supabase CLI：
    supabase functions deploy
  • 灵活性更高但需手动配置

Quick Prompts Reference

快速指令参考

Edge Functions

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"
"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"

Database

数据库

"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"
"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 Policies

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"
"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"

Storage

存储

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

Auth

认证

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

Branch Rules

分支规则

  • Only 
    main
    syncs     with Lovable
  • Feature branches don't deploy until merged
  • Lovable syncs within 1-2 minutes of push
  • 仅
    main
    分支与Lovable同步
  • 功能分支需合并后才会部署
  • Lovable会在推送后1-2分钟内完成同步

Yolo Mode - Automated Deployments (Beta)

Yolo模式 - 自动部署（测试版）

When 
yolo_mode: on
in CLAUDE.md, deployments are automated via browser automation:
当CLAUDE.md中设置
yolo_mode: on
时，将通过浏览器自动化实现自动部署：

How It Works

工作原理

Instead of showing manual prompts, the yolo skill (
/skills/yolo/SKILL.md
) takes over:
  1. Automatically navigates to Lovable.dev
  2. Submits deployment prompts
  3. Monitors for success/failure
  4. Runs verification tests (if enabled)
  5. Reports deployment summary
不再显示手动指令，而是由yolo技能（
/skills/yolo/SKILL.md
）接管：
  1. 自动导航至Lovable.dev
  2. 提交部署指令
  3. 监控部署成功/失败状态
  4. 运行验证测试（若启用）
  5. 生成部署摘要报告

When Yolo Mode Activates

Yolo模式激活条件

  • During 
    /lovable:deploy-edge
    command
  • During 
    /lovable:apply-migration
    command
  • When 
    yolo_mode: on
    in CLAUDE.md
  • 执行
    /lovable:deploy-edge
    命令时
  • 执行
    /lovable:apply-migration
    命令时
  • CLAUDE.md中设置
    yolo_mode: on
    时

Configure Yolo Mode

配置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
/lovable:yolo on               # 启用并开启测试
/lovable:yolo on --no-testing  # 启用但关闭测试
/lovable:yolo on --debug       # 启用并开启详细日志
/lovable:yolo off              # 关闭

Beta Status

测试版说明

⚠️ Yolo mode is in beta:
  • Requires Claude in Chrome extension
  • May have bugs or UI compatibility issues
  • Always has manual fallback
  • See 
    /skills/yolo/SKILL.md
    for details
⚠️ Yolo模式处于测试阶段：
  • 需要Chrome扩展中的Claude
  • 可能存在bug或UI兼容性问题
  • 始终支持手动 fallback
  • 详情请查看
    /skills/yolo/SKILL.md

Debugging Checklist

调试检查清单

  1. Frontend not updating?
    • On 
      main
      branch?
    • Changes pushed?
    • Wait 1-2 min
  2. Edge Function not working?
    • Deployed via Lovable (or yolo mode)?
    • Secrets set in Cloud UI?
    • Check logs in Lovable
  3. Database query failing?
    • Migration applied (via Lovable or yolo mode)?
    • RLS policies correct?
    • Table exists?
  4. Yolo mode not working?
    • Check 
      yolo_mode: on
      in CLAUDE.md
    • Chrome extension installed?
    • Logged into Lovable?
    • See yolo skill for troubleshooting
  1. 前端未更新？
    • 是否在
      main
      分支？
    • 是否已推送变更？
    • 等待1-2分钟
  2. Edge Function无法工作？
    • 是否已通过Lovable（或Yolo模式）部署？
    • 是否已在Cloud界面中设置密钥？
    • 在Lovable中查看日志
  3. 数据库查询失败？
    • 是否已通过Lovable（或Yolo模式）应用迁移？
    • RLS策略是否正确？
    • 表是否存在？
  4. Yolo模式无法工作？
    • 检查CLAUDE.md中是否设置
      yolo_mode: on
    • 是否已安装Chrome扩展？
    • 是否已登录Lovable？
    • 查看yolo技能文档获取故障排除方法