✓ Verified 💻 Development ✓ Enhanced Data

Next Supabase Vercel Bundle

ORQUESTADOR REAL para el ciclo completo de desarrollo Full-Stack.

Rating
4.8 (378 reviews)
Downloads
1,572 downloads
Version
1.0.0

Overview

ORQUESTADOR REAL para el ciclo completo de desarrollo Full-Stack.

Complete Documentation

View Source →

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 - Crear y Configurar Proyecto

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

Qué hace:

  • Crea estructura de proyecto Next.js
  • Crea Supabase client configurado
  • Genera .env.local y .env.example con placeholders
  • Crea directorio supabase/migrations/
  • Crea package.json con dependencias pre-configuradas
  • Genera página home con guía de próximos pasos
  • Crea tsconfig.json para TypeScript
  • Inicializa git repository
Flags:
  • --template : 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:
text
✅ 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:

  • Verifica .env.local: Requiere NEXT_PUBLIC_SUPABASE_URL y SUPABASE_SERVICE_KEY
  • Conecta a Supabase: Testea conexión con query simple
  • Busca migrations: Escanea supabase/migrations/ por archivos .sql
  • Genera summary: Crea supabase/migrations-summary.md con lista de migrations
  • Genera guía: Instrucciones para ejecutar en Supabase Dashboard
  • 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:
text
🔌 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:

  • Verifica .env.local: Requiere credenciales
  • Conecta a Supabase: Verifica Auth está habilitado
  • 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)
  • Crea guía completa: URLs directas a Dashboard de Supabase
  • 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:

text
🔐 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:

  • Verifica .env.local: Requiere credenciales
  • Conecta a Supabase: Verifica Storage está habilitado
  • Genera SQL migration: Crea 003_enable_storage.sql con:
  • Creación de buckets
  • Configuración de políticas RLS
  • 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 storage.objects for select
using (bucket_id)
with check (bucket_id in ('avatars'))
grant select;

Output:

text
📦 Checking storage configuration...
✅ Storage enabled in Supabase

📋 Creating storage migration...
✅ Migration creada: 003_enable_storage.sql

📋 Pasos para completar configuración:

ABRIR el Supabase Dashboard: https://supabase.com/dashboard/project/_/storage/buckets

1. Ejecuta la migration 003_enable_storage.sql en SQL Editor
2. Configura las políticas RLS (Row Level Security) para cada bucket
3. Ajusta límites de tamaño de archivos según tus necesidades

✅ Storage setup completado!

Notas importantes:
- Los buckets se crean automáticamente
- Los RLS policies deben configurarse manualmente en el Dashboard
- Revisa los límites de file_size_limit en el Dashboard

snv dev - Iniciar Desarrollo Local

bash
snv dev
snv dev --port 3000

Qué hace:

  • Verifica .env.local existe
  • Inicia servidor Next.js: npm run dev
  • Muestra URL local: http://localhost:3000
Output:
text
🚀 Starting development server...
✅ Dev server iniciado en: http://localhost:3000

Presiona Ctrl+C para detener

snv deploy - Deploy a Vercel (ORQUESTADOR)

bash
snv deploy
snv deploy --prod

Qué hace:

  • Verifica Vercel CLI: Si no está instalado, muestra instrucción
  • Verifica project linked: Si no, intenta vercel link --yes
  • Build proyecto: Ejecuta npm run build
  • Deploy a Vercel: Ejecuta vercel deploy o vercel deploy --prod
  • Parse output: Busca URL de deployment
  • Verifica env vars: Revisa si hay faltantes en Vercel
Output:
text
🔍 Checking Vercel CLI...
✅ Vercel CLI listo

🔨 Building project...
✅ Build completado

🚀 Deploying to Vercel...
✅ Deploy completado!

🌐 Deployment URL:
  https://my-app.vercel.app

📝 Environment variables en Vercel:

DEBES CONFIGURARLAS MANUALMENTE EN EL DASHBOARD DE VERCEL:
https://vercel.com/dashboard

Variables requeridas:
  NEXT_PUBLIC_SUPABASE_URL
  NEXT_PUBLIC_SUPABASE_ANON_KEY
  SUPABASE_SERVICE_KEY

⚠️  NOTA: Asegúrate de configurar estas variables en Vercel para que funcione en producción

Templates Disponibles

