De 18.000 tokens a 300: Cómo construimos un Browser Skill ligero

Diciembre de 2025. El runtime de agentes de TeamDay necesitaba automatización del navegador.

La opción obvia: servidores MCP. Playwright MCP (~13.700 tokens), Chrome DevTools MCP (~18.000 tokens). Ambos probados en batalla, bien documentados, ampliamente adoptados.

Luego leímos el artículo de Mario Zechner. Y construimos algo diferente.

---

El impuesto en tokens del que nadie habla

Cuando conectas un servidor MCP a Claude, cada descripción de herramienta se carga en el contexto inmediatamente. Chrome DevTools MCP consume 18.000 tokens solo por sus 26 definiciones de herramientas — el 9 % de la ventana de contexto de Claude, antes de haber hecho nada.

Playwright MCP es ligeramente mejor con 13.700 tokens (21 herramientas), pero sigue consumiendo el 6,8 % de tu presupuesto.

El problema se multiplica:

• Cada servidor MCP adicional agrega miles de tokens más
• Las descripciones de herramientas permanecen cargadas las uses o no
• Las herramientas complejas necesitan documentación detallada, haciéndolas costosas
• El agente se confunde cuando tiene demasiadas herramientas para elegir

Las matemáticas son brutales. Conecta 3-4 servidores MCP y habrás quemado 30-40k tokens en definiciones de herramientas. Es contexto que no puedes usar para el trabajo real.

¿Y si no necesitas MCP para nada?

Mario Zechner planteó esta pregunta y mostró una respuesta: simples scripts bash usando Puppeteer Core, documentados en ~225 tokens.

Su insight: Los LLMs modernos ya saben programar. En lugar de 26 herramientas especializadas, dales unos pocos primitivos y déjalos componer soluciones.

Las ventajas clave:

• Eficiencia de tokens: ~300 tokens vs. ~18.000 tokens
• Composabilidad real: salida a archivos, conexión con otras herramientas
• Fácil de extender: nuevas capacidades en minutos
• Soporte de perfil: conexión al navegador en ejecución con tus credenciales
• Revelación progresiva: los skills solo se cargan cuando se necesitan

Adoptamos este enfoque y construimos /browser — un skill ligero para Claude Code.

Lo que construimos: 7 scripts, posibilidades infinitas

Los primitivos base

# Iniciar el navegador una vez (con tu perfil de Chrome para sesiones autenticadas)
bun browser-start.ts --profile

# Navegar a cualquier lugar
bun browser-navigate.ts https://example.com

# Ejecutar JavaScript en el contexto de la página
bun browser-eval.ts 'document.title'

# Screenshots rápidos a archivo
bun browser-screenshot.ts page.webp

# Selector interactivo de elementos (el usuario hace clic, el agente obtiene selectores)
bun browser-pick.ts --multi

# Extraer cookies HTTP-only
bun browser-cookies.ts --domain=example.com

# Apagado limpio
bun browser-stop.ts

Eso es todo. Siete scripts simples. Cada uno hace una cosa bien. El agente los compone para flujos de trabajo complejos.

Por qué funciona

Conexión al navegador en ejecución en lugar de lanzar nuevas instancias:

• Inicio instantáneo (sin sobrecarga de lanzamiento del navegador)
• Conservar autenticación (Google, GitHub, LinkedIn, etc.)
• El usuario puede interactuar (hacer clic en elementos, iniciar sesión manualmente)
• Iteración rápida (sin limpieza entre comandos)

Revelación progresiva:

• Metadatos del skill: ~50 tokens (“tienes un browser skill”)
• Documentación del skill: ~300 tokens (cargada cuando se necesita)
• Sobrecarga total: 60× menos que Chrome DevTools MCP

Composabilidad real:

# Extraer datos a archivo
bun browser-eval.ts 'data' > output.json

# Capturar pantalla y procesar
bun browser-screenshot.ts page.webp && magick page.webp page.jpg

# Encadenar navegación y extracción
bun browser-navigate.ts https://site.com && bun browser-eval.ts 'scrape()'

La prueba real: 548 profesionales eslovacos

