Von 18.000 Tokens auf 300: Wie wir einen leichtgewichtigen Browser-Skill entwickelt haben

Dezember 2025. Die Agent-Laufzeitumgebung von TeamDay benötigte Browser-Automatisierung.

Die naheliegende Wahl: MCP-Server. Playwright MCP (~13.700 Tokens), Chrome DevTools MCP (~18.000 Tokens). Beide kampferprobt, gut dokumentiert, weit verbreitet.

Dann lasen wir Mario Zechners Artikel. Und wir bauten etwas anderes.

---

Die Token-Steuer, über die niemand spricht

Wenn Sie einen MCP-Server mit Claude verbinden, wird jede Tool-Beschreibung sofort in den Kontext geladen. Chrome DevTools MCP verbraucht allein für seine 26 Tool-Definitionen 18.000 Tokens — das sind 9 % von Claudes Kontextfenster, bevor Sie auch nur irgendetwas getan haben.

Playwright MCP ist mit 13.700 Tokens (21 Tools) etwas besser, belegt aber immer noch 6,8 % Ihres Budgets.

Das Problem potenziert sich:

• Jeder weitere MCP-Server fügt Tausende Token hinzu
• Tool-Beschreibungen bleiben geladen, egal ob Sie sie verwenden oder nicht
• Komplexe Tools brauchen ausführliche Dokumentation und sind daher teuer
• Der Agent verwirrt sich, wenn er aus zu vielen Tools wählen muss

Die Mathematik ist brutal. Verbinden Sie 3–4 MCP-Server, verbrennen Sie 30–40.000 Tokens für Tool-Definitionen. Das ist Kontext, den Sie nicht für die eigentliche Arbeit nutzen können.

Was, wenn Sie MCP gar nicht brauchen?

Mario Zechner stellte diese Frage und lieferte eine Antwort: einfache Bash-Skripte mit Puppeteer Core, in ~225 Tokens dokumentiert.

Seine Erkenntnis: Moderne LLMs können bereits programmieren. Anstatt 26 spezialisierter Tools geben Sie ihnen ein paar Primitive und lassen sie Lösungen zusammensetzen.

Die wesentlichen Vorteile:

• Token-Effizienz: ~300 Tokens vs. ~18.000 Tokens
• Echte Kompositionsfähigkeit: Ausgabe in Dateien, Weiterleitung an andere Tools
• Leicht erweiterbar: Neue Fähigkeiten in Minuten hinzufügen
• Profil-Unterstützung: Verbindung zum laufenden Browser mit Ihren Anmeldedaten
• Progressive Disclosure: Skills werden nur bei Bedarf geladen

Wir haben diesen Ansatz übernommen und /browser entwickelt — einen leichtgewichtigen Skill für Claude Code.

Was wir gebaut haben: 7 Skripte, unbegrenzte Möglichkeiten

Die Kern-Primitive

# Browser einmalig starten (mit Ihrem Chrome-Profil für authentifizierte Sessions)
bun browser-start.ts --profile

# Zu beliebiger Adresse navigieren
bun browser-navigate.ts https://example.com

# JavaScript im Seitenkontext ausführen
bun browser-eval.ts 'document.title'

# Schnelle Screenshots in Datei
bun browser-screenshot.ts page.webp

# Interaktive Element-Auswahl (Nutzer klickt, Agent erhält Selektoren)
bun browser-pick.ts --multi

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

# Sauberes Herunterfahren
bun browser-stop.ts

Das war’s. Sieben einfache Skripte. Jedes tut genau eine Sache gut. Der Agent setzt sie für komplexe Workflows zusammen.

Warum das funktioniert

Verbindung zu laufendem Browser statt neue Instanzen zu starten:

• Sofortiger Start (kein Browser-Launch-Overhead)
• Authentifizierung erhalten (Google, GitHub, LinkedIn usw.)
• Nutzer kann interagieren (Elemente anklicken, manuell einloggen)
• Schnelle Iteration (kein Cleanup zwischen Befehlen)

Progressive Disclosure:

• Skill-Metadaten: ~50 Tokens (“Sie haben einen Browser-Skill”)
• Skill-Dokumentation: ~300 Tokens (bei Bedarf geladen)
• Gesamter Overhead: 60× weniger als Chrome DevTools MCP

