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:

• Automatically navigates to Lovable.dev

• Submits deployment prompts

• Monitors for success/failure

• Runs verification tests (if enabled)

• 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

Frontend not updating?

• On main branch?

• Changes pushed?

• Wait 1-2 min

Edge Function not working?

• Deployed via Lovable (or yolo mode)?

• Secrets set in Cloud UI?

• Check logs in Lovable

Database query failing?

• Migration applied (via Lovable or yolo mode)?

• RLS policies correct?

• Table exists?

Yolo mode not working?

• Check yolo_mode: on in CLAUDE.md

• Chrome extension installed?

• Logged into Lovable?

• See yolo skill for troubleshooting