SPONSORED by NoCODEoPENsOURCE

🚀 ¿Quieres que tu negocio aparezca aquí?
Da a conocer tus servicios ante una comunidad de profesionales del mundo digital, startups y desarrolladores.

👉 Anúnciate por solo 120 € y gana visibilidad real

Hola,

Arrancamos con un dolor que todo dev con agentes IA conoce: el código que compila, renderiza, y parece funcionar... hasta que haces clic en "Save" y explota. Error 500. Datos que nunca se guardaron. Validaciones que no validan. UI que muestra éxito cuando falló.

No puedes revisar manualmente cada línea que el agente genera. Toma 8-12 horas por feature. Y aún así, bugs llegan a producción.

La solución no son más prompts. Es Test-Driven Development invertido: el agente genera tests E2E primero (con agent-browser de Vercel Labs), luego escribe código hasta que pasen. Simula usuarios reales, valida base de datos, captura errores de consola, toma screenshots. Automáticamente.

Hoy te muestro la implementación completa con la historia de Marco: cómo pasó de 6 horas de revisión a 15 minutos, cómo su agente encuentra 89 bugs por mes antes de entregarle nada, y cómo lo implementó en 30 minutos con €0 de costo.

Incluye código ejecutable, skill e2e-test completa, troubleshooting, CI/CD, y números reales: 96% menos bugs, 95% menos tiempo, 100% features aceptadas.

Si quieres que tu agente valide su propio código antes de entregártelo — abajo tienes el sistema completo.

Vamos 👇

📅 G33K TEAM de la Semana

Vibe Coding vs. Agentic Engineering: ¿Dónde está el límite y cómo afecta al valor del producto?

Vibe Coding vs. Agentic Engineering

La discusión principal se centró en la delgada línea que separa el "Vibe Coding" del "Agentic Engineering". Mientras que el primero se enfoca en el resultado final a través de un prompt directo, el segundo implica un enfoque más estructurado y guiado por la arquitectura y la ingeniería de software.

• Vibe Coding: Se centra en el "qué" se quiere obtener. El usuario da una orden general (ej: "créame una web de e-commerce") y va refinando sobre la marcha. El conocimiento técnico no es un prerrequisito, dejando el "cómo" a merced de la IA.
• Agentic Engineering: Se enfoca en el "cómo". El desarrollador guía activamente a la IA, definiendo la infraestructura, las tecnologías, los frameworks y las buenas prácticas a utilizar. Esto resulta en un código más robusto, mantenible y escalable.
• El rol del Senior: En el Agentic Engineering, la experiencia de un desarrollador senior es crucial para vigilar que la IA no se desvíe de las directrices técnicas, forzándola a usar las librerías y arquitecturas correctas para el proyecto.

La Tiranía de Vercel y la Alternativa Vinext

Néstor introdujo un debate sobre el ecosistema de Next.js y su fuerte vinculación con la plataforma Vercel, lo que puede generar un "vendor lock-in" a pesar de ser un framework open-source.

• El problema: Next.js contiene primitivas en su código fuente diseñadas específicamente para funcionar de manera óptima en la infraestructura de Vercel, dificultando su despliegue eficiente en otras plataformas como AWS o Cloudflare.
• Soluciones pasadas: Proyectos como OpenNext han intentado solucionar esto mediante "hacks" que reemplazan código en tiempo de compilación, pero resultan frágiles y difíciles de mantener.
• La nueva propuesta: Vinext: Es un nuevo adaptador creado por un ex-ingeniero de infraestructura de Vercel. Permite compilar y desplegar Next.js utilizando Vite en lugar de Webpack o Turbopack. Esto facilita su portabilidad a cualquier plataforma.
• La advertencia: A pesar de ser una solución prometedora, Néstor argumenta que sigue siendo un "parche". Vercel, como dueño del framework, podría introducir cambios en futuras versiones que rompan la compatibilidad, manteniendo la dependencia. La solución definitiva para quienes buscan independencia total sería migrar a otros frameworks como TanStack o Astro.

Output vs. Outcome: El Valor Real del Software

La conversación derivó hacia una reflexión sobre la estrategia de producto en la era de la IA. Se contrapuso la idea de generar un gran volumen de funcionalidades (output) frente a la de entregar valor real y útil para el usuario (outcome).

• La visión del "Output": Algunas empresas, impulsadas por la IA, se centran en lanzar la mayor cantidad de producto posible para ganar cuota de mercado, incluso si esto implica una menor estabilidad o calidad.
• La visión del "Outcome": Oriol defendió que el objetivo no debe ser acumular funcionalidades, sino mejorar las que ya aportan valor a los usuarios. La IA debería usarse para iterar más rápido y validar hipótesis (ej: con A/B testing), no para "ensuciar" el producto con características que nadie necesita.
• La IA como "exponenciador": Se concluyó que la IA actúa como un multiplicador de la base de conocimiento y experiencia de cada profesional. La calidad del resultado final sigue dependiendo fundamentalmente de la pericia de la persona que guía a la herramienta.

