Du hast es einmal vorgeführt. Warum machst du es immer noch selbst?
Skill Recorder ist eine Chrome-Erweiterung, die zusieht, wie du eine Browser-Aufgabe einmal durchführst — und dann eine SKILL.md schreibt: eine reine Markdown-Spezifikation, die Claude Code (oder jeder Agent auf der browse CLI) ohne Selektoren, Glue-Code oder Babysitting wiedergibt.
↑ ein fünfminütiger Bestell-Flow, einmal aufgezeichnet und ewig wiedergegeben.
Anatomie
Drei Stufen, einen Klick voneinander entfernt.
Was wir ausliefern, ist eine kleine Chrome-MV3-Erweiterung und eine 4-KB-Destillationspipeline. Der Recorder klinkt sich in chrome.debugger ein für DOM-Level-Treue; die Destillation läuft komplett im Service Worker; die Wiedergabe liest die resultierende SKILL.md über die browse-CLI. Kein Server. Kein Glue-Code.
i.
Erfassen
Seitenleiste
Skill RecorderREC
00:01click nav.Orders
00:02click btn.New
00:04focus #sku
00:05type "SKU-1029"
00:06blur #sku
00:08type "50" → #qty
00:09click btn.Submit
Ein Port pro Frame im Content-Script leitet jedes DOM-Ereignis an den Service Worker weiter. Shadow DOM und gleiche-Herkunft-iframes werden transparent durchdrungen.
Sechsstufige Selektor-Auflösung (testid → id → aria → text → css → xpath)
tabPorts: Map<tabId, Map<frameId, Port>>
IME-bewusste Eingabepufferung · paste · drag
23 Ereignisse →
ii.
Destillieren
Service Worker · 30 s
✓dedupe consecutive clicks23 → 16
✓fold keystrokes into type()16 → 11
✓detect inputs as {{params}}conf 0.94
✓mark auth boundary+1 precondition
✓parameterize URL segments2 swapped
✓flag dynamic-list clicks1 ⚠ note
Sechs kleine Durchgänge verwandeln einen rauschenden Ereignis-Log in eine deterministische Spezifikation. Auto-Parametrisierung feuert nur ab 0,7 Konfidenz; darunter fragt der Recorder, statt zu raten.
paramConfidence(step) — heuristische Leiter
auth-boundary-Erkennung — undurchsichtige Tokens + Cookies
UUID · numerische ID · E-Mail · ISO-Datum · Währung
SKILL.md →
iii.
Wiedergabe
browse CLI
~/work $ claude
> create POs for these 50 rows
Reading ~/.claude/skills/create-purchase-order/SKILL.md
Loaded 4 steps · 2 params · 1 precondition
▸ resolving precondition: signed in to supplier portal
✓ cookie present, expires 2026-08-04
▸ running batch [50 rows]
✓ 50/50 in 3m 11s
✓ 0 retries, 0 manual rescues
Die browse-CLI liest SKILL.md als reines Markdown — kein Schema, keine Laufzeit, keine Hintertüren. Jeder Schritt ist auditierbar.
Was überlebt eine Aufzeichnung? Dreizehn harte Fälle, durchgängig.
Der Browser ist voller Recorder-Fallen — Hash-Klassen, faule Modals, Shadow DOM, Tab-übergreifende Flows, IME-Komposition, Drag-and-Drop. Jede Zeile unten ist eine echte Fixture im Playground; klick irgendeine an, um selbst dagegen aufzunehmen.
Dreizehn von sechzehn. Plus vier Composite-Fixtures — Notion, Linear, Jira, Salesforce — die zwölf bis fünfzehn dieser Techniken zu einem zusammenhängenden Flow verketten. Zum Playground →
Praxisbeispiel
Ein fünfminütiges Browser-Ritual, destilliert auf dreißig Sekunden.
FeldnotizbuchAufgezeichnet 2026-02-19, 16:42 UTC50× wiedergegeben ohne Eingriff
Jeden Montagmorgen öffnet eine Betriebs-Ingenieurin bei einem kleinen Lieferanten dasselbe Portal, klickt auf Neue Bestellung, fügt einen SKU aus einer CSV ein, tippt eine Menge und klickt auf Absenden. Dann macht sie es nochmal. Und nochmal. Zweihundert Zeilen pro Woche, Woche für Woche, seit vierzehn Monaten. Ein Fünf-Minuten-Ritual, wiederholt bis die Tabelle endet.
Genau die Art Aufgabe, der ein Recorder verkauft wird — und genau die Art, an der die meisten Recorder scheitern. Das Lieferantenportal rotiert Tailwind-Hash-Klassen bei jedem Deploy. Der Absenden-Button sitzt in einer dynamischen Tabellenzeile, die nach jedem Speichern neu rendert. Das Auth-Cookie läuft mittags ab. Selenium-Skripte gegen diese Seite überleben im Schnitt zwei Wochen und beginnen dann still zu versagen.
Die Aufzeichnung
Die Ingenieurin heftet die Erweiterung an die Symbolleiste, öffnet das Portal, klickt Aufnahme starten und führt die Aufgabe genau einmal aus. Acht Klicks, zwei eingegebene Werte, ein Absenden. Das Seitenpanel zeigt einen Live-Feed der Ereignisse — inklusive Rauschen: Scrollen, focus, blur, versehentliche mousemoves über das Hilfesymbol. Dreiundzwanzig Ereignisse in 4,6 Sekunden erfasst.
Der Roh-Log behält alles; die Destillation entscheidet, was zählt.
Die Destillation
main.example.p4
before / after23 Ereignisse → 4 Schritte
— BEFORE (raw)
type"S" → #sku
type"K" → #sku
type"U" → #sku
type"-" → #sku
type"1" → #sku
type"0" → #sku
type"2" → #sku
type"9" → #sku
+ AFTER (distilled)
fill"#sku" with {{sku}}
+ AUTO-DETECTED
// 8 chars · alphanumeric · prefix SKU-
// confidence 0.94
Acht Tastenanschläge werden zu einem parametrisierten fill — bei jeder Wiedergabe dieselbe Form.
Die Übergabe
Die Ingenieurin legt das resultierende Markdown nach ~/.claude/skills/create-purchase-order/SKILL.md und tippt einen Satz in Claude Code. Der Agent findet den Skill per Name, löst die Voraussetzung auf (das gespeicherte Cookie ist bis mittags gültig), iteriert über die fünfzig Zeilen in der CSV und meldet zurück. Drei Minuten elf Sekunden später ist die Arbeit erledigt. Kein Mensch hat zugesehen.
claude code · stdout3 m 11 s · 0 Wiederholungen
> create purchase orders for the rows in ~/Desktop/feb-orders.csv▸ Reading ~/.claude/skills/create-purchase-order/SKILL.md
✓ 4 steps · 2 params · 1 precondition
▸ Resolving precondition: signed in to supplier portal
✓ cookie present (expires 2026-02-19 12:00 UTC)
▸ Running batch (50 rows)
✓ 50/50 submitted
✓ 0 retries · 0 manual rescues
✓ median 3.8s per row · longest 5.1s
Ein Satz rein, fünfzig Bestellungen raus. Der Agent stellte keine Frage.
Postscriptum
Die Kosten eines Fünf-Minuten-Rituals, auf ein Arbeitsjahr amortisiert.
Während der offenen Beta kostenlos. Kein Konto, kein Upload, keine Telemetrie. Das gesamte Bundle ist 4,5 MB; Aufzeichnungen bleiben auf deinem Rechner, bis du sie exportierst.