Echte Kompositionsfähigkeit:

# Daten in Datei extrahieren
bun browser-eval.ts 'data' > output.json

# Screenshot erstellen und verarbeiten
bun browser-screenshot.ts page.webp && magick page.webp page.jpg

# Navigation und Extraktion verketten
bun browser-navigate.ts https://site.com && bun browser-eval.ts 'scrape()'

Der Praxistest: 548 slowakische Fachleute

Die NGO Leaf benötigte slowakische Senior-Fachleute aus dem Ausland für eine Mentoring-Initiative. Die Daten befanden sich in Clay.com, hinter einer Authentifizierungsschranke und API-Limits.

Die Herausforderung:

• Muss bei Clay.com authentifiziert sein
• API undokumentiert (Reverse Engineering aus dem Netzwerkverkehr)
• Vorschau auf 100 Ergebnisse pro Anfrage beschränkt
• Segmentierung nach Land nötig, um Limits zu umgehen
• Extraktion von 500+ Profilen mit LinkedIn-URLs, Titeln, Unternehmen, Standorten

Traditioneller Ansatz: Vollständigen Scraper bauen, Sessions verwalten, Paginierung handhaben, Daten exportieren. Stunden Arbeit.

Mit dem /browser-Skill: 45 Minuten vom Start bis zu 548 exportierten Fachleuten.

So funktionierte es

1. Browser mit Profil starten (behält Clay-Login):

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

2. API durch Inspektion des Netzwerkverkehrs entdecken:

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

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

3. Authentifizierungs-Cookies extrahieren:

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

4. Ländersegmentiertes Extraktionsskript erstellen:

Der Agent schrieb ein spezialisiertes Skript (clay-slovak-experts.ts), das:

• Die authentifizierte Session des Browsers nutzt
• Slowakischsprechende außerhalb der Slowakei sucht
• Nach Senioritätsstufen filtert (Senior, Director, VP, C-Level)
• Nach Ländern segmentiert, um das 100-Ergebnisse-Limit zu umgehen
• Aus 11 Ländern extrahiert: USA, UK, Deutschland, Österreich, Tschechien, Niederlande, Schweiz, Irland, Kanada, Australien, Frankreich
• Paginierung und Rate-Limiting behandelt
• Nach LinkedIn-URL dedupliziert

5. Extraktion ausführen:

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

Ausgabe:

🇸🇰 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

Gesamtzeit: 45 Minuten (einschließlich API-Erkundung, Skript-Erstellung, Extraktion).

Die Stärke: Der Agent nutzte Browser-Automatisierung als kombinierbares Primitiv. Navigation, Inspektion, Authentifizierung, Extraktion — jeder Schritt sauber und einfach.

Warum das wichtig ist

Token-Effizienz, die sich aufaddiert

Ansatz	Token-Overhead	% des Kontexts
Chrome DevTools MCP	~18.000 Tokens	9,0 %
Playwright MCP	~13.700 Tokens	6,8 %
Browser Skill	~300 Tokens	0,15 %

Einsparung: 60× weniger Kontextverbrauch.

Das sind 17.700 Tokens, die Sie für tatsächliche Arbeit nutzen können — Dokumente, Code, Reasoning.

Schnelligkeit durch Einfachheit

MCP-Ansatz:

• Neuen Browser für jede Session starten
• Auf Initialisierung warten
• Tool über MCP-Protokoll ausführen
• Strukturierte Antworten parsen

Skill-Ansatz:

• Verbindung zu laufendem Browser (sofort)
• Skript direkt ausführen (kein Protokoll-Overhead)
• Ausgabe in Dateien (kombinierbar mit Standardwerkzeugen)
• Browser zwischen Befehlen aktiv halten

Realer Unterschied: 548 Fachleute in 45 Minuten extrahieren vs. stundenlange eigene Integration.

Erweiterbarkeit als Designprinzip

Brauchen Sie eine neue Fähigkeit? Schreiben Sie ein 50-Zeilen-Skript.

Beispiel: Interaktive Element-Auswahl (in 15 Minuten gebaut):

// browser-pick.ts
// Nutzer klickt auf Elemente im Browser, Agent erhält Selektoren

