Show HN: Claude Code plugin to draw feedback and send it back into the session

tom29483294941 pts0 comments

GitHub - tomreinert/claude-annotate: Claude Code plugin: draw on a live frontend in the Playwright browser, annotated screenshot flows back into the session. Local, no cloud. · GitHub

/" data-turbo-transient="true" />

Skip to content

Search or jump to...

Search code, repositories, users, issues, pull requests...

-->

Search

Clear

Search syntax tips

Provide feedback

--><br>We read every piece of feedback, and take your input very seriously.

Include my email address so I can be contacted

Cancel

Submit feedback

Saved searches

Use saved searches to filter your results more quickly

-->

Name

Query

To see all available qualifiers, see our documentation.

Cancel

Create saved search

Sign in

/;ref_cta:Sign up;ref_loc:header logged out"}"<br>Sign up

Appearance settings

Resetting focus

You signed in with another tab or window. Reload to refresh your session.<br>You signed out in another tab or window. Reload to refresh your session.<br>You switched accounts on another tab or window. Reload to refresh your session.

Dismiss alert

{{ message }}

tomreinert

claude-annotate

Public

Notifications<br>You must be signed in to change notification settings

Fork

Star

main

BranchesTags

Go to file

CodeOpen more actions menu

Folders and files<br>NameNameLast commit message<br>Last commit date<br>Latest commit

History<br>30 Commits<br>30 Commits

.claude-plugin

.claude-plugin

annotate-plugin

annotate-plugin

.gitignore

.gitignore

GUIDE.md

GUIDE.md

README.md

README.md

View all files

Repository files navigation

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<br>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<br>--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.<br>Many moving parts though, so I'm curious how it works in different enviroments.

Looking forward to feedback and issues!

About

Claude Code plugin: draw on a live frontend in the Playwright browser, annotated screenshot flows back into the session. Local, no cloud.

Resources

Readme

Uh oh!

There was an error while loading. Please reload this page.

Activity

Stars

stars

Watchers

watching

Forks

forks

Report repository

Releases

No releases published

Packages

Uh oh!

There was an error while loading. Please reload this page.

Contributors

Uh oh!

There was an error while loading. Please reload this page.

Languages

JavaScript<br>98.2%

Shell<br>1.8%

You can’t perform that action at this time.

claude plugin annotate feedback session playwright

Related Articles