Claude Annotate — Testing skill for Claude Code
Claude Code plugin: draw on a live frontend in the Playwright browser, annotated screenshot flows back into the session.
How to install Claude Annotate
This entry records only its repository, not the path inside it, so there is no
exact command to give. Open tomreinert/claude-annotate and copy the folder into
~/.claude/skills/, or the file into ~/.claude/agents/.
What Claude Annotate does
Claude Code plugin: draw on a live frontend in the Playwright browser, annotated screenshot flows back into the session. Local, no cloud.
Alternatives in Testing
- Webapp Testing — Test local web applications using Playwright for UI verification and debugging 94.1k ★
- Playwright — claude-plugins-official Browser automation, E2E testing, screenshots 29.4k ★
- Playwright — Automate real browser interactions for navigation, forms, and scraping 14.6k ★
README
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](https://playwright.dev/docs/getting-started-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](GUIDE.md) 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!
Related Skills
Claude Skill Playwright Browser
Claude Code skill: a background Playwright browser for screenshots (desktop/tablet/mobile), frontend health ch
Claudecode Skill HTML Screenshot
HTML → PC + Mobile side-by-side screenshot composer. A Claude Code skill that renders local HTML at desktop an
Screenshot Kit
Claude Code skill for automated screenshot & diagram generation. Browser capture + HTML-to-PNG pipeline using
QA Browser Jarvis
Cómo verificar Jarvis Workspace en browser real (Playwright + token) y correr todos sus tests. Usala antes de
Review UX Live
Live browser-walk UX review using the console-idiom rubric. Requires a browser MCP (Playwright, Chrome DevTool
Aios
Local-first AI agent bootstrap: Playwright Browser MCP + ContextDB for Codex CLI, Claude Code, Gemini CLI, and
Related Agents
Browser Pilot
Playwright browser automation — navigate URLs, screenshot, interact with UI, check accessibility, capture cons
Browser Verification Agent
Use this agent to perform single UI verification tests via Playwright MCP. This agent executes one test at a t
Local Review
Starts the local dev server, opens the browser, takes a screenshot, and waits for human approval before the ch