TemplateDescripciónFeatures
minimalBásicoNext.js + Supabase client
auth-dbRECOMENDADOAuth + Database
authCon AuthLogin/Signup páginas + utilities
fullCompletoAuth + DB + Storage

Environment Variables

Para todos los proyectos:

bash
# .env.local
NEXT_PUBLIC_SUPABASE_URL=https://yourproject.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_anon_key_here

# Service role key (requerido para snv db:setup)
SUPABASE_SERVICE_KEY=your_service_role_key_here

Obtén tus credenciales en:

  • https://supabase.com/dashboard/project/_/settings/api

Arquitectura del Orquestador

Cómo Funciona el Skill

  • Fase de Inicialización (snv init)
  • Scaffolding de estructura básica
  • Generación de archivos de configuración
  • No crea dependencias en Supabase
  • Fase de Conexión (snv db:setup)
  • Lee credenciales de .env.local
  • Conecta a Supabase con service role key
  • Testea conexión con query simple
  • Genera migrations con SQL real
  • Fase de Configuración (snv auth:setup, snv storage:setup)
  • Genera SQL migrations con código ejecutable
  • Crea páginas de login/signup (si no existen)
  • Genera guías paso a paso
  • URLs directas al Dashboard de Supabase
  • Fase de Desarrollo (snv dev)
  • Verifica configuración
  • Inicia servidor Next.js
  • Muestra URLs locales
  • Fase de Deployment (snv deploy)
  • Verifica instalación de Vercel CLI
  • Build proyecto
  • Deploy a Vercel
  • Parse output y muestra URL
  • Alerta sobre env vars faltantes

Migrations SQL Generadas

El skill genera migrations con SQL VALIDO y ejecutable:

Migration de Auth (002_enable_auth.sql):

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;

Migration de Storage (003_enable_storage.sql):

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. Nota: Las políticas RLS deben configurarse manualmente
-- En Dashboard: https://supabase.com/dashboard/project/_/storage/policies

Troubleshooting

Problema: "No such built-in module: node:sqlite"

Solución: Actualizar Node.js a v22.22.0+

bash
# Verificar versión
node --version

# Actualizar NVM
nvm install 22.22.0
nvm alias default 22.22.0

# O actualizar symlink de sistema (Linux)
sudo ln -sf ~/.nvm/versions/node/v22.22.0/bin/node /usr/local/bin/node

Problema: ".env.local no encontrado"

Solución: Ejecutar snv init primero

Problema: "Connection failed to Supabase"

Solución:

  • Verificar credenciales en .env.local
  • Confirmar que el project ID sea correcto
  • Revisar que Auth esté habilitado en Supabase Dashboard

Problema: "Vercel CLI no instalado"

Solución:

bash
npm install -g vercel

Problema: "Vercel project not linked"

Solución:

bash
vercel link

Ejemplos de Workflows Completos

Workflow 1: Nuevo App con Auth + Database

bash
# 1. Crear proyecto
snv init my-app --template auth-db

# 2. Configurar credenciales
cd my-app
# Editar .env.local con:
# NEXT_PUBLIC_SUPABASE_URL=https://xxx.supabase.co
# NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJ...
# SUPABASE_SERVICE_KEY=eyJ...

# 3. Configurar database (auto-conecta + migrations)
snv db:setup

# 4. Configurar authentication (genera SQL)
snv auth:setup

# 5. Ejecutar migrations en Supabase Dashboard
# ABRE: https://supabase.com/dashboard/project/_/sql/new
# Copia y ejecuta 002_enable_auth.sql

# 6. Iniciar desarrollo
snv dev

Workflow 2: Deploy a Producción

bash
# 1. En desarrollo
cd my-app

# 2. Build y deploy
snv deploy --prod

# 3. Configurar env vars en Vercel Dashboard
# ABRE: https://vercel.com/dashboard
# Agrega: NEXT_PUBLIC_SUPABASE_URL, NEXT_PUBLIC_SUPABASE_ANON_KEY, SUPABASE_SERVICE_KEY

Workflow 3: Añadir Storage para Avatares

bash
# 1. En desarrollo
cd my-app

# 2. Configurar storage (genera SQL)
snv storage:setup --buckets avatars

# 3. Ejecutar migration en Supabase Dashboard
# ABRE: https://supabase.com/dashboard/project/_/sql/new
# Copia y ejecuta 003_enable_storage.sql

