Link Triage Explainer · GitHub repo

make-pages-interactive

What it is: a Claude Code skill that turns a directory of static HTML artifacts into a local inline-feedback surface. You open the artifact through a tiny server, highlight text or click elements, leave comments, and Claude reads a local inbox to edit the HTML in response.

Source: github.com/paraschopra/make-pages-interactive Primary language: JavaScript Other code: Python + CSS License: MIT Observed: 117 stars · 17 forks · 1 open issue Repo created: 2026-05-26

Bottom line for Mission Control

This is highly relevant to Ananth’s Dab/Claude artifact loop. Mission Control already produces rich standalone HTML pages for research, design mocks, project pages, and plan reviews; this repo provides a lightweight pattern for letting Ananth comment directly on those pages instead of sending separate chat notes like “fix the third card” or “expand this diagram.”

Best use: not as permanent production UI inside Notice Board, but as a temporary review mode for individual generated artifact folders: launch, comment, let Claude patch, then remove the feedback layer before final commit.

How it works

1 · Inject
scripts/inject.py adds /lib/feedback.css and /lib/feedback.js to target HTML pages.

→

2 · Serve
lib/server.py serves the artifact directory and exposes POST /feedback.

→

3 · Comment
Browser widget captures text selections, element clicks, and page-level notes.

4 · Inbox
Comments append to feedback/inbox.jsonl with selectors, snippets, timestamps, and stable ids.

→

5 · Agent edits
Claude reads the inbox, changes HTML, and writes feedback/history.json mapping comments to changes.

→

6 · Walkthrough
The page polls history, reloads, and highlights what changed.

Repo/source map

`lib/feedback.js`

Main client runtime. Handles comment UI, text-selection popup, element-selection mode, localStorage state, posting batches, polling feedback/history.json, reload banners, and tour/walkthrough behavior.

Largest file in repo: ~42 KB JavaScript.

`lib/server.py`

Stdlib-only HTTP server. Serves the artifact directory, serves /lib/* from the skill itself, accepts POST /feedback, writes feedback/inbox.jsonl, and auto-shuts down on parent death or idle timeout.

Useful because it avoids Node/npm as a runtime dependency.

`lib/feedback.css`

Styles for launcher, panel, selection overlays, editor, toast, reload banner, and change-tour affordances.

`scripts/inject.py`

Idempotent tag injection/removal over *.html; optional recursive mode; creates feedback/ files.

`SKILL.md`

Agent-facing instructions: trigger phrases, setup/stop/remove/update flows, and how to process a feedback batch.

Install and use path

git clone https://github.com/paraschopra/make-pages-interactive \
  ~/.claude/skills/make-pages-interactive

After that, Claude Code should auto-discover the skill under ~/.claude/skills/. In a directory containing HTML artifacts, say:

Make these pages interactive.

Claude is expected to inject the feedback layer, start a local server around port 5050, report the URL, and monitor feedback/inbox.jsonl.

To strip the feedback layer before preserving a clean artifact:

python ~/.claude/skills/make-pages-interactive/scripts/inject.py ./your-dir --remove

Why it matters for Ananth’s workflow

1 · Better review loop for rich HTML artifacts

Notice Board work often produces pages with dense sections, diagrams, cards, and tables. Inline comments give Ananth a precise pointer: the artifact itself becomes the feedback surface.

2 · Reduces chat ambiguity

Instead of “fix the timeline bit,” a comment batch can include the exact selector, surrounding snippet, and user wording. That is cleaner input for Claude Code and cheaper for Dab to verify.

3 · Fits artifact-first planning/research

For approval pages, research maps, design drafts, and project retrospectives, Ananth can mark up a page like a doc review, then let Dab/Claude turn the marks into edits.

4 · Local-first and low dependency

The server is Python stdlib-only, stores comments locally, and can run on the Pi or Mac without a hosted review SaaS.

Suggested Mission Control integration pattern

Mode	What to do	Why
Temporary review mode	Copy or generate the target artifact into a review folder, inject feedback, start server, let Ananth comment, process batch, then remove feedback tags.	Preserves the canonical static artifact and avoids shipping review JS into the live Notice Board.
Claude Code worker loop	Have the worker read `feedback/inbox.jsonl`, edit only the scoped artifact, append `feedback/history.json`, and report limitations.	Keeps Dab as verifier while letting Claude use exact inline feedback as execution input.
Notice Board artifact pages	Use for `projects/.html`, `planning/.html`, or `items/<slug>/explainer.html` review copies.	These are exactly the long static HTML pages where inline comments are highest leverage.
Not recommended as default	Do not inject into the live `index.html` or generated Notice Board pages permanently.	The live dashboard should stay deterministic, simple, and generated from `brain.json`/`render.py`.

Maturity and risk notes

Very young repo: created and pushed on 2026-05-26 with two visible commits when inspected. Treat as promising but early.
No package manager: easy to inspect and run, but also means there is no formal release/versioning mechanism beyond git pulls.
Server security: intended for local review. Do not expose the feedback server publicly; it accepts write-like POSTs and serves local artifacts.
Generated HTML hygiene: injected tags are absolute /lib/* dependencies. Remove them before committing clean static artifacts unless the review mode itself is the deliverable.
Selector reliability: comments rely on generated stable ids/selectors and snippets. If Claude heavily rewrites the page before processing a batch, anchors may become stale.
Hermes skill gap: this is a Claude Code skill format, not a Hermes skill out of the box. For Dab/Hermes usage, either install it for Claude Code or port the core workflow into a Hermes/Notice Board-specific review helper.

Practical next move

If Ananth likes this direction, the useful experiment is small:

Install the skill under ~/.claude/skills/make-pages-interactive on the Mac or Pi where Claude Code runs.
Pick one non-sensitive generated artifact page, preferably a planning or research HTML page.
Launch review mode locally and leave 3–5 inline comments.
Have Claude Code process the feedback with a strict “edit only this HTML file” scope.
Remove the feedback layer, compare diff quality, and decide whether to formalize this as a Dab review workflow.

Source limitation: this explainer used the public GitHub API/raw files for README, SKILL.md, file tree, and core source files. It did not run the server or perform an interactive browser trial.