Hardware para la IA y el Ecosistema JavaScript

El equipo exploró las últimas novedades en hardware específico para IA y el estado de los gestores de paquetes en el mundo JavaScript.

• Hardware dedicado: Se comentó un proyecto que integra un modelo LLM (como Llama) directamente en una placa de hardware (posiblemente un FPGA), alcanzando velocidades de procesamiento de tokens muy elevadas al ejecutarse directamente sobre el chip.
• Gestores de paquetes: Se repasaron las diferencias y compatibilidades entre los principales gestores de JavaScript: npm (el estándar), Yarn, pnpm (conocido por su velocidad) y Bun (un runtime que también incluye su propio gestor). Se destacó que, aunque pnpm es más rápido, puede presentar incompatibilidades si el proyecto fue concebido para npm.

🔗 Enlaces y Referencias mencionadas

• Vinext: Adaptador para compilar y desplegar Next.js con Vite.
• OpenNext: Proyecto para desplegar aplicaciones Next.js en entornos serverless.
• TanStack: Ecosistema de herramientas para construir aplicaciones web, presentado como alternativa a Next.js.
• Astro: Framework web para construir sitios rápidos y optimizados para SEO.
• Bun: Runtime de JavaScript rápido y todo en uno.
• Unix History Timeline: Visualización de la historia y ramificaciones de los sistemas operativos basados en Unix.

🎙️ Ver episodio completo en YouTube

Nos vemos la próxima semana.

ℍ𝕠𝕣𝕚𝕫𝕠𝕟𝕥𝕖 𝔸𝕣𝕥𝕚𝕗𝕚𝕔𝕚𝕒𝕝

Te presentamos "Horizonte Artificial", la nueva y flamante sección de nuestra newsletter dedicada exclusivamente a la Inteligencia Artificial. Pero no esperes el contenido convencional que inunda TikTok o YouTube. Aquí, nos sumergiremos en el fascinante mundo del OpenSource, explorando proyectos libres que puedes desplegar en tu propio servidor. Y para guiarnos en esta travesía, contamos con la experticia de Jesús Pacheco, mejor conocido en nuestra comunidad HiveAgile como "Pachecodes". Prepárate para una perspectiva fresca y auténtica sobre la IA. ¡Bienvenidos al horizonte!

🌟 TopGit - Resumen Semanal (2026-02-28)

📚 Repositorios Destacados de la Semana

Los siguientes repositorios han sido seleccionados por su relevancia, calidad y métricas de GitHub:

🔧 🚀 Vinext: Plugin de Vite para Reimplementación de Next.js

Vinext es un plugin de Vite que reimplementa la superficie de la API de Next.js, permitiendo que las aplicaciones de Next.js se ejecuten en una herramienta completamente diferente. Este proyecto es experimental y está en desarrollo activo, lo que significa que puede haber errores y características en desarrollo. Utiliza AI para ayudar en el desarrollo, convirtiéndose en una plataforma versátil para despliegues en Cloudflare Workers.

📊 Estadísticas de GitHub: - ⭐ 4,622 estrellas - 🔄 134 forks - 👀 13 observadores - 📝 64 issues abiertos - 🔤 Principal lenguaje: TypeScript

🔧 💻 Polymarket CLI

Polymarket CLI es una herramienta de línea de comandos escrita en Rust para interactuar con los mercados de Polymarket. Permite a los usuarios explorar mercados, realizar órdenes, gestionar posiciones e interactuar con contratos en on-chain desde la terminal o a través de una API JSON para scripts y agentes. Su propósito es simplificar las operaciones en los mercados de predicción.

📊 Estadísticas de GitHub: - ⭐ 1,311 estrellas - 🔄 117 forks - 👀 7 observadores - 📝 19 issues abiertos - 🔤 Principal lenguaje: Rust

🔧 🧠 OpenFang - Sistema Operativo de Agentes

OpenFang es un sistema operativo de agentes de código abierto construido en Rust. Su enfoque es crear agentes autónomos que operen por ti, gestionando tareas como la investigación de competidores, generación de contenido y más. Con 7 manos autónomas, permite ejecutar tareas 24/7 sin interacción manual.

Su diseño incluye 16 capas de seguridad para proteger la integridad de las operaciones. OpenFang unifica herramientas y proporciona un entorno de fácil instalación que compila en un solo binario de ~32MB. Ideal para empresas que quieren automatizar procesos de negocio.

📊 Estadísticas de GitHub: - ⭐ 4,853 estrellas - 🔄 515 forks - 👀 43 observadores - 📝 56 issues abiertos - 🔤 Principal lenguaje: Rust

🔧 🌟 Aplicaciones LLM Asombrosas

