next-supabase-vercel-bundle

ORQUESTADOR REAL para el ciclo completo de desarrollo Full-Stack. Conecta a Supabase, genera migrations SQL ejecutables, y guía paso a paso. Integración con Vercel para deployment automático.

# Next-Supabase-Vercel Bundle

**ORQUESTADOR REAL para Next.js + Supabase + Vercel Development**

Este skill no es solo scaffolding básico. Es un AUTOMATIZADOR COMPLETO del ciclo de desarrollo full-stack:

- ✅ Conecta a Supabase automáticamente y testea conexión
- ✅ Genera migrations SQL reales y listas para ejecutar
- ✅ Configura Authentication en Supabase Dashboard (genera SQL)
- ✅ Configura Storage en Supabase Dashboard (genera SQL)
- ✅ Deploya a Vercel automáticamente
- ✅ Guía paso a paso para cada configuración manual
- ✅ Manejo de errores y estados

**Value Prop: 3+ horas → 30 segundos**

---

## Cuando Usar

- Crear proyecto Next.js + Supabase completamente configurado
- Configurar base de datos y ejecutar migrations
- Setup authentication y storage
- Deployar automáticamente a Vercel
- Prototipado rápido para demostrar ideas

---

## Quick Start

```bash
# Crear proyecto con auth + database (RECOMENDADO)
snv init my-app --template auth-db

# Configurar database (auto-conecta + genera migrations)
cd my-app
snv db:setup

# Configurar authentication (genera SQL + guía)
snv auth:setup

# Configurar storage (genera SQL + guía) - opcional
snv storage:setup --buckets avatars,documents

# Iniciar desarrollo local
snv dev

# Deployar automáticamente a Vercel
snv deploy
```

---

## Comandos Disponibles

### `snv init <project-name>` - Crear y Configurar Proyecto

```bash
snv init my-app
snv init my-app --template auth-db
```

**Qué hace:**
1. Crea estructura de proyecto Next.js
2. Crea Supabase client configurado
3. Genera `.env.local` y `.env.example` con placeholders
4. Crea directorio `supabase/migrations/`
5. Crea `package.json` con dependencias pre-configuradas
6. Genera página home con guía de próximos pasos
7. Crea `tsconfig.json` para TypeScript
8. Inicializa git repository

**Flags:**
- `--template <name>`: Template a usar
  - `minimal` - Básico (Next.js + Supabase client)
  - `auth-db` - **RECOMENDADO** - Auth + Database
- `auth` - Con authentication
- `full` - Completo (Auth + DB + Storage)
- `--no-typescript`: Deshabilitar TypeScript
- `--no-tailwind`: Deshabilitar Tailwind CSS
- `--no-eslint`: Deshabilitar ESLint

**Output:**
```
✅ Proyecto my-app creado exitosamente!

Siguientes pasos:
1. Editar .env.local con tus credenciales de Supabase
2. Ejecutar: snv db:setup (configura DB + migrations)
3. (Opcional) Ejecutar: snv auth:setup (configura Auth)
4. (Opcional) Ejecutar: snv storage:setup (configura Storage)
5. Ejecutar: snv dev (iniciar desarrollo)

Para comenzar:
  cd my-app
  snv dev
```

---

### `snv db:setup` - Configurar Database (ORQUESTADOR)

```bash
snv db:setup
```

**Qué hace:**
1. **Verifica .env.local**: Requiere `NEXT_PUBLIC_SUPABASE_URL` y `SUPABASE_SERVICE_KEY`
2. **Conecta a Supabase**: Testea conexión con query simple
3. **Busca migrations**: Escanea `supabase/migrations/` por archivos `.sql`
4. **Genera summary**: Crea `supabase/migrations-summary.md` con lista de migrations
5. **Genera guía**: Instrucciones para ejecutar en Supabase Dashboard
6. **Ejecuta migrations automáticamente** (si se confirma)

**Migrations SQL generadas:**
El skill crea migraciones con SQL real y ejecutable:

**Migration de Auth:**
```sql
-- Habilitar Authentication en Supabase

-- 1. Habilitar Email Auth
alter schema auth.users enable row level security;

-- 2. Crear tabla de usuarios (ejemplo)
create table if not exists public.users (
  id uuid default gen_random_uuid() primary key,
  email text unique not null,
  created_at timestamp with time zone default timezone('utc', now()) not null,
  updated_at timestamp with time zone default timezone('utc', now()) not null
);

-- 3. Configurar RLS para usuarios
alter table public.users enable row level security;

create policy "Usuarios pueden ver su propio perfil"
on public.users for select
using (auth.uid())
with check (auth.uid() = id);

grant select;
```