import puppeteer from 'puppeteer-core';

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

    // Click-Listener einfügen
    await page.evaluate(() => {
        document.addEventListener('click', (e) => {
            const el = e.target;
            // Selektor, Text, Attribute usw. zurückgeben
            console.log({
                tag: el.tagName,
                selector: getSelector(el),
                text: el.textContent,
                ...
            });
        });
    });
}

Versuchen Sie das als MCP-Tool zu bauen. Dann versuchen Sie, es für Ihren spezifischen Anwendungsfall anzupassen.

Profil-Unterstützung verändert alles

Mit Ihrem Chrome-Profil:

• Bereits bei Google, GitHub, LinkedIn, Clay usw. eingeloggt
• Keine Verwaltung von Anmeldedaten
• Keine OAuth-Flows
• Keine Session-Verwaltung
• Einfach navigieren und arbeiten

Für die Clay-Extraktion: Wir haben keinen Authentifizierungscode geschrieben. Der Browser hatte bereits die Session. Der Agent hat sie einfach genutzt.

Die Architektur: Skills > Tools

Anthropic hat das in seinem Agent-Skills-Vortrag erklärt:

„Code ist nicht nur ein Anwendungsfall, sondern die universelle Schnittstelle zur digitalen Welt.”

Skills sind organisierte Verzeichnisse mit prozeduralem Wissen. Progressive Disclosure ermöglicht es, einem Agenten Hunderte von Skills zu geben, ohne den Kontext zu überlasten.

MCP bietet Konnektivität. Skills bieten Expertise.

Der Browser-Skill demonstriert das:

• Metadaten: „Sie haben Browser-Automatisierungs-Fähigkeit”
• Dokumentation: 6.131 Zeichen (~300 Tokens bei Laden)
• Skripte: Werden nur bei Bedarf ausgeführt, nicht in Kontext geladen
• Kombinierbar: Gibt Dateien aus, funktioniert mit anderen Skills

Wann MCP vs. Skills einsetzen

MCP-Server verwenden, wenn:

• Sie Echtzeit-Daten-Streaming benötigen (Datenbanken, APIs)
• Ein externer Dienst eine offizielle MCP-Integration bietet
• Tool-Zustand zwischen Anfragen erhalten bleiben muss
• Mehrere Agenten gemeinsamen Zugriff benötigen

Skills verwenden, wenn:

• Sie minimalen Token-Overhead wollen
• Kombinierbarkeit mit Bash/Dateien wichtig ist
• Sie das Verhalten häufig anpassen müssen
• Iterationsgeschwindigkeit > standardisiertes Protokoll

Beides verwenden: MCP für Konnektivität (Datenbanken, Slack, Notion). Skills für Expertise (Browser-Automatisierung, Datenverarbeitung, Workflows).

Selbst ausprobieren

Der Browser-Skill ist in TeamDay verfügbar. Bitten Sie einen Agenten:

"Navigiere zu example.com und extrahiere alle Artikel-Überschriften"
"Screenshot unserer Homepage in hellem und dunklem Modus erstellen"
"Finde den Selektor für die Suchtaste auf dieser Seite"
"Extrahiere die 50 besten Beiträge von Hacker News mit Score > 100"

Der Agent nutzt automatisch den Browser-Skill — verbinden, navigieren, extrahieren, Ergebnisse ausgeben.

Token-Overhead: ~300 Tokens bei Laden. 60× weniger als Chrome DevTools MCP.

---

Die zentrale Erkenntnis

Moderne LLMs sind gut genug im Programmieren, dass einfache Skripte + Dokumentation komplexes Tooling übertrifft.

Sie brauchen keine 26 spezialisierten Browser-Tools. Sie brauchen 7 Primitive und einen Agenten, der weiß, wie er sie kombiniert.

Das Ergebnis: Weniger Kontext-Overhead. Schnellere Ausführung. Einfachere Anpassung. Echte Arbeit in Minuten statt Stunden.

548 slowakische Fachleute für Leaf NGO. Extrahiert in 45 Minuten mit 300 Tokens Overhead.

Das ist die Stärke leichtgewichtiger Skills.

---

Basierend auf Mario Zechners Erkenntnis. Entwickelt für TeamDay-Agenten. Im Produktiveinsatz für echte NGO-Arbeit genutzt.