Una colección curada de aplicaciones LLM asombrosas construidas con RAG, agentes de IA, equipos de múltiples agentes y más. Este repositorio presenta aplicaciones LLM que utilizan modelos de OpenAI, Anthropic, Google y modelos de código abierto que puedes ejecutar localmente en tu computadora. Descubre formas prácticas y creativas de aplicar LLMs en diferentes dominios, desde repositorios de código hasta bandejas de entrada de correo electrónico.

📊 Estadísticas de GitHub: - ⭐ 98,055 estrellas - 🔄 14,273 forks - 👀 1,075 observadores - 📝 5 issues abiertos - 🔤 Principal lenguaje: Python

🔧 🧠 Antigravity Awesome Skills

Antigravity Awesome Skills es una colección de más de 954 habilidades agénticas diseñadas para asistentes de codificación como Claude Code, Gemini CLI, Codex CLI, y más. Este repositorio ofrece habilidades ya probadas y optimizadas para mejorar la eficiencia y la capacidad de los asistentes de IA, transformándolos en agentes digitales de alto rendimiento. Incluye habilidades oficiales de Anthropic, OpenAI, Google, Microsoft y Vercel.

📊 Estadísticas de GitHub: - ⭐ 16,986 estrellas - 🔄 3,088 forks - 👀 175 observadores - 📝 2 issues abiertos - 🔤 Principal lenguaje: Python

🔧 🧠 ClawRouter: Router Nativo de LLM

El ClawRouter es un potente enrutador nativo de LLM que optimiza las solicitudes de modelos de lenguaje mediante una estrategia de enrutamiento eficiente. Permite el acceso a más de 38 modelos con cero llaves API y un tiempo de respuesta inferior a un milisegundo.

Con una puntuación en 15 dimensiones, ClawRouter garantiza el mejor modelo al mejor precio, lo que resulta en un ahorro significativo en costos de uso de IA.

📊 Estadísticas de GitHub: - ⭐ 3,704 estrellas - 🔄 360 forks - 👀 87 observadores - 📝 18 issues abiertos - 🔤 Principal lenguaje: TypeScript

🔧 💬 MultiTalk

MultiTalk es una herramienta innovadora que permite la generación de videos conversacionales a partir de audio. Esta plataforma apoya la creación de interacciones de múltiples personas, canto e control de personajes virtuales. Con su tecnología, puedes producir videos dinámicos que siguen un guion específico, generando movimientos de labios precisos y realistas que se sincronizan con el audio. Ideal para desarrolladores y creadores de contenido visual. Con funciones flexibles y capacidad de generar videos de hasta 15 segundos, se adapta a diversas necesidades creativas.

📊 Estadísticas de GitHub: - ⭐ 2,813 estrellas - 🔄 477 forks - 👀 64 observadores - 📝 153 issues abiertos - 🔤 Principal lenguaje: Python

🔧 💻 Zerobyte - Automatización de Copias de Seguridad

Zerobyte es una herramienta de automatización de copias de seguridad diseñada para autohospedados. Esta construida sobre la base de Restic, ofreciendo una interfaz web moderna para programar, gestionar y monitorizar copias de seguridad cifradas de tu almacenamiento remoto. Sus características incluyen copias de seguridad automatizadas, un sistema de encriptación de extremo a extremo, y soporte para múltiples protocolos.

📊 Estadísticas de GitHub: - ⭐ 5,758 estrellas - 🔄 143 forks - 👀 15 observadores - 📝 91 issues abiertos - 🔤 Principal lenguaje: TypeScript

🔧 🧠 TRELLIS.2: Modelo Generativo 3D

TRELLIS.2 es un modelo generativo 3D de vanguardia (4B parámetros) diseñado para la generación de imágenes a 3D de alta fidelidad. Utiliza una novedosa estructura de voxel escaso llamada O-Voxel para reconstruir y generar activos 3D arbitrarios con topologías complejas y materiales PBR completos.

Su modelo de 4B parámetros genera activos completamente texturizados de alta resolución con excepcional fidelidad y eficiencia, permitiendo el manejo robusto de estructuras complejas y un modelado de texturas ricas que permite un rendering fotorealista.

📊 Estadísticas de GitHub: - ⭐ 4,136 estrellas - 🔄 433 forks - 👀 38 observadores - 📝 100 issues abiertos - 🔤 Principal lenguaje: Python

🔧 🤖 ClawWork: Tu Compañero de IA

ClawWork es una plataforma innovadora que transforma asistentes de IA en verdaderos compañeros de trabajo, capaces de realizar tareas reales y generar valor económico genuino. Con un enfoque en la validez económica y el rendimiento sostenible, ClawWork permite que los agentes de IA ganen dinero realizando tareas profesionales en varios sectores, desde la tecnología hasta los servicios sociales. Cada agente debe manejar su presupuesto de $10 y tomar decisiones estratégicas sobre trabajo y aprendizaje, buscando optimizar su desempeño en un entorno competitivo.

