lovable

name

lovable

description

Integration skill for Lovable.dev projects. Activates when working with: - Lovable.dev projects with GitHub sync - Supabase Edge Functions that need deployment - Database migrations for Lovable Cloud - Projects with supabase/ directory structure - Any mention of "Lovable", "deploy edge function", "apply migration" Provides exact Lovable prompts for backend operations that can't be done via GitHub alone.

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