cc-htmlfeedback

KO | EN

gitlite — search

#python #react #typescript #go #rust #linux #docker #macos #awesome #cli #kubernetes #ios #mcp #openai

cc-htmlfeedback

(★ 13)

The tool for interactively reviewing an HTML plan for Claude Code

cc-htmlfeedback Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# cc-htmlfeedback

A zero-dependency, in-page feedback tool. **Highlight text on the page to leave a comment** - that's how every note is made - then either copy the structured feedback or let Claude Code fix it live.

## Two modes

1. **Simple (start here).** Chrome extension only. Highlight text, write notes, **copy** the structured feedback and paste it wherever you want. No server, no setup beyond loading the extension.
2. **Advanced (live fixes).** A Claude Code plugin serves your HTML page and turns each comment into a ticket Claude applies and verifies on the fly - the page updates in place, no reload.

Get the simple mode working first, then add the plugin when you want live fixes.

## Features

- **Highlight to comment.** Select text -> popover. `Enter` = comment, `Backspace` on an empty box = strikethrough. Select blank space to mark "something's missing here".
- **Structured side panel.** Every note captures its section heading, the quoted text, surrounding context, and your note. Dock it left/right; undo/redo with `cmd/ctrl+Z`.
- **One-click export.** Copy clean, structured feedback (with the page URL) to paste anywhere.
- **Live fixes with Claude Code.** Connect to a Claude Code session and your comments become a work queue: comment -> Claude edits the source -> the page updates in place, no reload.

## Simple mode: Chrome extension

The widget loads as a Chrome extension - this is all you need for copy-paste feedback.

### Load the extension
1. Open `chrome://extensions`.
2. Turn on **Developer mode** (top-right).
3. Click **Load unpacked** and select the `extension/` folder.
4. Pin the icon, then click it on any page to show/hide the widget.

> Chrome blocks injection on internal pages (`chrome://`, the Web Store, etc.) - that's a browser restriction.

### Try it first
Open `playground_file.html` in your browser and load the extension to play with every feature on a sample document.

## Advanced mode: live fixes with Claude Code

Once the extension works, add the plugin to skip the copy-paste: comments become tickets that Claude Code applies and verifies for you.

Install the plugin once (it bundles the skill plus the server it runs):

```
/plugin marketplace add leetwito/cc-htmlfeedback
/plugin install cc-htmlfeedback@cc-htmlfeedback
```

Then, in your project's Claude Code session:

```
/cc-htmlfeedback                          # serve the current dir on :4317
/cc-htmlfeedback http://localhost:5173    # or proxy your existing dev server (keeps HMR)
/cc-htmlfeedback stop                     # stop the loop + server
```

Highlight anything, write what you want changed, submit - then watch the ticket go `todo -> in-progress -> done` as Claude fixes it and verifies in a separate tab. Open several pages at once and they're fixed concurrently. Git is your undo.

## Build

`feedback-widget.html` is the single source of truth for the widget. `build.js` regenerates the
Chrome-extension widget and assembles the bundled plugin (`plugins/cc-htmlfeedback/`):

```bash
npm run build     # build extension/feedback-widget.js + assemble plugins/cc-htmlfeedback/
npm run check     # verify all outputs are in sync (no writes; non-zero on drift)
```

## License

MIT - see [LICENSE](LICENSE).

cc-htmlfeedback

cc-htmlfeedback Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

cc-htmlfeedback

cc-htmlfeedback Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README