La ONG Leaf necesitaba profesionales sénior eslovacos que trabajaran en el extranjero para una iniciativa de mentoría. Los datos estaban en Clay.com, detrás de autenticación y límites de API.

El desafío:

• Debe estar autenticado en Clay.com
• API sin documentar (ingeniería inversa desde la red)
• Vista previa limitada a 100 resultados por solicitud
• Necesidad de segmentar por país para superar los límites
• Extraer 500+ perfiles con URLs de LinkedIn, títulos, empresas, ubicaciones

Enfoque tradicional: Construir un scraper completo, gestionar sesiones, manejar paginación, exportar datos. Horas de trabajo.

Con el skill /browser: 45 minutos desde el inicio hasta 548 profesionales exportados.

Cómo funcionó

1. Iniciar el navegador con perfil (conserva el inicio de sesión en Clay):

bun browser-start.ts --profile
bun browser-navigate.ts https://app.clay.com

2. Descubrir la API inspeccionando el tráfico de red:

bun browser-eval.ts 'performance.getEntriesByType("resource").map(r => r.name)'

Encontrado: https://api.clay.com/v3/actions/run-enrichment

3. Extraer cookies de autenticación:

bun browser-cookies.ts --domain=clay.com

4. Construir un script de extracción segmentado por país:

El agente escribió un script especializado (clay-slovak-experts.ts) que:

• Usa la sesión autenticada del navegador
• Busca hablantes de eslovaco fuera de Eslovaquia
• Filtra por niveles de seniority (sénior, director, VP, C-level)
• Segmenta por país para superar el límite de 100 resultados
• Extrae de 11 países: EE. UU., Reino Unido, Alemania, Austria, República Checa, Países Bajos, Suiza, Irlanda, Canadá, Australia, Francia
• Maneja paginación y rate limiting
• Deduplica por URL de LinkedIn

5. Ejecutar la extracción:

bun clay-slovak-experts.ts --count=500 --seniority=senior,director,vp

Salida:

🇸🇰 Slovak Experts Extractor for Leaf NGO
=========================================
Target: 500 senior Slovak professionals working abroad
Seniority levels: senior, director, vp

🔐 Getting authentication cookies...
📊 Checking total available records...
   Found 1,247 Slovak experts abroad with selected seniority

📥 Extracting 500 records in 5 batches...
   Batch 1/5 (offset 0)... ✅ Got 100 records
   ⏳ Waiting 3s before next batch...
   Batch 2/5 (offset 100)... ✅ Got 100 records
   ...
   Batch 5/5 (offset 400)... ✅ Got 100 records

✅ Extracted 500 Slovak experts
   After deduplication: 548 unique profiles
💾 Saved to: slovak-experts.json
📄 CSV saved to: slovak-experts.csv

📈 Summary:
   Top locations:
   - United States: 198
   - United Kingdom: 142
   - Germany: 87
   - Netherlands: 34
   - Switzerland: 28
   - Austria: 21
   - Czech Republic: 18
   - Canada: 11
   - Ireland: 5
   - Australia: 3
   - France: 1

Tiempo total: 45 minutos (incluyendo descubrimiento de API, creación de script, extracción).

El poder: El agente usó la automatización del navegador como un primitivo composable. Navegar, inspeccionar, autenticar, extraer — cada paso limpio y simple.

Por qué importa

Eficiencia de tokens que se acumula

Enfoque	Sobrecarga de tokens	% del contexto
Chrome DevTools MCP	~18.000 tokens	9,0 %
Playwright MCP	~13.700 tokens	6,8 %
Browser Skill	~300 tokens	0,15 %

Ahorro: 60× menos consumo de contexto.

Son 17.700 tokens que puedes usar para trabajo real — documentos, código, razonamiento.

Velocidad a través de la simplicidad

Enfoque MCP:

• Lanzar nuevo navegador para cada sesión
• Esperar la inicialización
• Ejecutar herramienta a través del protocolo MCP
• Parsear respuestas estructuradas

Enfoque skill:

• Conectar al navegador en ejecución (instantáneo)
• Ejecutar script directamente (sin sobrecarga de protocolo)
• Salida a archivos (composable con herramientas estándar)
• Mantener el navegador activo entre comandos

