Lovable Integration Skill Skill

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)

Project Architecture Types

Lovable supports two architectures. Always detect which one you're working with before giving advice.

Detecting Architecture

Check the root directory of the user's project:

app.config.ts present → TanStack Start (new, SSR — post-April 2026)
vite.config.ts present → Vite SPA (legacy, CSR — pre-April 2026)

Both are fully supported. Old projects remain on Vite and receive no forced migration.

Vite SPA Architecture (Legacy)

Projects created before April 2026. Client-side rendering only.

What Syncs Automatically (Vite SPA)

✅ 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 (Vite SPA)

⚠️ 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 |

TanStack Start Architecture (New Projects)

Projects created after April 2026. Full server-side rendering (SSR) via TanStack Start.

Key Differences from Vite SPA

Routes are file-based in app/routes/ (not React Router in src/App.tsx)
Config file is app.config.ts (not vite.config.ts)
Server functions (createServerFn) let server-side logic live directly in component files — no edge function needed for simple server logic
Files named *.server.ts are server-only and never sent to the browser
Pages are rendered as complete HTML on the server before reaching the browser

What Syncs Automatically (TanStack Start)

✅ Edit freely and push to main:

app/ - All routes, components, server functions, layouts
app/routes/ - File-based route pages
public/ - Static assets
app.config.ts, tailwind.config.js, tsconfig.json - Config files
package.json - Dependencies
app/**/*.server.ts - TanStack server functions (auto-deploys, no Lovable prompt needed)
supabase/functions/*/index.ts - Supabase Edge Function code (not deployment)
supabase/migrations/*.sql - Migration files (not application)

What Requires Lovable Deployment (TanStack Start)

⚠️ After editing, provide Lovable prompt:

| Change Type | Lovable Prompt | |-------------|----------------| | Supabase Edge Function code | "Deploy the [name] edge function" | | All Supabase 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 |

Note: TanStack server functions (createServerFn) are not Supabase Edge Functions. They live in app/ and deploy automatically via GitHub sync — no Lovable prompt needed. Only supabase/functions/ requires manual deployment.

TanStack Start File Structure

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

Core Concept (Both Architectures)

Lovable uses two-way GitHub sync on the main branch only:

Frontend and server-side code (including TanStack server functions) sync automatically
Supabase Edge Functions and database migrations require Lovable prompts after code changes

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

Vite SPA (Legacy — `vite.config.ts` present)

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 (New — `app.config.ts` present)

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

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

Agent Skills: Lovable Integration Skill

Install this agent skill to your local

Skill Files