Skill Recorder is een Chrome-extensie die kijkt hoe je een browsertaak één keer doorloopt — en schrijft dan een SKILL.md: een platte-markdown-specificatie die Claude Code (of elke agent op de browse-CLI) afspeelt zonder selectors, glue code of toezicht.
Wat we leveren is een kleine Chrome-MV3-extensie en een distillatie-pipeline van 4 KB. De opnemer haakt in chrome.debugger voor DOM-niveau trouw; de distillatie draait volledig in de service worker; het afspelen leest de resulterende SKILL.md via de browse-CLI. Geen server. Geen glue code.
Een poort per frame in het content script stuurt elk DOM-event door naar de service worker. Shadow DOM en same-origin iframes worden transparant doorgeprikt.
Zes kleine doorgangen veranderen een rumoerig event-log in een deterministische specificatie. Autoparametrisering vuurt alleen boven 0,7 vertrouwen; daaronder vraagt de opnemer in plaats van te gokken.
De browse-CLI leest SKILL.md als platte markdown — geen schema, geen runtime, geen ontsnappingsluikjes. Elke stap is controleerbaar.
De browser zit vol valkuilen voor opnemers — gehashte klassen, lui geladen modals, Shadow DOM, multi-tab-flows, IME-compositie, drag-and-drop. Elke rij hieronder is een echte fixture in de playground; klik op een willekeurige om er zelf tegen op te nemen.
Tailwind-achtige klassen zoals btn__primary--ab3f9c roteren bij elke deploy; de resolver loopt 6 niveaus door (testid → id → aria → text → css → xpath), zodat een opnieuw-gehashte knop toch raakt.
A2 →Zes rijen met letterlijk identieke "Pick"-knoppen — alleen positie onderscheidt. We verankeren elke klik met fingerprintIndex, zodat de juiste rij wordt geklikt, ook na herordenen.
A3 →"Continue" / "继续" / "Weiter" verwijzen allemaal naar dezelfde data-i18n-key="action.continue". De opnemer geeft de voorkeur aan locale-onafhankelijke attributen, dus een in het Engels opgenomen skill speelt af in het Chinees.
A4 →pushState- en hashchange-overgangen worden gevolgd zonder reload; afspelen wacht op het mounten van nieuwe content in plaats van een lege container te pollen.
B1 →De Confirm-knop bestaat nog niet wanneer de trigger wordt geklikt. elementVisible peilt totdat het doel verschijnt voordat de volgende stap wordt verstuurd — geen wankele timeouts.
B3 →all_frames: true injecteert per frame; acties worden gemarkeerd met de oorspronkelijke frameId, en bij re-renders opnieuw op URL opgelost, zodat een verouderde frameId nooit het afspelen blokkeert.
C1 →password / phone / creditcard / SSN-invoer wordt gedetecteerd via type + autocomplete + name en vervangen door *** voordat ze de opslag raken. Bytes verlaten nooit de pagina.
C2 →Een aangepaste shadow-selector-soort codeert het pad als { host, inner }-segmenten; de resolver loopt shadowRoot.querySelector op elke grens, zodat Web Components eerste klas zijn.
C3 →Wanneer een flow een nieuwe tab opent — afdrukvoorbeeld, OAuth, offerte-generatie — volgt de opname via chrome.tabs.onCreated. Afspelen creëert de tab opnieuw via chrome.tabs.create.
C4 →Een dragstart → dragover → drop-keten met gedeelde DataTransfer wordt samengevoegd tot één drag-stap (bron + doel + waargenomen typen). Geen broze pixelcoördinaten.
D1 →Een losse "k" is tekstinvoer-ruis; met metaKey: true is het een Cmd-K-snelkoppeling. De opnemer houdt de combo, gooit de ruis weg, behoudt de modifier-toestand voor afspelen.
D3 →change vuurt nooit op contenteditable. We haken input + compositionend, debouncen 300 ms en zenden één change-stap met de uiteindelijke innerText — zelfde vorm als een tekstveld.
D4 →Elke klik-stap wordt verrijkt met comboboxContext (optie-tekst, root-selector); als directe klik bij afspelen faalt, typt de fallback de tekst, ArrowDown tot aria-activedescendant overeenkomt, dan Enter.
D6 →Dertien van zestien. Plus vier composite-fixtures — Notion, Linear, Jira, Salesforce — die twaalf tot vijftien van deze technieken aaneenrijgen tot één samenhangende flow. Naar de playground →
Elke maandagochtend opent een operations-engineer bij een kleine leverancier hetzelfde portaal, klikt op Nieuwe inkooporder, plakt een SKU uit een CSV, typt een aantal en klikt op Verzenden. Dan opnieuw. En opnieuw. Tweehonderd rijen per week, elke week, al veertien maanden. Een vijf-minuten ritueel, herhaald tot het werkblad eindigt.
Precies het soort taak waarvoor een opnemer wordt aangeprezen — en precies het soort waarop de meeste opnemers struikelen. Het leveranciersportaal roteert Tailwind-hashklassen bij elke deploy. De Verzenden-knop zit in een dynamische tabelrij die na elke opslag opnieuw rendert. Het auth-cookie verloopt om twaalf uur. Selenium-scripts tegen deze pagina overleven gemiddeld twee weken en beginnen dan stilletjes te falen.
De engineer zet de extensie vast in de werkbalk, opent het portaal, klikt op Opname starten en voert de taak exact één keer uit. Acht klikken, twee getypte waarden, één verzenden. Het zijpaneel toont een live feed van events terwijl ze gebeuren — inclusief ruis: scroll, focus, blur, per ongeluk over het help-icoon bewogen muis. Drieëntwintig events vastgelegd in 4,6 seconden.
main.example.p4
De engineer plaatst de resulterende markdown in ~/.claude/skills/create-purchase-order/SKILL.md en typt één zin tegen Claude Code. De agent vindt de skill op naam, lost de precondition op (het opgeslagen cookie is geldig tot twaalf uur), itereert over de vijftig rijen in het CSV en rapporteert terug. Drie minuten elf seconden later is het werk gedaan. Niemand keek toe.
Gratis tijdens de open beta. Geen account, geen upload, geen telemetrie. De hele bundel is 4,5 MB; opnames leven op jouw machine tot jij ze exporteert.