📊 Estadísticas de GitHub: - ⭐ 5,880 estrellas - 🔄 711 forks - 👀 71 observadores - 📝 24 issues abiertos - 🔤 Principal lenguaje: Python

📊 Análisis de Distribución por Categorías

La siguiente gráfica muestra la distribución de proyectos por categoría en TopGit:

📈 Estadísticas Semanales

🏆 Top 3 Categorías

📊 Distribución Detallada

🤖 IA & Machine Learning ██████████    50%  (10 repos)
🔧 Dev                ████████      40%  (8 repos)
🌐 Web Development    █              5%  (1 repos)
⚡ Productivity       █              5%  (1 repos)

🚀 Tendencias Destacadas

📈 Métricas Clave

• Repositorios Totales: 20
• Promedio Diario: 2.9 repos/día
• Categorías Activas: 4

🎯 Categorías Dominantes

1. IA & Machine Learning
2. 10 repositorios
3. 50.0% del total
4. Dev
5. 8 repositorios
6. 40.0% del total
7. Web Development
8. 1 repositorios
9. 5.0% del total

💡 Análisis de Tendencias

Las tendencias actuales en GitHub reportadas en esta semana muestran un enfoque en los sistemas de automación, herramientas de desarrollo basadas en IA y soluciones de gestión de datos. Esto refleja la ubicuidad cada vez mayor de las tecnologías de IA y machine learning, así como un enfoque en la eficiencia y la automatización en el ciclo de vida del desarrollo de software.

1. Vinext, el proyecto principal, muestra una tendencia hacia la integración y la compatibilidad en el desarrollo web. Este proyecto es interesante porque permite que las aplicaciones de Next.js se ejecuten en Vite, una herramienta diferente, lo que mejora en gran medida la flexibilidad y las opciones de los desarrolladores.
2. Las herramientas de línea de comando como Polymarket CLI reflejan la creciente demanda de interacciones personalizables y envolventes con diversas plataformas. En este caso, Polymarket CLI permite a los usuarios interactuar con los mercados de predicción de formas nuevas y eficientes.
3. OpenFang es otro ejemplo de la creciente popularidad de la automatización y la IA. Este sistema operativo de agentes tiene el potencial de transformar muchas industrias al automatizar tareas como la investigación de la competencia y la generación de contenido.
4. La curación de recursos, como se ve en las Aplicaciones LLM Asombrosas y Antigravity Awesome Skills, muestra el valor de la comunidad en el espacio de desarrollo de software. Al compartir y catalogar las mejores aplicaciones y habilidades, estos proyectos facilitan a los desarrolladores el descubrimiento de nuevas herramientas y enfoques.
5. Los enrutadores como ClawRouter reflejan la importancia creciente del rendimiento y la eficiencia en el desarrollo web. Al optimizar las solicitudes de modelos de lenguaje, ClawRouter permite un acceso más rápido y eficiente a un gran conjunto de modelos.
6. MultiTalk y Zerobyte muestran tendencias en la generación de contenido y la gestión de datos, respectivamente. MultiTalk facilita la creación de videos conversacionales, mientras que Zerobyte ofrece una forma eficiente de gestionar las copias de seguridad.
7. Los modelos generativos avanzados como TRELLIS.2 evidencian el salto de la IA hacia activos 3D de alta fidelidad, abriendo nuevas posibilidades en videojuegos, simulacion y produccion audiovisual.

💡 Análisis de Contexto

Lo admito: la mayoría de los agentes IA que vemos por ahí son un desastre de herramientas amontonadas, como un cajón desordenado donde nadie sabe qué hay ni cómo usarlo. Embutir mil funciones y esperar que el agente las active a tiempo es pedir que la conversación explote por estrés. Pero Anthropic dio en el clavo con sus “skills”: una capa progresiva que activa solo lo necesario justo cuando se necesita. Nada más inteligente, nada más eficiente.

Por otro lado, todo ese rollo de RAG (Retrieval-Augmented Generation) ya no es el santo grial para agentes de código, aunque sigue siendo oro para negocios con toneladas de documentos empresariales. ¿RAG muerto? No tan rápido. Solo que los problemas son diferentes y exigirán distintas estrategias. Y en medio de todo esto, surge un comando open source que hace que los agentes se cachen sus propios errores de código antes de que lleguen a producción. Sí, leíste bien: el agente que prueba y se corrige solo. ¿Listo para actualizar tu kit de herramientas con estas joyas? Vamos al grano.

📡 Radar de Expertos

Andrej Karpathy dice que “los agentes de IA necesitan un toolkit open source robusto para romper la rigidez de los sistemas cerrados”, y tiene razón porque nadie quiere pelearse con APIs propietarias mientras el deploy cruje en prod.

Abeba Birhane advierte que “más código abierto no significa menos sesgos, sino más ojos para encontrarlos”, justo lo que hace falta, porque el hype de “open source = objetividad” es el cuento de hadas que todos queremos creer.

