Manual de procesos: configurar Google Antigravity con Claude Code

Vision y roles: Antigravity + Claude Code

La clave es separar responsabilidades. Cada herramienta tiene un rol definido para que no haya improvisacion ni superposicion de tareas.

Antigravity

Vehiculo

Entorno VS Code, agentes autonomos, MCPs, Workflows, tareas macro y backend

Claude Code

Motor de precision

Frontend, UX/UI, refactors complejos, debugging fino, arquitectura al detalle

Resultado

Entrega consistente

Menos improvisacion, mas control, repetibilidad y calidad en cada iteracion

Regla de oro: si la tarea afecta infraestructura, datos o backend → delega a Antigravity. Si afecta experiencia del usuario, componentes visuales o logica fina → delega a Claude Code.

Ejemplo: como decidir quien ejecuta

# Antigravity (vehiculo) - Crear tabla en Supabase - Configurar CI/CD pipeline - Correr migraciones de base de datos - Automatizar deploy a produccion # Claude Code (motor de precision) - Disenar componente de dashboard - Refactorizar logica de autenticacion - Corregir bug visual en mobile - Optimizar rendimiento de un componente React

Paso 1. Instalacion y configuracion del entorno base

Meta: tener Antigravity funcionando, Claude Code instalado y una politica de revision que evite cambios no controlados en el codigo.

1.1 Descarga y pagos (Antigravity y Claude)

Descarga Antigravity desde la fuente oficial e instalalo.
Ve a Settings > Billing and Plans en Antigravity y confirma tu suscripcion activa.
Ve a Settings > Billing & Subscription en Claude y verifica tu plan. Actualiza el metodo de pago si aplica.
Si vas a usar Claude en local, descarga el Claude Local Runtime y revisa los requisitos del sistema.

Rutas de configuracion

# Antigravity Settings > Billing and Plans > Verify subscription # Claude Settings > Billing & Subscription > Update payment method # Claude Local (opcional) Download > Claude Local Runtime > System requirements check

Pantallazo (English UI): descarga de Antigravity.

Antigravity billing and plans (English UI)

Pantallazo (English UI): Antigravity — Billing and Plans.

Claude billing and subscription (English UI)

Pantallazo (English UI): Claude — Billing & Subscription.

Pantallazo (English UI): descarga de Claude Local Runtime.

1.2 Instalar Antigravity y habilitar Claude Code (extension)

Abre Antigravity como tu editor principal.
Crea o abre la carpeta del proyecto (File > Open Folder).
Ve a Extensions (Marketplace), busca Claude Code e instalalo.
Verifica que Claude Code aparezca disponible en el panel lateral y en la terminal integrada.

Pasos rapidos

1. Abrir Antigravity 2. File > Open Folder > seleccionar carpeta del proyecto 3. Extensions (Ctrl+Shift+X) > buscar "Claude Code" 4. Click en "Install" 5. Verificar icono de Claude Code en sidebar

Instalar extension Claude Code (English)

Pantallazo (English UI): instalacion de la extension Claude Code desde el Marketplace.

1.3 Configurar la Review Policy (politica de revision)

Ve a Settings > AI y ubica el modulo de autonomia.
Selecciona Request Review para proyectos complejos o cuando estes iniciando.
Usa Always Proceed solo si el alcance es pequeno, el repositorio esta bien testeado y tienes control de cambios.

Opciones de Review Policy

# Opcion recomendada para iniciar Request Review - Cada cambio requiere aprobacion manual - Ideal para proyectos nuevos o equipos en formacion - Maximo control, minimo riesgo # Opcion para flujos estables Always Proceed - El agente ejecuta sin pedir aprobacion - Solo usar si: repositorio testeado + CI/CD activo + equipo experimentado

Pantallazo (English UI): configuracion de autonomia y revision del agente.

Recomendacion: comienza siempre con Request Review. Sube la autonomia gradualmente cuando el flujo sea estable y tengas confianza en los resultados.

Paso 2. Definir reglas (Custom Rules)

