Skip to content

wiebekaai/browser-annotations

Repository files navigation

Browser Annotations

Browser Annotations is a Chrome DevTools extension to send feedback to your coding agent.

Select an element, add feedback, and use the skill to have your agent work on it live.

Install

Add to Chrome

npx skills add wiebekaai/browser-annotations

Usage

  1. Start the /browser-annotations skill
  2. Select an element in the Chrome DevTools
  3. Add your feedback in the Feedback tab (drag this tab to the left so it's easily accessible)
  4. Use Add to batch annotations. Annotations persist per website, so your feedback can span multiple pages
  5. Hit Send to send to your coding agent, or Copy to copy as markdown

Tip

Copy an element's context or your feedback at any time with X / X. Handy for quick sharing.

Features

  • Annotate elements — Select an element and write your feedback
  • Works anywhere — Annotate any website from your Chrome DevTools, no project setup required
  • Live agent collaboration — Send feedback directly to your coding agent
  • Copy as markdown — Copy an element's context or your feedback at any time
  • Full context — Includes an element's selector, position, size, viewport, and device info
  • Attach screenshots — Optionally include a screenshot of the selected element
  • Source detection — Links elements to React, Svelte, and Solid source code for faster, more accurate edits
  • Batch annotations — Annotate elements across multiple pages and send them as one prompt

Keyboard shortcuts

Action Shortcut
Add Enter
Submit Enter
Attach screenshot .
Copy current X
Copy all X
Clear current K
Clear all K
Cancel Esc

Example output

# Feedback

Adjust our landing page

## 1. `section.text-foreground\/70.space-y-4.\*\:max-w-\[70ch\]`

Make this text 12px

- **Page:** [http://localhost:5173/](http://localhost:5173/)
- **Device:** `Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Safari/537.36`
- **Viewport:** 974×598
- **Device pixel ratio:** 2
- **Position:** X 24, Y 184
- **Size:** 672×232
- **Source:** [`src/routes/+page.svelte:24`](src/routes/+page.svelte)

## 2. `… > p:nth-of-type(1)`

Suggest a shorter sentence

- **Page:** [http://localhost:5173/](http://localhost:5173/)
- **Device:** `Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Safari/537.36`
- **Viewport:** 974×598
- **Device pixel ratio:** 2
- **Position:** X 24, Y 192
- **Size:** 672×40
- **Source:** [`src/routes/+page.svelte:27`](src/routes/+page.svelte)

## 3. `section.text-foreground\/70.space-y-4.\*\:max-w-\[70ch\]`

A bit more margin between paragraphs

![Screenshot](~/Downloads/screenshot-1.png)

- **Page:** [http://localhost:5173/](http://localhost:5173/)
- **Device:** `Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Safari/537.36`
- **Viewport:** 974×598
- **Device pixel ratio:** 2
- **Position:** X 24, Y 184
- **Size:** 672×232
- **Source:** [`src/routes/+page.svelte:24`](src/routes/+page.svelte)

About

A Chrome DevTools extension to send feedback to your coding agent

Resources

Stars

6 stars

Watchers

0 watching

Forks

Releases

No releases published

Packages

 
 
 

Contributors