Rachel Thomas sostiene que “el éxito en IA no es solo por modelos, sino por herramientas que aceleran iteraciones e integran datos”, y quién puede discutir eso cuando tu pipeline se cae a pedazos justo antes del demo.

Viernes, 18:34. Marco había pasado 6 horas revisando código generado por Leo.

Una feature "simple": editor de perfil con preview en vivo.

Leo había escrito: - 847 líneas de componentes React - 6 API routes - Schema de base de datos - Autenticación con OAuth

Todo "funcionaba".

Marco hizo clic en "Save Profile".

Error 500.

Abrió DevTools Console:

TypeError: Cannot read properties of undefined (reading 'avatarUrl')
ProfileForm.tsx:42

Uncaught (in promise) Error: UNIQUE constraint failed: profiles.slug
api/profile/route.ts:67

Marco probó el drag-and-drop de links.

Los items desaparecieron.

Revisó la base de datos:

SELECT * FROM link_items WHERE user_id = 'user_123';
-- Returns: 0 rows

Los links nunca se guardaron.

El preview mostraba datos. El form aceptaba input. Pero nada se persistía.

La Realización

Marco se dio cuenta de algo terrible:

Leo escribía código que PARECÍA funcionar.

• Los componentes renderizaban ✅
• Los botones eran clickeables ✅
• Las peticiones HTTP salían ✅
• El código compilaba sin warnings ✅

Pero: - La validación fallaba ❌ - Los datos no se guardaban ❌ - Los errores eran silenciosos ❌ - La UI mentía sobre el estado real ❌

El Problema Real

[Leo genera código]
  ↓
[Marco revisa visualmente]
  ↓
[Parece funcionar]
  ↓
[Marco aprueba]
  ↓
[Usuarios lo usan]
  ↓
[TODO SE ROMPE]

Marco necesitaba que Leo se testeara a sí mismo ANTES de entregar.

No pruebas unitarias de funciones aisladas.

Pruebas E2E que simulan usuarios reales.

El Descubrimiento: Test-Driven Development Invertido

Marco investigó durante el fin de semana.

Encontró algo que le cambió la perspectiva: TDD (Test-Driven Development).

Pero no el TDD tradicional de "escribe tests, luego código".

Sino TDD para agentes IA:

TDD Tradicional (Humanos)

1. Escribes el test (que falla)
2. Escribes código mínimo para pasarlo
3. Refactorizas
4. Repites

TDD para Agentes (Lo Que Marco Necesitaba)

1. El agente lee los requisitos
2. El agente GENERA los tests E2E primero
3. El agente ejecuta los tests (fallan)
4. El agente escribe código hasta que pasen
5. El agente valida AUTOMÁTICAMENTE

La diferencia crítica:

El agente no solo escribe código.

El agente valida que el código funciona en un navegador real.

Simula clicks, rellena formularios, verifica base de datos.

Como lo haría un QA humano.

Pero automático. Y antes de entregar.

La Herramienta: agent-browser

Marco encontró agent-browser de Vercel Labs.

Un CLI para automatizar navegadores con comandos atómicos:

# Navegación
agent-browser open https://localhost:3000

# Captura elementos interactivos
agent-browser snapshot -i

# Output:
# @e1: button "Sign Up"
# @e2: input[type="email"]
# @e3: input[type="password"]

# Interacción
agent-browser fill @e2 "test@example.com"
agent-browser fill @e3 "password123"
agent-browser click @e1

# Verificación
agent-browser screenshot signup-success.png
agent-browser console  # Ver errores JS
agent-browser get url  # Verificar redirección

Cada comando deja rastro verificable.

No es "el navegador hizo algo".

Es "el navegador hizo X, tomó screenshot, verificó que Y cambió".

Por Qué Es Perfecto para Agentes

1. Comandos atómicos

# MAL (Playwright tradicional):
# Requiere código Python/JS, contexto async, manejo de errores

# BIEN (agent-browser):
agent-browser click @e1
agent-browser fill @e2 "text"

Un agente puede componer estos comandos en bash scripts.

2. Referencias observables

agent-browser snapshot -i
# @e1: button "Save Profile"
# @e2: input#name
# @e3: input#bio

agent-browser click @e1
# El agente SABE qué clickeó

No hay "encuentra el botón que tal vez existe".

Hay referencias exactas: @e1, @e2.

3. Verificación en cada paso

agent-browser fill @e2 "Marco"
agent-browser screenshot filled-name.png
agent-browser click @e1  # Save
agent-browser wait --load networkidle
agent-browser console  # ¿Errores?
agent-browser errors   # ¿Excepciones no capturadas?

Cada acción → captura → verificación.

La Implementación

Marco creó una skill para Leo: e2e-test.

Fase 1: Investigación Paralela

Antes de escribir código, Leo lanza 3 sub-agentes en paralelo:

Sub-agente 1: Estructura de la App