Meta: eliminar la improvisacion. Las reglas delimitan decisiones tecnicas, estilo de codigo y restricciones del proyecto. Deben existir reglas globales (todos los proyectos) y reglas del workspace (proyecto actual).

2.1 Reglas globales (aplican a todos los proyectos)

Define tu stack preferido, convenciones de nombres, orden de carpetas y criterios de legibilidad.
Estas reglas se aplican transversalmente a cualquier proyecto que abras.
Guardalas en el archivo rules.global.md en la raiz de configuracion.

rules.global.md

# Reglas globales del desarrollador ## Stack base - Frontend: React + TypeScript + Tailwind CSS - Backend: Node.js + Express (o Supabase Edge Functions) - Base de datos: Supabase (PostgreSQL) - Deploy: Vercel (frontend) + Supabase (backend) ## Convenciones de codigo - Nombres de variables y funciones en camelCase - Nombres de componentes en PascalCase - Archivos de componentes: ComponentName.tsx - Archivos de utilidades: kebab-case.ts ## Estructura de carpetas src/ components/ # Componentes reutilizables pages/ # Paginas o vistas hooks/ # Custom hooks utils/ # Funciones auxiliares types/ # Tipos e interfaces TypeScript styles/ # Estilos globales ## Criterios de calidad - Codigo legible sobre codigo "inteligente" - Preferir composicion sobre herencia - Cada funcion debe hacer una sola cosa - Tests unitarios para logica critica

2.2 Reglas del workspace (especificas del proyecto actual)

Documenta restricciones y prioridades del proyecto en el que estas trabajando.
Guardalas en rules.workspace.md dentro de la raiz del proyecto.
Usalas como contrato: si algo no esta en reglas, se valida en planning antes de implementarlo.

rules.workspace.md

# Reglas del proyecto: [Nombre del proyecto] ## Prioridades - Performance: Lighthouse score minimo 90 en todas las categorias - Accesibilidad: cumplir WCAG 2.1 nivel AA - Mobile-first: disenar primero para movil, luego adaptar a desktop ## Restricciones tecnicas - Imagenes: compresion obligatoria (WebP, max 200KB) - Lazy loading en todas las imagenes bajo el fold - No usar librerias UI pesadas (Material UI, Ant Design) - Preferir CSS nativo o Tailwind sobre styled-components ## Funcionalidades clave - Layout drag and drop para tableros - Autenticacion con Supabase Auth (magic link + OAuth) - Notificaciones en tiempo real con Supabase Realtime ## Regla de oro Si no esta en este documento, se valida en planning antes de implementarlo.

Pantallazo (English UI): archivos de reglas globales y del workspace en el explorador de archivos.

Tip: revisa y actualiza las reglas al inicio de cada sprint o iteracion. Las reglas desactualizadas generan mas problemas que no tener reglas.

Paso 3. Dotar a la IA de funcionalidades (MCPs)

Los MCP Servers (Model Context Protocol) son integraciones que conectan al agente IA con herramientas externas y servicios. El criterio: instala solo los MCPs que realmente vas a usar en tu flujo de trabajo.

3.1 Abrir el administrador de MCP Servers

Ve a Settings > MCP Servers o busca Manage MCP Servers en el Command Palette.
Agrega el servidor que necesitas y valida su estado: Connected o Not connected.
Define permisos: que puede leer, que puede escribir y en que entornos opera.

Configuracion de MCP (ejemplo JSON)

{ "mcpServers": { "supabase": { "command": "npx", "args": ["-y", "@supabase/mcp-server"], "env": { "SUPABASE_URL": "https://tu-proyecto.supabase.co", "SUPABASE_SERVICE_ROLE_KEY": "tu-service-role-key" } }, "filesystem": { "command": "npx", "args": ["-y", "@anthropic/mcp-filesystem"], "env": { "ALLOWED_PATHS": "/ruta/a/tu/proyecto" } } } }

Pantallazo (English UI): listado de MCP Servers y su estado de conexion.

3.2 MCPs recomendados por tipo de proyecto

