| name | lovable-saas-builder |
| description | Usar cuando el usuario quiera construir un SaaS o MVP usando Lovable Cloud con Supabase integrado. Guía el flujo completo desde Design System hasta Edge Functions. Keywords: lovable, saas, mvp, supabase, edge function, design system, b2b, dashboard, inbox. |
Lovable SaaS Builder
Convierte ideas de producto en MVPs funcionando, usando Lovable Cloud + Supabase como stack completo.
🗺️ Mapa de Contenido
Lee solo los archivos que necesites según la fase del proyecto:
| Fase | Archivo | Cuándo leer |
|---|
| 0. Inicio | workflow/01-blank-canvas.md | Al empezar cualquier proyecto nuevo |
| 1. Design System | workflow/02-design-system.md + prompts/01-design-system.md | Siempre, antes de cualquier feature |
| 2. Schema DB | workflow/03-supabase-schema.md + references/supabase-tables.md | Al diseñar la base de datos |
| 3. Auth + Layout | workflow/04-auth-layout.md + prompts/02-saas-scaffold.md | Al crear el scaffold inicial |
| 4. Features | workflow/05-feature-building.md + prompts específicos | Al agregar cada feature |
| 5. Edge Functions | workflow/06-edge-functions.md + patterns/ | Al conectar APIs externas o lógica backend |
| Referencia rápida | references/ | En cualquier momento |
⚡ El Flujo en 6 Pasos
[1] Blank Canvas → [2] Design System → [3] DB Schema → [4] Auth + Layout → [5] Features → [6] Edge Functions
Regla de oro: Nunca saltear el paso 2 (Design System). Una vez que Lovable genera código sin DS propio, el caos visual es difícil de revertir.
🎯 Cuándo Usar Esta Skill
SÍ:
- El usuario quiere construir un SaaS, dashboard o MVP en Lovable
- Necesita guía para estructurar prompts efectivos para Lovable
- Quiere conectar la app a una API externa via Edge Function
- Necesita un schema de Supabase para un producto multi-tenant
NO:
- El usuario trabaja con Lovable self-hosted o un stack propio (no Lovable Cloud)
- El proyecto ya tiene código y solo necesita debuggear algo específico
- Quiere automatizaciones con n8n (usar
tools-automation/n8n-workflow-builder)
🏗️ Stack de Referencia
Este stack está validado en producción en SoporteML (app real de gestión de consultas de MercadoLibre con respuestas IA):
Frontend: Lovable Cloud (Vite + React + TypeScript + TailwindCSS + shadcn/ui)
Database: Supabase (PostgreSQL + Row Level Security)
Auth: Supabase Auth (email/password)
Backend: Supabase Edge Functions (Deno, TypeScript)
AI: ai.gateway.lovable.dev (acceso a Gemini, GPT-4, Claude)
Storage: Supabase Storage (archivos, imágenes)
⚠️ Reglas Críticas de Lovable
[!IMPORTANT]
Lee references/lovable-tips.md antes de la primera sesión. Contiene los errores más comunes y cómo evitarlos.
- No pedir a Lovable que borre código → Siempre decirle que reemplace o modifique
- Un feature a la vez → Los mega-prompts generan código inconsistente
- Confirmar antes de modificar Edge Functions existentes → Son costosas de reescribir
- El Design System va en
src/index.css y tailwind.config.ts, no en componentes individuales