Investiga: - Cómo arrancar la app (comandos, puerto) - Autenticación (cómo crear usuario de prueba) - Todas las rutas y páginas - Todos los user journeys completos - Componentes interactivos (forms, modals, dropdowns)

Sub-agente 2: Base de Datos

Investiga: - Tipo de DB y variables de entorno - Schema completo (tablas, columnas, relaciones) - Flujos de datos por acción del usuario - Queries de validación para cada acción

Sub-agente 3: Bug Hunting

Busca: - Errores lógicos (off-by-one, null checks faltantes) - Problemas UI/UX (sin loading states, sin manejo de errores) - Riesgos de integridad de datos - Problemas de seguridad

Los 3 corren simultáneamente.

Todos completan antes de que Leo escriba una línea de código.

Fase 2: Genera Tests E2E Primero

Con la info de los sub-agentes, Leo crea un test script:

#!/bin/bash
# tests/e2e/profile-editor.sh

set -e  # Fail on any error

echo "🧪 Testing Profile Editor Flow"

# 1. Arrancar app
npm run dev &
APP_PID=$!
sleep 5

# 2. Abrir navegador
agent-browser open http://localhost:3000

# 3. Signup
agent-browser snapshot -i
agent-browser fill @e_email "test@example.com"
agent-browser fill @e_password "Password123!"
agent-browser fill @e_username "marco"
agent-browser click @e_signup_btn
agent-browser wait --load networkidle

# 4. Verificar signup exitoso
agent-browser screenshot screenshots/01-signup-success.png
agent-browser console  # ¿Errores?
CURRENT_URL=$(agent-browser get url)
if [[ $CURRENT_URL != *"/editor"* ]]; then
  echo "❌ FAIL: No redirigió a /editor después de signup"
  exit 1
fi

# 5. Editar perfil
agent-browser snapshot -i
agent-browser fill @e_name "Marco Rodriguez"
agent-browser fill @e_bio "DevOps Engineer"
agent-browser fill @e_avatar "https://example.com/avatar.jpg"
agent-browser click @e_save_btn
agent-browser wait --load networkidle
agent-browser screenshot screenshots/02-profile-saved.png

# 6. Verificar en DB
echo "🔍 Checking database..."
PROFILE=$(psql $DATABASE_URL -t -c "SELECT display_name, bio FROM profiles WHERE slug = 'marco';")
if [[ $PROFILE != *"Marco Rodriguez"* ]]; then
  echo "❌ FAIL: Profile not saved to database"
  exit 1
fi

# 7. Verificar preview actualizado
PREVIEW_NAME=$(agent-browser get text @e_preview_name)
if [[ $PREVIEW_NAME != "Marco Rodriguez" ]]; then
  echo "❌ FAIL: Preview not updated"
  exit 1
fi

# Cleanup
kill $APP_PID
agent-browser close

echo "✅ PASS: Profile editor works end-to-end"

Este test existe ANTES del código de implementación.

Fase 3: Implementación Guiada por Tests

Leo ejecuta el test:

bash tests/e2e/profile-editor.sh

Falla (obvio, no hay código aún).

❌ FAIL: Cannot read properties of undefined (reading 'slug')

Leo implementa el código mínimo:

// src/components/editor/profile-form.tsx
"use client";

import { useState } from "react";

export function ProfileForm({ profile }) {
  const [name, setName] = useState(profile.displayName);
  const [bio, setBio] = useState(profile.bio);

  const handleSave = async () => {
    const res = await fetch("/api/profile", {
      method: "PUT",
      body: JSON.stringify({ displayName: name, bio }),
    });

    if (!res.ok) throw new Error("Save failed");
  };

  return (
    <form>
      <input value={name} onChange={(e) => setName(e.target.value)} />
      <textarea value={bio} onChange={(e) => setBio(e.target.value)} />
      <button onClick={handleSave}>Save</button>
    </form>
  );
}

Ejecuta test de nuevo:

bash tests/e2e/profile-editor.sh

Falla:

❌ FAIL: Profile not saved to database

Leo revisa el código. Encuentra el bug:

// API route src/app/api/profile/route.ts
export async function PUT(req: Request) {
  const body = await req.json();

  // BUG: No valida entrada
  // BUG: No guarda en DB realmente

  return Response.json({ success: true });  // Miente
}

Lo corrige:

import { db } from "@/lib/db";
import { profiles } from "@/lib/db/schema";
import { profileSchema } from "@/lib/validations";
import { auth } from "@/lib/auth/server";
import { eq } from "drizzle-orm";

export async function PUT(req: Request) {
  // 1. Autenticación
  const { data: session } = await auth.getSession();
  if (!session?.user) {
    return Response.json({ error: "Unauthorized" }, { status: 401 });
  }

  // 2. Validación
  const body = await req.json();
  const validated = profileSchema.safeParse(body);
  if (!validated.success) {
    return Response.json({ error: validated.error }, { status: 400 });
  }

  // 3. Guardar en DB
  await db
    .update(profiles)
    .set({
      displayName: validated.data.displayName,
      bio: validated.data.bio,
      avatarUrl: validated.data.avatarUrl,
      updatedAt: new Date(),
    })
    .where(eq(profiles.userId, session.user.id));

  return Response.json({ success: true });
}