Supabase MCP: autenticacion, base de datos, storage, funciones edge y realtime.
n8n MCP: automatizaciones, conectores de terceros y workflows de negocio.
Filesystem MCP: lectura y escritura de archivos del proyecto.
Testing tools: pruebas automatizadas, checks de regresion y depuracion asistida.

MCPs segun tipo de proyecto

# Proyecto SaaS (web app) - Supabase MCP > Base de datos + Auth + Storage - Filesystem MCP > Lectura/escritura de archivos - Vercel MCP > Deploy y preview deployments # Proyecto con automatizaciones - n8n MCP > Workflows de integracion - Supabase MCP > Datos y webhooks - Slack MCP > Notificaciones al equipo # Proyecto con testing intensivo - Filesystem MCP > Acceso a archivos de test - Testing MCP > Ejecucion de tests automatizados - Git MCP > Control de versiones automatico

Regla de seguridad: cuando un MCP tenga capacidad de escritura en produccion, manten Request Review activado. Nunca des acceso de escritura sin supervision.

Paso 4. Dotar a la IA de conocimiento (Agent Skills)

Las Skills son modulos reutilizables de conocimiento especializado. A diferencia de los MCPs (que son herramientas), las Skills son especializacion: ensena al agente sobre diseno, arquitectura, tono de contenido, guias de marca, etc.

4.1 Instalar Skills publicas desde GitHub

Ve a Skills > Install from GitHub.
Pega la URL del repositorio de la skill que quieres instalar.
Instalala en el workspace actual para que aplique solo en este proyecto.

Ejemplo: instalar una skill

# Paso a paso 1. Abrir panel de Skills en Antigravity 2. Click en "Install from GitHub" 3. Pegar URL del repositorio: https://github.com/usuario/mi-skill-de-diseno 4. Seleccionar scope: "This workspace only" 5. Click en "Install" 6. Verificar que aparezca en la lista de Skills activas

Pantallazo (English UI): instalacion de una skill desde un repositorio de GitHub.

4.2 Crear una Skill propia desde un PDF

Sube tu PDF (manual de marca, guia tecnica, design system) dentro del workspace o en el modulo de Skills.
Indica el nombre de la skill y el alcance: UI, tipografia, colores, componentes, tono de voz.
Genera la skill y usala como estandar para todos los cambios futuros del proyecto.

Ejemplo: crear skill desde brand guidelines

# Configuracion de la skill Nombre: Brand Guidelines - Mi Empresa Fuente: brand-guidelines-2024.pdf Alcance: - Paleta de colores (primarios, secundarios, neutros) - Tipografia (familias, pesos, tamanos) - Espaciado y layout (margenes, padding, grid) - Tono de voz (formal, amigable, tecnico) - Componentes UI (botones, cards, formularios) Aplicacion: workspace actual

Pantallazo (English UI): creacion de una skill personalizada desde un PDF.

Tip: combina varias skills. Por ejemplo: una skill de marca + una skill de arquitectura + una skill de accesibilidad. El agente aplicara todas simultaneamente.

Paso 5. Flujo de trabajo de desarrollo (ejecucion)

Meta: nunca programar a ciegas. Se fuerza una etapa de planning antes de escribir codigo, luego ejecucion por especialidad (Antigravity o Claude Code), y finalmente coordinacion multiagente si aplica.

5.1 Planificacion interactiva con Planning Mode

Activa Planning Mode y solicita que genere un documento plan.md.
El plan debe incluir: alcance, arquitectura, lista de tareas, esquema de base de datos, criterios de validacion y riesgos.
Regla: no se escribe una sola linea de codigo hasta tener el plan aprobado.

plan.md (plantilla copiable)

