Skill Recorder is a Chrome extension that watches you walk through a browser task once — then writes a SKILL.md, a plain-markdown spec that Claude Code (or any agent on the browse CLI) replays without selectors, glue code, or babysitting.
What we ship is a small Chrome MV3 extension and a 4-KB distillation pipeline. The recorder taps into chrome.debugger for DOM-level fidelity; the distiller runs entirely in the service worker; the replay reads the resulting SKILL.md through the browse CLI. No server. No glue code.
A per-frame port in the content script forwards every DOM event to the service worker. Shadow DOM and same-origin iframes are pierced transparently.
Six small passes turn a noisy event log into a deterministic spec. Auto-parameterization only fires above 0.7 confidence; below that the recorder asks rather than guesses.
The browse CLI reads SKILL.md as plain markdown — no schema, no runtime, no escape hatches. Every step is auditable.
The browser is full of recorder traps — hashed classes, lazy modals, shadow DOM, cross-tab flows, IME composition, drag-and-drop. Each row below is a real fixture in the playground; click any of them to record against it yourself.
Tailwind-style classes such as btn__primary--ab3f9c rotate on every deploy; the resolver falls through 6 tiers (testid → id → aria → text → css → xpath) so a re-hashed button still picks.
A2 →Six rows with literally identical "Pick" buttons — only position distinguishes them. We anchor each click by fingerprintIndex so the right row is clicked, even after the list reorders.
A3 →"Continue" / "继续" / "Weiter" all map to the same data-i18n-key="action.continue". The recorder prefers locale-independent attributes so a skill recorded in English replays under Chinese.
A4 →pushState and hashchange transitions are tracked without reload; replay waits for the new content to mount instead of probing an empty container.
B1 →The Confirm button doesn't exist when the trigger is clicked. elementVisible polls until the target shows up before dispatching the next step — no flaky timeouts.
B3 →all_frames: true injects per-frame; actions are tagged with the originating frameId, then re-resolved by URL across re-renders so a stale frameId never blocks replay.
C1 →password / phone / credit-card / SSN inputs are detected by type + autocomplete + name and replaced with *** before they ever hit storage. The bytes never leave the page.
C2 →A custom shadow selector kind encodes the path as { host, inner } segments; the resolver walks shadowRoot.querySelector at each boundary, so Web Components are first-class.
C3 →When a flow opens a new tab — print preview, OAuth, quote generation — recording follows via chrome.tabs.onCreated. Replay re-creates the tab through chrome.tabs.create.
C4 →A dragstart → dragover → drop chain with a shared DataTransfer coalesces into one drag step (source + target + types observed). No brittle pixel coordinates.
D1 →A bare "k" keypress is text-input noise; with metaKey: true it's a Cmd-K shortcut. The recorder keeps the chord and drops the noise, preserving modifier state for replay.
D3 →change never fires on contenteditable. We hook input + compositionend, debounce 300ms, and emit one change step with the final innerText — same shape as a text input.
D4 →Each click step is enriched with comboboxContext (option text, root selector); if the direct click fails on replay, the fallback types the text, ArrowDown until aria-activedescendant matches, then Enter.
D6 →Thirteen of sixteen. Plus four composite fixtures — Notion, Linear, Jira, Salesforce — that chain twelve to fifteen of these techniques into a single coherent flow. See the playground →
Every Monday morning an operations engineer at a small supplier opens the same portal, clicks New purchase order, pastes a SKU from a CSV, types a quantity, and clicks Submit. Then they do it again. And again. Two hundred rows a week, every week, for the last fourteen months. It is a five-minute ritual repeated until the spreadsheet ends.
This is the kind of task that gets a recorder pitched at it — and exactly the kind of task most recorders fail at. The supplier portal rotates Tailwind class hashes on every deploy. The submit button lives inside a dynamic table row that re-renders after each save. The auth cookie expires at noon. Selenium scripts written against this page survive two weeks on average, then quietly start failing.
The engineer pins the extension to their toolbar, opens the portal, clicks Start recording, and performs the task exactly once. Eight clicks, two typed values, one submit. The side panel shows a live feed of events as they happen — including the noise: scroll, focus, blur, accidental mousemoves over the help icon. Twenty-three events captured in 4.6 seconds.
main.example.p4
The engineer drops the resulting markdown into ~/.claude/skills/create-purchase-order/SKILL.md and types a single sentence into Claude Code. The agent finds the skill by name, resolves the precondition (the saved cookie is still valid until noon), iterates over the fifty rows in the CSV, and reports back. Three minutes eleven seconds later, the work is done. No human watched it run.
Free during the open beta. No account, no upload, no telemetry. The entire bundle is 4.5 MB; recordings live on your machine until you choose to export them.
