denysosadchyi

Comments Harness — Design skill for Claude Code

Design community

Visual feedback loop for agent-driven frontend work: annotate an element in your dev build, an agent fixes it.

How to install Comments Harness

This entry records only its repository, not the path inside it, so there is no exact command to give. Open denysosadchyi/comments-harness and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Comments Harness does

Visual feedback loop for agent-driven frontend work: annotate an element in your dev build, an agent fixes it.

Alternatives in Design

Grade — Generate a shareable HTML "Design Report Card" — letter grade, 8 dimensions, evidence (palette, type, rhythm) 3.6k ★
Drawbridge — Design editor for Claude Code and Cursor 960 ★
Design Expert — Apply expert UX/UI design thinking to design, redesign, enhance, or fix any interface element with meticulous 348 ★

README

Comments Harness

Visual comments on a frontend, fixed by agents.

You open your own dev server, point at the element that bothers you, write one sentence about what is wrong with it — and a minute later the fix is in the code. Between those two moments there is no ticket, no "the thing in the card, top right", no screenshot with an arrow drawn on it.

The note carries the context by itself: the route it was taken on, a CSS selector for the element, the chain of React component names above it, the element's geometry, and a raster shot of the block. So the agent that picks the note up does not go looking for the place — it already knows which file family to open and what the user was looking at.

Written for the case where the person reviewing the UI and the person fixing it are not the same actor: a human looks, an agent edits, and the note is the whole handoff.

The docs in `docs/` are in Ukrainian and stay that way; this page says in English what each of them covers.

Parts

Six processes and files, zero npm dependencies, two HTTP ports.

Part	File	What it does
Overlay	`overlay/annotator.tsx`	crosshair, popover, markers and the comment thread, rendered inside your dev build
Gap measuring	`overlay/measure-gap.ts`	the spacing math behind gap notes; `node overlay/measure-gap.test.mjs` checks it against a stub DOM, no browser
Notes server	`server/notes-server.mjs`	:4747, owns the open notes, long-polls for the watchdog
MCP bridge	`mcp/notes-mcp.mjs`	seven tools an agent uses to read, claim and close notes
Watchdog	`watchdog/dispatcher.mjs`	waits on the note long-poll and on the rework queue, and launches an executor (`claude -p`) per task
Review page	`review/fixlog.html`	table of open and closed work, verdicts, rework history
Verdicts server	`server/fixlog-server.mjs`	:4748, verdicts and rework iterations, deliberately separate from notes
Browser config	`client/endpoints.js`	the o