🔓 unclaimed — this page was auto-generated from GitHub. Are you the creator?
Claim this page →
claude-annotate
Claude Code plugin: draw on a live frontend in the Playwright browser, annotated screenshot flows back into the session. Local, no cloud.
git clone https://github.com/tomreinert/claude-annotate
Claude Annotate
Draw your feedback onto your frontend and send it straight to Claude.
🧪 Work in progress, I'm still testing this as I build. Feedback welcome!
Install
You need the Playwright MCP connected:
claude mcp add playwright npx @playwright/mcp@latest
Then install the plugin:
claude plugin marketplace add tomreinert/claude-annotate
claude plugin install annotate@claude-annotate --scope user
Use
Launch Claude Code with the channel turned on:
claude --dangerously-load-development-channels plugin:annotate@claude-annotate
- Type
/annotate. Claude launches a Playwright browser with the annotation toolbar. - Draw your feedback and hit Send. Claude makes the changes.
- Profit!
Keep drawing and sending as often as you like. Say "stop reviewing" when you are done.
See the full guide for the toolbar shortcuts and FAQ (including why the
--dangerously-load-development-channels flag is safe and how to skip it).
Notes
This works quite well in my local setup with an app running on localhost:3000. Many moving parts though, so I'm curious how it works in different enviroments.
Looking forward to feedback and issues!
// compatibility
| Platforms | cli, web |
|---|---|
| Operating systems | — |
| AI compatibility | claude |
| License | — |
| Pricing | open-source |
| Language | JavaScript |
// faq
What is claude-annotate?
Claude Code plugin: draw on a live frontend in the Playwright browser, annotated screenshot flows back into the session. Local, no cloud.. It is open-source on GitHub.
Is claude-annotate free to use?
claude-annotate is open-source, so it is free to use.
What category does claude-annotate belong to?
claude-annotate is listed under plugins in the Claudeers registry of Claude-compatible tools.
// embed badge
[](https://claudeers.com/claude-annotate)
// retro hit counter
[](https://claudeers.com/claude-annotate)
// reviews
// guestbook
// related in Claude Plugins
🔓A single CLAUDE.md file to improve Claude Code behavior, derived from Andrej Karpathy's observations on LLM coding pitfalls.
🔓Claude Code is an agentic coding tool that lives in your terminal, understands your codebase, and helps you code faster by executing routine tasks, explainin…
🔓"CLI-Anything: Making ALL Software Agent-Native" -- CLI-Hub: https://clianything.cc/
🔓A Claude Code plugin that shows what's happening - context usage, active tools, running agents, and todo progress