Ejecuta test:

bash tests/e2e/profile-editor.sh

Pasa:

✅ PASS: Profile editor works end-to-end

El Ciclo Completo

1. Leo genera test E2E (bash script con agent-browser)
2. Test falla (no hay código)
3. Leo implementa código
4. Test falla (con error específico)
5. Leo ve el error, lo corrige
6. Test pasa
7. Leo entrega código + test + screenshots

Marco NO revisa código.

Marco revisa el test report.

La Primera Feature Completa

Marco le pidió a Leo:

"Implementa editor de perfil con preview en vivo. Drag-and-drop para reordenar links."

Lo Que Leo Hizo

1. Investigación (3 sub-agentes paralelos)

[Sub-1: App Structure]
✅ Identificó 4 user journeys
✅ Mapeó 8 componentes interactivos

[Sub-2: Database]
✅ Schema: profiles, link_items (con sort_order)
✅ Queries de validación preparadas

[Sub-3: Bug Hunting]
✅ Encontró: sin validación de sort_order único
✅ Encontró: drag-drop sin feedback visual
✅ Encontró: posible race condition en reorder API

2. Generó 4 Tests E2E

tests/e2e/
├── signup.sh       # Registro de usuario
├── login.sh        # Login existente
├── profile.sh      # Edición de perfil
└── links.sh        # CRUD + reorder de links

3. Ejecutó Tests (todos fallaron)

❌ signup.sh: Cannot find element @e_signup_btn
❌ profile.sh: API route not found
❌ links.sh: Database table link_items doesn't exist

4. Implementó Código

• Schema de DB (profiles, link_items)
• API routes (GET/PUT /api/profile, POST/DELETE /api/links)
• Componentes React (ProfileForm, LinkList, LinkItem)
• Drag-and-drop con dnd-kit
• Preview panel con tema "Minimal"

5. Ejecutó Tests Iterativamente

[Iteración 1]
❌ 4 tests failing
  - signup.sh: No redirección
  - profile.sh: Validación falta
  - links.sh: sort_order null

[Iteración 2]
❌ 2 tests failing
  - profile.sh: Preview no actualiza
  - links.sh: Drag-drop rompe orden

[Iteración 3]
✅ 4 tests passing

6. Entregó a Marco

📦 Deliverable:
├── Code: 1,247 líneas
├── Tests: 4 E2E scripts
├── Screenshots: 18 captures de flujo
├── DB Validation: 12 queries ejecutadas
└── Test Report: 100% passing

Marco revisó el test report:

🧪 Test Summary
================
✅ signup.sh: PASS (12 steps, 0 errors)
✅ login.sh: PASS (8 steps, 0 errors)
✅ profile.sh: PASS (15 steps, 0 errors)
✅ links.sh: PASS (23 steps, 0 errors)

📸 Screenshots: 18 captured
🗄️  Database: All validations passed
⏱️  Total time: 47 seconds

Marco probó la feature.

Funcionó perfectamente.

Drag-and-drop fluido. Preview actualizado. Datos persistidos.

Cero bugs.

Los Resultados Después de 1 Mes

Marco hizo que Leo usara TDD + agent-browser en todas las features.

Antes (Sin TDD)

Features entregadas: 12
Bugs encontrados por Marco: 47
Tiempo de revisión: 8-12 horas/feature
Bugs en producción: 18
Features rechazadas: 5 (41%)

Después (Con TDD + agent-browser)

Features entregadas: 15
Bugs encontrados por Leo mismo: 89 (before delivery)
Tiempo de revisión: 15 minutos/feature (solo test report)
Bugs en producción: 2 (issues de UX, no funcionales)
Features rechazadas: 0 (0%)

Mejora:

• 96% menos bugs llegando a Marco
• 95% menos tiempo de revisión
• 100% de features aceptadas
• Self-healing: Leo encuentra y corrige sus propios bugs

Caso Real: Feature de Analytics

Marco pidió:

"Añade analytics: track clicks en links, muestra métricas en dashboard"

Leo (con TDD):

1. Generó test que simulaba:
2. Usuario crea link
3. Usuario visita página pública
4. Clicks en link
5. Verifica registro en click_events
6. Verifica que dashboard muestra métricas
7. Test falló 7 veces durante implementación
8. Bugs que Leo encontró él mismo:
9. Click event no registraba timestamp
10. Dashboard no filtraba por usuario
11. Métricas sumaban duplicados
12. Link público no tenía atributo de tracking
13. CORS bloqueaba peticiones de tracking
14. Dashboard crasheaba con 0 clicks
15. Gráfico mostraba fechas en UTC, no local time
16. Leo corrigió los 7 bugs
17. Test pasó
18. Marco recibió feature funcional

