Dom Narrator — Development skill for Claude Code

DOM Narrator

[](https://www.patreon.com/AndersBjarby)

A Chrome extension for **showing, not telling** an AI coding assistant what to change on a webpage.

You click elements on the page, drag them with a handle, and narrate what you want — all in one flow. The extension builds a grounded, timestamped transcript that resolves "this", "that", and "here" against actual DOM selections. It then refines that messy session into a clean, copy-pastable prompt for Claude Code (or any AI coding assistant).

CC BY 4.0 — Anders Bjarby

---

Why

LLMs are great at code but bad at pronouns. *"Move this button next to that thing and make it green"* is unambiguous to a human looking at the page, but impossible for an LLM staring at HTML. DOM Narrator solves the grounding problem by recording **what you pointed at** alongside **what you said** — every "this" gets a stable CSS selector attached.

---

Install

1. Clone the repo: git clone https://github.com/fltman/dom-narrator.git
2. Open Chrome → chrome://extensions
3. Toggle Developer mode (top-right)
4. Click Load unpacked → select the cloned dom-narrator/ folder itself (the one containing manifest.json at its root — Chrome's "unpacked" just means raw extension files, not a subfolder named unpacked/).
5. Pin the extension to the toolbar

---

Use

1. Open any webpage you want to redesign.
2. Click the DOM Narrator toolbar icon → the panel appears bottom-right (draggable by its title bar).
3. (Optional) Paste an OpenAI API key into the panel — needed for OpenAI Realtime transcription and for prompt refinement.
4. Click Start mic:
   • The mic starts recording (Web Speech by default, or OpenAI Realtime if selected).
   • Pick mode auto-engages — every click on the page selects an element.
5. Talk naturally. Click elements as you reference them. Drag the green h