# Plan de desarrollo: [Nombre de la funcionalidad] ## 1. Alcance - Que se va a construir (y que NO se va a construir) - Criterios de aceptacion claros y medibles ## 2. Arquitectura - Componentes involucrados (frontend, backend, DB) - Diagrama de flujo o secuencia (si aplica) - Dependencias externas (APIs, servicios) ## 3. Tareas (ordenadas por prioridad) - [ ] Tarea 1: descripcion clara - [ ] Tarea 2: descripcion clara - [ ] Tarea 3: descripcion clara ## 4. Base de datos - Tablas nuevas o modificadas - Relaciones y constraints - Migraciones necesarias ## 5. Validacion - Tests unitarios requeridos - Tests de integracion requeridos - Criterios de Lighthouse (performance, accesibilidad) ## 6. Riesgos - Riesgo 1: descripcion + mitigacion - Riesgo 2: descripcion + mitigacion ## 7. Asignacion - Antigravity: tareas de infra/backend - Claude Code: tareas de frontend/UX

Pantallazo (English UI): ejemplo de plan.md generado en Planning Mode.

5.2 Trabajo pesado y backend con Antigravity

Usa Antigravity para: infraestructura, migraciones de DB, CI/CD, automatizaciones y tareas macro.
Delega tareas repetibles a Workflows y MCPs.
Manten revisiones activas cuando el cambio impacte datos o despliegues en produccion.

Tareas tipicas de Antigravity

# Infraestructura - Configurar variables de entorno (.env) - Crear tablas y relaciones en Supabase - Configurar Row Level Security (RLS) # CI/CD - Configurar deploy automatico (Vercel / Netlify) - Crear pipeline de testing en GitHub Actions - Configurar preview deployments por PR # Automatizaciones - Workflow de optimizacion de imagenes - Backup automatico de base de datos - Notificaciones de errores a Slack

Trabajo pesado y backend con Antigravity

Pantallazo (English UI): trabajo pesado y backend delegado a Antigravity.

5.3 Frontend y logica compleja con Claude Code

Usa Claude Code para: UI, componentes, UX, refactors, logica de estado y debugging fino.
Define el modelo a usar: Opus para tareas complejas, Sonnet para tareas rapidas.
Valida siempre con pruebas y criterios visuales antes de merge.

Tareas tipicas de Claude Code

# Componentes y UI - Crear componente de dashboard con graficas - Implementar layout responsive mobile-first - Disenar formulario con validacion en tiempo real # Logica compleja - Refactorizar sistema de permisos (RBAC) - Implementar estado global con Zustand/Context - Resolver bug de race condition en datos # Optimizacion - Mejorar Lighthouse score (LCP, CLS, FID) - Reducir bundle size con code splitting - Implementar virtual scrolling para listas grandes # Modelo recomendado Opus > Refactors grandes, arquitectura, debugging complejo Sonnet > Componentes simples, correcciones rapidas, ajustes de estilo

Frontend y logica compleja con Claude Code

Pantallazo (English UI): frontend y logica compleja delegados a Claude Code.

5.4 Orquestacion multiagente (Agent Manager y Agent Teams)

Si el proyecto es complejo, divide el trabajo por dominios: frontend, backend, investigacion y QA.
En Antigravity usa Agent Manager para lanzar varios agentes en paralelo por carpetas.
En Claude Code usa Agent Teams para formar especialistas y coordinar tareas interdependientes.

Ejemplo: distribucion de agentes

# Configuracion de Agent Teams Agente 1: Frontend Lead - Scope: /src/components, /src/pages, /src/styles - Responsabilidad: UI, componentes, responsive, accesibilidad - Modelo: Claude Opus Agente 2: Backend Lead - Scope: /supabase, /api, /scripts - Responsabilidad: DB, migraciones, funciones edge, RLS - Modelo: Claude Sonnet Agente 3: QA Lead - Scope: /tests, /e2e, /cypress - Responsabilidad: tests unitarios, integracion, regresion - Modelo: Claude Sonnet Agente 4: Investigacion - Scope: todo el repositorio (solo lectura) - Responsabilidad: analisis de dependencias, vulnerabilidades, mejoras - Modelo: Claude Opus

Pantallazo (English UI): agentes paralelos organizados por carpetas y responsabilidades.

Cuando usar multiagente: cuando el proyecto tiene mas de 3 dominios independientes o cuando necesitas que frontend y backend avancen en paralelo sin bloqueos.

