Lovable Integration Skill

This skill enables Claude Code to work effectively with Lovable.dev projects while respecting Lovable's deployment requirements.

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)

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

What Syncs Automatically (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)

What Requires Lovable Deployment

⚠️ After editing, provide Lovable prompt:

Change Type	Lovable 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 var	Manual: Cloud → Secrets → Add

Response Format

When backend deployment is needed, always output:

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

For destructive operations, add:

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

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

Backend Types

Lovable Cloud

• Backend managed entirely by Lovable
• No Supabase dashboard access
• All operations via Lovable prompts
• Secrets in Cloud → Secrets UI

Own Supabase

• Direct Supabase dashboard access
• Can use Supabase CLI: supabase functions deploy
• More flexibility but manual setup

Quick Prompts Reference

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"

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"

RLS Policies

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

Auth

"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

Yolo Mode - Automated Deployments (Beta)

When yolo_mode: on in CLAUDE.md, deployments are automated via browser automation:

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

When Yolo Mode Activates

• During /lovable:deploy-edge command
• During /lovable:apply-migration command
• When yolo_mode: on in CLAUDE.md

Configure Yolo Mode

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

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