Page Comments, a skill for Claude Code
Page Comments, a skill for Claude Code

A comment mode for hover states.

Topic

Tools & Plugins

Tags

  • Claude Code
  • Open Source
  • AI

Built with

Page Comments, a skill for Claude Code

Okay so imagine this. I'm building Canopy, and there's a row in the parks list that looks a bit off when I hover over it. Too faint. Tiny thing.

So I go to point Claude at it. There's a tool for that. You hit "select", then you click the thing on the page. Easy. Except the second I moved my mouse over to hit "select", the hover was gone.

Like, of course it was. It's a hover. It only exists while my mouse is sitting on it. I was trying to take a photo of something that disappears every time I reach for the camera.

So I asked Claude a small question. How do I keep a hover on screen?

And then it hit me. In Figma I move my cursor around, every layer lights up, I click one and leave a comment. That's the whole workflow. So why can't I do that on the REAL page? And why can't those comments go straight to Claude?

By the end of the evening, I could.

Point, click, complain

It's called page-comments, and it's a skill for Claude Code. A skill is basically a little add-on. You set it up once and then use it everywhere.

Here's how it goes. I press Shift+C on any page. A thin yellow frame shows up around the whole thing, which is how I know comment mode is on. Then I just move my mouse. Whatever is under it gets outlined and named, like layers in a design tool.

Comment mode on Canopy: a row in the parks list is outlined, named and held in its hover state

And look at that row. It's hovered. It STAYS hovered. The problem that started this whole mess basically solved itself. Comment mode starts from a key press and not a click, so whatever I'm hovering when I press it just stays like that. I can click it like anything else. My first real note was on a hover state.

Then I click and type what's bugging me.

A note box open on the hovered row, with a comment being typed

Every note leaves a little numbered pin behind. Click a pin and the note opens back up, so I can edit it or delete it. And when I'm five comments deep and can't remember what I already said, the count in the bar opens a list of all of them.

Four numbered pins left on different parts of the page

Then I hit Send to Claude. The notes land in my Claude Code chat, each one with the thing it's about, and Claude starts working through them.

And each note carries a bit of luggage with it.

What travels with a note

Why

The thing I clicked, and its text

So Claude knows which "this" I mean

The page and the window size

Because "it's broken" on a phone and "it's broken" on a laptop are two different problems

Light or dark theme

Same reason

Whether it was a hover state

The whole reason I'm here

On React projects, the component it belongs to

That's how Claude finds the code behind it

No screenshots get attached, by the way. It's just my words and those details. Turns out that's enough.

Wait, a web page can't talk to Claude

Here's where I had to stop and figure something out. A web page can't message Claude. Like, at all. It's sealed off from the app around it. So I've got this lovely Send button, and it has nowhere to send anything.

The answer is a tiny listener that Claude runs on my own laptop. Imagine a mailbox sitting right outside the page. The Send button drops my notes in the mailbox, and the mailbox hands them to my Claude session. It only takes mail from my own machine, and only with a private token.

And nothing gets added to the project I'm reviewing. The whole thing sits on top of whatever page is open in the browser. So it works on Canopy, on a staging site, on anything.

It worked. It also looked wrong.

Fun fact. This started life as a tool inside the Canopy project. Then I went, hold on, I want this on EVERY project. So that same evening it got rebuilt as its own standalone thing.

And the first version? It worked, and it looked wrong. So I did what I do. I said what bothered me, one thing at a time.

  • The frame was too thick. It went thin.

  • The bar floated in the middle. It went edge to edge and took on Claude's own colours.

  • There was a Done button nobody needed. Deleted, along with a bunch of labels.

  • Pins were just decoration. Now you can click them.

  • Clear got an Undo, for when I wipe all my notes by mistake.

At one point the buttons ran right off the edge of the bar in a narrow window. I said so. It got fixed. Now it fits on a phone.

Phone width: comment mode with a note box open and the bar fitting the narrow screen

That loop is the bit I keep coming back to. I wasn't writing a spec. I was reacting to something in front of me, the way I would with a designer sitting next to me.

What it can't do (yet)

The thing

What happens

Anything drawn inside a canvas, like Canopy's map

It counts as one big element. I comment on the whole map and describe the spot.

Content embedded from another site

Can't reach it

Really locked-down sites

Some of them block it

Reloading the page

Comment mode switches off. My notes are kept though.

Also, real talk. So far it's only been used by me, in Claude Code's own browser. I built a bookmark so it can run in Chrome and Arc too, and I still need to put that through its paces.

It's up on GitHub if you want to try it. One line and it's yours. Fair warning, you'd be tester number two.

git
git
git

But I'm keeping it. Most of my feedback on a build is "this, here, is slightly off". And typing that into a chat means describing where "here" is.

Now I just point.

Keep reading

Product Design
Canopy

Mapping fall colours across Canada.

Oct 5, 2026
Product Design
Canopy

Mapping fall colours across Canada.

Oct 5, 2026
Tools & Plugins
Lens Effect

Building a sneaky glitch lens in Framer.

Oct 9, 2026
Tools & Plugins
Lens Effect

Building a sneaky glitch lens in Framer.

Oct 9, 2026

© 2026 · Maarib Shah

© 2026 · Maarib Shah

© 2026 · Maarib Shah