Browser Annotations banner
kuzmany kuzmany

Browser Annotations

AI community

Description

Visual web annotation overlay → markdown for AI coding agents (Claude Code, Cursor). CDP-injected, no extension, no MCP.

Installation

This entry records only its repository, not the path inside it, so there is no exact command to give. Open the source below and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

README

browser-annotations

**Point at a page. Say what's wrong. Paste it to your AI coding agent.**

Click an element to note a **design** change. Select text to note a **content** question. Copy → paste. Every note carries the exact anchor your agent needs to find that thing in your source.

No account. No server. Nothing leaves your browser.

![License: MIT](https://img.shields.io/badge/License-MIT-10A37F.svg) ![Manifest V3](https://img.shields.io/badge/Chrome-MV3-555.svg) ![Works with](https://img.shields.io/badge/works%20with-Claude%20Code%20·%20Cursor%20·%20Codex-10A37F.svg)

Numbered green pins on a live page next to the annotations panel

The problem

Your agent writes UI it can't see, and writes content it can't fact-check. So you squint at the browser and type a paragraph back — *"the CTA's too big, move it left, wrong green"*, *"where does that 34% come from?"* Slow, vague, and the agent still has to guess which element or sentence you meant.

**Point at the real page instead.** Two gestures, no mode to switch:

Gesture Note kind For Anchored by
Click an element 🟢 Design "make this green", "move it left" source file:line (dev build), else data-testid / id / text
Select a run of text 🔵 Content "verify this number", "expand this" the quote itself + surrounding context + heading path
Highlighted sentences with review questions, plus one design note, in the annotations panel

Install (30 seconds)

Not on the Chrome Web Store yet, so load it by hand:

  1. Download this repo (green Code button → Download ZIP, then unzip) — or git clone it.
  2. Open chrome://extensions and turn on Developer mode (top-right toggle).
  3. Click Load unpacked and pick the extension/ folder — that subfolder, not the repo root.
  4. P