# 4. Configurar políticas RLS en Supabase Dashboard
# ABRE: https://supabase.com/dashboard/project/_/storage/policies

Requisitos del Sistema

  • Node.js 18+ (recomendado 20+)
  • npm o yarn o pnpm
  • Supabase account (free tier funciona)
  • Vercel account (free tier funciona)
  • Vercel CLI: npm i -g vercel

Comparación con Skills Existentes

vs Skills Individuales (nextjs, vercel, supabase)

Skills individuales:

  • Son guías de referencia
  • El usuario debe ejecutar comandos manualmente
  • No hay orquestación
Nuestra skill:
  • ✅ Orquesta todo el flujo automáticamente
  • ✅ Genera migrations SQL ejecutables
  • ✅ Guía paso a paso para configuraciones manuales
  • ✅ Deploy automático con detección de problemas

vs Antfarm Workflows

Antfarm:

  • Orquesta múltiples agentes especializados
  • Sistema de polling SQLite + cron jobs
  • Estado persistente en DB
  • Completo para equipos de desarrollo
Nuestra skill:
  • ✅ Similar arquitectura: comandos que generan SQL y guías
  • ✅ Foco en configuración (no desarrollo de features)
  • ✅ Un solo comando por usuario (no múltiples agentes)

Contributing

Este skill es open source. Para mejorar:

  • Fork en GitHub
  • Crear branch de feature
  • Submit pull request
Mejoras bienvenidas en:
  • Más templates de inicio
  • Integración con más servicios (Cloudflare, Netlify)
  • Tests automatizados
  • Mejor manejo de errores

ORQUESTADOR REAL para Next.js + Supabase + Vercel - De la idea al deploy en 30 segundos. 🚀

Installation

Terminal bash 

openclaw install next-supabase-vercel-bundle
Copied!

💻Code Examples

snv deploy

snv-deploy.txt
---

## Comandos Disponibles

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

snv init my-app --template auth-db

snv-init-my-app---template-auth-db.txt
**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:**

snv dev

-snv-dev.txt
---

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

snv db:setup

snv-dbsetup.txt
**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:**

grant select;

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

**Output:**

Usa este archivo como guía para ejecutar las migrations en el dashboard.

usa-este-archivo-como-gua-para-ejecutar-las-migrations-en-el-dashboard.txt
---

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

snv auth:setup

snv-authsetup.txt
**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:**

- Los RLS policies (Row Level Security) se aplican automáticamente

--los-rls-policies-row-level-security-se-aplican-automticamente.txt
---

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

snv storage:setup --buckets avatars,documents

snv-storagesetup---buckets-avatarsdocuments.txt
**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:**

- Revisa los límites de file_size_limit en el Dashboard

--revisa-los-lmites-de-filesizelimit-en-el-dashboard.txt
---

### `snv dev` - Iniciar Desarrollo Local

Tags

#web_and-frontend-development

Quick Info

Category Development
Model Claude 3.5
Complexity One-Click
Author studio-hakke
Last Updated 3/10/2026
🚀
Optimized for
Claude 3.5
🧠

Ready to Install?

Get started with this skill in seconds

openclaw install next-supabase-vercel-bundle

Resources

📂
OpenClaw Skills
View on OpenClaw GitHub
→

Related Skills

✓ Verified 💻 Development

4claw

4claw — a moderated imageboard for AI agents.

🧠 Claude-Ready #ai_and-llms
)}
★ 4.4 (118)
↓ 4,990
v1.0.0
✓ Verified 💻 Development

Aap Passport

Agent Attestation Protocol - The Reverse Turing Test.

🧠 Claude-Ready #ai_and-llms
)}
★ 4.3 (89)
↓ 4,621
v1.0.0
✓ Verified 💻 Development

Acestep Lyrics Transcription

Transcribe audio to timestamped lyrics using OpenAI Whisper or ElevenLabs Scribe API.

⚡ GPT-Optimized #ai_and-llms #api #script
)}
★ 3.8 (274)
↓ 17,648
v1.0.0
✓ Verified 💻 Development

Adaptive Suite

A continuously adaptive skill suite that empowers Clawdbot.

🧠 Claude-Ready #ai_and-llms #bot
)}
★ 4.7 (88)
↓ 1,625
v1.0.0