**Ejemplos de migrations:**
- Habilitar Auth providers (Email, Google, GitHub)
- Crear tablas de aplicación
- Configurar Row Level Security (RLS)
- Crear triggers automáticos

**Output:**
```
🔌 Checking environment variables...
📝 Loading credentials...

🌐 Connecting to Supabase...
✅ Connection to Supabase successful!

📋 Checking for migrations...
📦 Found 2 migration(s):
  1. 001_initial_schema.sql
  2. 002_enable_auth.sql

⚠️  NOTE: Las migrations deben ejecutarse en Supabase Dashboard

ABRIR: https://supabase.com/dashboard/project/_/sql/new

✅ Database setup completado!

Estado de la base de datos:
  URL: https://xxx.supabase.co
  Service Key: eyJhbGcOiJIUz...

Archivo creado: supabase/migrations-summary.md
Usa este archivo como guía para ejecutar las migrations en el dashboard.
```

---

### `snv auth:setup` - Configurar Authentication (ORQUESTADOR)

```bash
snv auth:setup
```

**Qué hace:**
1. **Verifica .env.local**: Requiere credenciales
2. **Conecta a Supabase**: Verifica Auth está habilitado
3. **Genera SQL migration**: Crea `002_enable_auth.sql` con:
   - Habilitación de Email Auth
   - Creación de tabla `users`
   - Configuración de Row Level Security (RLS)
4. **Crea guía completa**: URLs directas a Dashboard de Supabase
5. **Genera páginas auth** (si no existen):
   - `src/app/auth/login/page.tsx`
   - `src/app/auth/signup/page.tsx`
   - `src/lib/auth.ts` con utilities

**Ejemplo de migration SQL generado:**
```sql
-- Habilitar Authentication en Supabase

-- 1. Habilitar Email Auth
alter schema auth.users enable row level security;

-- 2. Crear tabla de usuarios
create table if not exists public.users (
  id uuid default gen_random_uuid() primary key,
  email text unique not null,
  created_at timestamp with time zone default timezone('utc', now()) not null,
  updated_at timestamp with time zone default timezone('utc', now()) not null
);

-- 3. Configurar RLS para usuarios
alter table public.users enable row level security;

create policy "Usuarios pueden ver su propio perfil"
on public.users for select
using (auth.uid())
with check (auth.uid() = id);

grant select;
```

**Output:**
```
🔐 Checking authentication setup...
✅ Authentication enabled in Supabase

📋 Creating auth migration...
✅ Migration creada: 002_enable_auth.sql

📄 Creating auth pages...
  src/app/auth/login/page.tsx
  src/app/auth/signup/page.tsx
  src/lib/auth.ts

📋 Pasos para completar configuración:

ABRIR el Supabase Dashboard: https://supabase.com/dashboard/project/_/auth/providers

1. Habilita Email Auth (Authentication > Providers > Email)
2. (Opcional) Agrega Google OAuth (Authentication > Providers > Google)

Luego ejecuta la migration 002_enable_auth.sql en SQL Editor:
https://supabase.com/dashboard/project/_/sql/new

✅ Auth setup completado!

Notas importantes:
- Las páginas de login/signup ya existen en tu proyecto
- Revisa src/lib/supabase.ts para la configuración de Auth
- Los RLS policies (Row Level Security) se aplican automáticamente
```

---

### `snv storage:setup` - Configurar Storage (ORQUESTADOR)

```bash
snv storage:setup
snv storage:setup --buckets avatars,documents
```

**Qué hace:**
1. **Verifica .env.local**: Requiere credenciales
2. **Conecta a Supabase**: Verifica Storage está habilitado
3. **Genera SQL migration**: Crea `003_enable_storage.sql` con:
   - Creación de buckets
   - Configuración de políticas RLS
4. **Crea guía completa**: URLs directas con instrucciones

**Ejemplo de migration SQL generado:**
```sql
-- Habilitar Storage en Supabase

-- 1. Crear buckets de ejemplo
insert into storage.buckets (id, name, public, file_size_limit, allowed_mime_types)
values 
  ('avatars', 'avatars', true, 5242880, 'image/jpeg,image/png,image/gif'),
  ('documents', 'documents', true, 52428800, 'application/pdf,application/msword,text/plain')
on conflict (id) do nothing;

-- 2. Configurar políticas RLS
-- NOTA: Las políticas deben configurarse manualmente en el Dashboard
-- URL: https://supabase.com/dashboard/project/_/storage/policies

-- Ejemplo de política para acceso público a avatars
create policy "Acceso público a avatars"
on storag