patch-markannotations that compile to prompts

Point at an element, write a comment, hand your AI coding agent a structured prompt — selector, position, text, feedback.

Live demo

Getting started

npm

Point, don't describe

Hover any element, click to select, write feedback. The agent gets the CSS selector, position, and visible text — not a screenshot and a guess.

Copy as prompt

One click exports structured Markdown ready to paste into Cursor, Claude Code, or any agent.

Store adapter

localStorage out of the box; implement a tiny interface to stream annotations to your own backend where the agent reads them.

Zero dependencies

A single ESM file, ~11 KB gzipped. No framework lock-in. One script tag on any page.

Access control, optional

Token-based lock for shared staging URLs — sharing links carry the token, the address bar stays clean.

Resolve lifecycle

Annotations carry open / resolved status; watch the feedback loop close in real time as the agent fixes each item.

Quick start

html

<script type="module" src="https://unpkg.com/patch-mark"></script>
<patch-mark visible></patch-mark>

That's it — click the floating button, hover an element, click to select, write your comment. Read the getting started guide for backends, theming, and framework integration.