Paso 6. Automatizacion de correcciones (Workflows)

Los Workflows son macros persistentes. Convierten una mejora recurrente en un comando reutilizable que ejecuta el mismo procedimiento con consistencia cada vez.

6.1 Crear un workflow para problemas repetidos

Identifica un patron recurrente (imagenes pesadas, errores de lint, tests rotos, performance baja).
Define pasos exactos y verificables. Evita instrucciones ambiguas como "mejorar performance".
Guarda el workflow con un nombre corto estilo comando: /optimize_images, /fix_lint, /run_tests.

Pantallazo (English UI): ejemplo de workflow guardado como comando.

6.2 Plantillas de workflows (copiables)

Usa estas plantillas como punto de partida para tus propios workflows.
Cada workflow debe terminar con evidencia (logs, metricas, capturas, reporte).
Sin evidencia no hay confianza.

/optimize_images

/optimize_images 1. Escanear repositorio buscando imagenes mayores a 200KB 2. Convertir a formato WebP con compresion al 80% 3. Agregar lazy loading a todas las imagenes bajo el fold 4. Ejecutar Lighthouse y capturar score de performance 5. Crear PR con evidencia: tamano antes vs despues + score

/fix_lint

/fix_lint 1. Ejecutar ESLint en todo el proyecto: npx eslint . --fix 2. Ejecutar Prettier: npx prettier --write . 3. Revisar archivos modificados con git diff 4. Si hay cambios, crear commit: "fix: auto-fix lint and formatting" 5. Validar que no haya errores restantes: npx eslint .

/run_full_check

/run_full_check 1. Ejecutar tests unitarios: npm run test 2. Ejecutar tests e2e: npm run test:e2e 3. Ejecutar build de produccion: npm run build 4. Ejecutar Lighthouse en URL de preview 5. Generar reporte con: tests pasados/fallidos + build status + scores 6. Si todo pasa: aprobar merge. Si falla: listar errores y sugerir fix.

/setup_new_feature

/setup_new_feature [nombre] 1. Crear branch: git checkout -b feature/[nombre] 2. Generar plan.md con Planning Mode 3. Crear estructura de carpetas si aplica 4. Agregar tests placeholder para la nueva funcionalidad 5. Crear PR draft con descripcion del plan 6. Asignar agentes por dominio (si aplica multiagente)

Buena practica: cada workflow debe terminar con evidencia (logs, metricas, capturas, reporte), no solo con cambios de codigo. Sin evidencia no hay confianza.

Checklist final de configuracion

Usa esta lista como validacion rapida antes de arrancar el desarrollo de cualquier proyecto.

Checklist de verificacion

Antigravity instalado y workspace abierto correctamente.
Claude Code instalado, habilitado y accesible desde panel lateral o terminal.
Review Policy configurada en Request Review (o justificado si esta en Always Proceed).
Archivo rules.global.md creado con convenciones del desarrollador.
Archivo rules.workspace.md creado con restricciones del proyecto.
MCP Servers instalados solo si aportan al flujo, con permisos controlados.
Skills instaladas o creadas (marca, arquitectura, UX, accesibilidad).
Planning Mode ejecutado y plan.md aprobado antes de escribir codigo.
Si hay complejidad alta: agentes paralelos definidos por dominio.
Workflows creados para rutinas repetidas (performance, lint, tests, imagenes).

Checklist rapido (copiable)

# Checklist de configuracion - Antigravity + Claude Code - [ ] Antigravity instalado + workspace abierto - [ ] Claude Code extension instalada y activa - [ ] Review Policy: Request Review (por defecto) - [ ] rules.global.md creado - [ ] rules.workspace.md creado - [ ] MCPs configurados (solo los necesarios) - [ ] Skills instaladas (marca, arquitectura, UX) - [ ] plan.md generado y aprobado - [ ] Agentes multiagente configurados (si aplica) - [ ] Workflows creados para rutinas repetidas - [ ] Primer commit del proyecto realizado - [ ] PR draft creado con plan inicial