lovable · diff
git:20260113.222b7de to git:20260705.e9e4712
117 added, 7 removed. Audit A to A.
---
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
+ ## Project Architecture Types
- 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 supports two architectures. **Always detect which one you're working with** before giving advice.
- ## What Syncs Automatically (GitHub → Lovable)
+ ### 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
+ - 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
+ ### 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:
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