Browser Annotations
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.
  
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 |
Install (30 seconds)
Not on the Chrome Web Store yet, so load it by hand:
- Download this repo (green Code button → Download ZIP, then unzip) — or
git cloneit. - Open
chrome://extensionsand turn on Developer mode (top-right toggle). - Click Load unpacked and pick the
extension/folder — that subfolder, not the repo root. - P
Related Skills
Agency Agents
A complete AI agency at your fingertips - From frontend wizards to Reddit community ninjas, from whimsy inject
AI Awesome Llm Apps
100+ AI Agents, Agent Skills and RAG Apps - Free and Open Source.
AI Firecrawl
🔥 The API to search, scrape, and interact with the web for AI
AI Artifacts Builder
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web tech
AI Headroom
Compress tool outputs, logs, files, and RAG chunks before they reach the LLM. 20% fewer tokens for coding agen
AI CrewAI
Framework for orchestrating role-playing, autonomous AI agents. By fostering collaborative intelligence, CrewA
AI