Diferencia real: Extraer 548 profesionales en 45 minutos vs. horas de integración personalizada.

Extensibilidad por diseño

¿Necesitas una nueva capacidad? Escribe un script de 50 líneas.

Ejemplo: Selector interactivo de elementos (construido en 15 minutos):

// browser-pick.ts
// El usuario hace clic en elementos del navegador, el agente obtiene selectores

import puppeteer from 'puppeteer-core';

async function pick() {
    const browser = await puppeteer.connect({...});
    const page = await browser.pages()[0];

    // Inyectar listener de clics
    await page.evaluate(() => {
        document.addEventListener('click', (e) => {
            const el = e.target;
            // Devolver selector, texto, atributos, etc.
            console.log({
                tag: el.tagName,
                selector: getSelector(el),
                text: el.textContent,
                ...
            });
        });
    });
}

Intenta construir eso como una herramienta MCP. Luego intenta modificarlo para tu caso de uso específico.

El soporte de perfil lo cambia todo

Con tu perfil de Chrome:

• Ya con sesión iniciada en Google, GitHub, LinkedIn, Clay, etc.
• Sin gestión de credenciales
• Sin flujos OAuth
• Sin manejo de sesiones
• Simplemente navegar y trabajar

Para la extracción de Clay: No escribimos código de autenticación. El navegador ya tenía la sesión. El agente simplemente la usó.

La arquitectura: Skills > Herramientas

Anthropic explicó esto en su charla sobre agent skills:

“El código no es solo un caso de uso, sino la interfaz universal con el mundo digital.”

Los skills son carpetas organizadas con conocimiento procedimental. La revelación progresiva significa que puedes darle a un agente cientos de skills sin ahogar el contexto.

MCP proporciona conectividad. Los skills proporcionan expertise.

El browser skill lo demuestra:

• Metadatos: “Tienes capacidad de automatización de navegador”
• Documentación: 6.131 caracteres (~300 tokens al cargar)
• Scripts: Solo se ejecutan cuando se necesitan, no se cargan en el contexto
• Composable: Genera archivos, funciona con otros skills

Cuándo usar MCP vs. Skills

Usa servidores MCP cuando:

• Necesitas streaming de datos en tiempo real (bases de datos, APIs)
• Un servicio externo proporciona integración MCP oficial
• El estado de la herramienta debe persistir entre solicitudes
• Múltiples agentes necesitan acceso compartido

Usa skills cuando:

• Quieres sobrecarga mínima de tokens
• La composabilidad con bash/archivos importa
• Necesitas personalizar el comportamiento con frecuencia
• Velocidad de iteración > protocolo estandarizado

Usa ambos: MCP para conectividad (bases de datos, Slack, Notion). Skills para expertise (automatización de navegador, procesamiento de datos, flujos de trabajo).

Pruébalo tú mismo

El browser skill está disponible en TeamDay. Pídele a un agente que:

"Navegue a example.com y extraiga todos los títulos de artículos"
"Haga capturas de pantalla de nuestra página de inicio en modo claro y oscuro"
"Encuentre el selector para el botón de búsqueda en esta página"
"Extraiga los 50 mejores posts de Hacker News con puntaje > 100"

El agente usará el browser skill automáticamente — conectar, navegar, extraer, mostrar resultados.

Sobrecarga de tokens: ~300 tokens al cargar. 60× menos que Chrome DevTools MCP.

---

El insight central

Los LLMs modernos son suficientemente buenos en programación como para que scripts simples + documentación supere a las herramientas complejas.

No necesitas 26 herramientas especializadas de navegador. Necesitas 7 primitivos y un agente que sepa cómo componerlos.

El resultado: Menos sobrecarga de contexto. Ejecución más rápida. Personalización más fácil. Trabajo real hecho en minutos en lugar de horas.

548 profesionales eslovacos para la ONG Leaf. Extraídos en 45 minutos con 300 tokens de sobrecarga.

Ese es el poder de los skills ligeros.

---

Basado en el insight de Mario Zechner. Construido para los agentes de TeamDay. Usado en producción para trabajo real de ONG.