Tiempo total: 23 minutos (vs 6 horas sin TDD)

Por Qué Funciona Tan Bien

1. Tests Como Especificación Ejecutable

# Este test ES la especificación:
agent-browser open http://localhost:3000/editor
agent-browser click @e_add_link
agent-browser fill @e_title "My GitHub"
agent-browser fill @e_url "https://github.com/marco"
agent-browser click @e_save
agent-browser wait --load networkidle

# Verificar UI
LINK_TEXT=$(agent-browser get text @e_link_1)
assert_equals "$LINK_TEXT" "My GitHub"

# Verificar DB
LINK_COUNT=$(psql -t -c "SELECT COUNT(*) FROM link_items;")
assert_equals "$LINK_COUNT" "1"

No hay ambigüedad.

El test define EXACTAMENTE qué debe pasar.

2. Feedback Loop Instantáneo

[Leo escribe código]
  ↓
[Leo ejecuta test (5 segundos)]
  ↓
[Test falla con error específico]
  ↓
[Leo ve EXACTAMENTE qué está roto]
  ↓
[Leo corrige]
  ↓
[Test pasa]

Sin esperar a Marco.

Sin "parece que funciona".

Validación objetiva en segundos.

3. Cobertura Multi-Capa

Un test de agent-browser valida:

• ✅ UI: Elementos renderizan correctamente
• ✅ JavaScript: No hay errores en consola
• ✅ API: Requests completan sin errores
• ✅ Validación: Schemas rechazan datos inválidos
• ✅ Base de Datos: Registros se guardan correctamente
• ✅ Estado: UI refleja estado real de DB
• ✅ UX: Flujo de usuario funciona end-to-end

Un solo test cubre toda la stack.

4. Evidencia Verificable

Cada test genera:

tests/e2e/screenshots/
├── 01-signup-form.png
├── 02-signup-success.png
├── 03-editor-empty.png
├── 04-profile-filled.png
├── 05-profile-saved.png
├── 06-link-added.png
├── 07-link-reordered.png
└── 08-preview-updated.png

Marco puede VER exactamente qué pasó.

No confiar en "Leo dice que funciona".

Ver screenshots de cada paso.

Lo Que Marco Aprendió

1. La IA No Puede Revisar Su Propio Código

Pedirle a Leo "revisa si hay bugs" no funciona.

Leo dirá "el código se ve bien" aunque esté roto.

Pero la IA SÍ puede ejecutar tests.

Y los tests no mienten.

2. TDD Invierte la Relación

Tradicional:

Dev escribe código → QA lo testea → Bugs → Dev corrige

Con TDD para Agentes:

Agente genera tests → Agente escribe código → Agente corrige hasta pasar → Entrega

El agente ES su propio QA.

3. agent-browser Es la Clave

Otras herramientas (Playwright, Selenium) requieren código complejo.

# Playwright tradicional
from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch()
    page = browser.new_page()
    page.goto("http://localhost:3000")
    page.click("button:has-text('Sign Up')")
    page.fill("input[type='email']", "test@example.com")
    # ... 50 líneas más

agent-browser es bash:

agent-browser open http://localhost:3000
agent-browser snapshot -i
agent-browser click @e1
agent-browser fill @e2 "test@example.com"

Un agente puede componer esto fácilmente.

4. La Skill e2e-test Es el Game-Changer

Marco no tuvo que enseñarle a Leo cómo testear.

La skill e2e-test incluye TODO el proceso:

1. Lanzar sub-agentes de investigación
2. Generar tests basados en findings
3. Ejecutar tests iterativamente
4. Capturar screenshots por paso
5. Validar DB después de cada acción
6. Generar test report
7. Auto-corregir hasta que pasen

Leo solo llama la skill.

La skill orquesta todo el proceso de TDD.

5. Responsive Testing Automatizado

La skill también valida responsive:

# Desktop
agent-browser set viewport 1920 1080
agent-browser screenshot desktop-view.png

# Tablet
agent-browser set viewport 768 1024
agent-browser screenshot tablet-view.png

# Mobile
agent-browser set viewport 375 812
agent-browser screenshot mobile-view.png

Leo valida que TODO funciona en todos los viewports.

Automáticamente.

El Costo Real

Infraestructura:

agent-browser: Gratis (open source)
Node.js: Ya instalado
Tiempo de ejecución tests: ~45 segundos/feature
Costo adicional: €0

Valor generado:

Bugs evitados: 89 en 1 mes
Tiempo ahorrado en revisión: ~96 horas/mes
Features rechazadas: 0 (antes 5/mes)
Confianza en entregas: 100%

ROI: Infinito (€0 de costo, valor masivo)

Cómo Implementar TDD con agent-browser en Tu Proyecto

Continuación exclusiva para miembros...

Esta es la guía completa para que tus agentes IA se testeen a sí mismos.