[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-79477":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":8,"htmlUrl":8,"language":9,"languages":8,"totalLinesOfCode":8,"stars":10,"forks":11,"watchers":12,"openIssues":13,"contributorsCount":14,"subscribersCount":14,"size":14,"stars1d":15,"stars7d":16,"stars30d":17,"stars90d":14,"forks30d":14,"starsTrendScore":13,"compositeScore":18,"rankGlobal":8,"rankLanguage":8,"license":19,"archived":20,"fork":20,"defaultBranch":21,"hasWiki":22,"hasPages":20,"topics":23,"createdAt":8,"pushedAt":8,"updatedAt":24,"readmeContent":25,"aiSummary":26,"trendingCount":14,"starSnapshotCount":14,"syncStatus":27,"lastSyncTime":28,"discoverSource":29},79477,"make-pages-interactive","paraschopra\u002Fmake-pages-interactive","paraschopra",null,"JavaScript",417,48,4,7,0,1,20,346,5.07,"MIT License",false,"main",true,[],"2026-06-12 02:03:54","# make-pages-interactive\n\nA Claude Code skill that turns any folder of static HTML pages into a **live commenting surface**. Highlight text, click an element, leave a note — the comment lands in a local inbox that Claude reads and responds to by editing the page. The page auto-reloads with a walkthrough of what changed.\n\nOriginally built for iterating on research artifacts (long HTML reports with plots, tables, explanations) but works for any folder of HTML: docs, design mocks, generated reports, prototype UIs.\n\n![Screenshot of make-pages-interactive in action](screenshot.png)\n\n---\n\n## How it works\n\n```\n                  ┌──────────────────┐\n   user highlights│   feedback.js    │   POST \u002Ffeedback\n   \u002F clicks  ───▶ │  (in every page) │ ───────────────┐\n                  └──────────────────┘                 ▼\n                                              ┌────────────────┐\n                  ┌──────────────────┐  poll  │   server.py    │\n   page reloads ◀─│   feedback.js    │ ◀───── │  (stdlib HTTP) │\n   with walkthru  └──────────────────┘history │                │\n                                              └───────┬────────┘\n                                                      │ append\n                                          ┌───────────▼────────────┐\n                                          │  feedback\u002Finbox.jsonl  │\n                                          └───────────┬────────────┘\n                                                      │ Monitor\n                                                      ▼\n                                          ┌────────────────────────┐\n                                          │  Claude (the agent)    │\n                                          │  edits HTML, appends   │\n                                          │  feedback\u002Fhistory.json │\n                                          └────────────────────────┘\n```\n\nThe skill is **just three pieces**:\n\n| File | Role |\n|------|------|\n| `lib\u002Ffeedback.js` | Client library injected into every page. Handles text selection, element selection, comment editor, page-reload walkthrough. |\n| `lib\u002Ffeedback.css` | Styles for the comment UI. |\n| `lib\u002Fserver.py` | ~250-line stdlib-only HTTP server. Serves the page directory, accepts comment POSTs, serves the lib\u002F files from `\u002Flib\u002F*`. Auto-shuts-down on parent death or 10 min of idle so it doesn't leak processes. |\n\nPlus glue:\n\n| File | Role |\n|------|------|\n| `SKILL.md` | What Claude Code reads to know when and how to invoke the skill. |\n| `scripts\u002Finject.py` | Idempotently injects (or removes) the two `\u003Clink>`\u002F`\u003Cscript>` tags in every `*.html` in a directory. |\n| `scripts\u002Fupdate.py` | `git pull --ff-only` inside the skill directory. |\n\n---\n\n## Install\n\n```bash\ngit clone https:\u002F\u002Fgithub.com\u002Fparaschopra\u002Fmake-pages-interactive \\\n  ~\u002F.claude\u002Fskills\u002Fmake-pages-interactive\n```\n\nThat's it. Claude Code auto-discovers any folder under `~\u002F.claude\u002Fskills\u002F` that contains a `SKILL.md`.\n\nUpdates are explicit:\n\n```bash\npython ~\u002F.claude\u002Fskills\u002Fmake-pages-interactive\u002Fscripts\u002Fupdate.py\n```\n\nOr just say \"update the make-pages-interactive skill\" in Claude Code.\n\n---\n\n## Usage\n\nInside any Claude Code session, say:\n\n> \"Make these pages interactive.\"\n\n(or any of: \"make this page interactive\", \"let me comment on this page\", \"add feedback to these pages\")\n\nClaude will:\n\n1. Inject the feedback library tags into every `*.html` in the current directory.\n2. Create `feedback\u002Finbox.jsonl` and `feedback\u002Fhistory.json`.\n3. Pick a free port (5050 by default, falls back if taken).\n4. Start the server in the background.\n5. Tell you the URL to open.\n6. Start monitoring the inbox so any comment you leave gets picked up immediately.\n\nOpen the URL. Comment away. Claude edits the page in response.\n\n### Removing the feedback layer\n\nTo get a clean static copy back (no `\u002Flib\u002F` dependencies in the HTML):\n\n```bash\npython ~\u002F.claude\u002Fskills\u002Fmake-pages-interactive\u002Fscripts\u002Finject.py .\u002Fyour-dir --remove\n```\n\nOr say \"remove the feedback layer from these pages.\"\n\n---\n\n## How the server shuts down\n\nThe server is designed to never leak — three ways it goes away:\n\n1. **Parent-process death** *(automatic, ~5–10 s)*. The server records its parent PID at startup and polls every 5 s. When the parent dies (e.g., you close the Claude Code window that launched it), the kernel reparents the server to PID 1 — the watchdog notices and calls `os._exit(0)`. Skipped if the server was started detached at launch (parent was already PID 1, e.g. `nohup`).\n\n2. **Idle timeout** *(automatic, default 10 min)*. The page polls `\u002Ffeedback\u002Fhistory.json` every ~4 s, so any open browser tab keeps the server alive. When no client requests have arrived for `--idle-timeout` seconds (default `600`), the server exits. Pass `--idle-timeout 0` to disable.\n\n3. **Manual stop**. Either:\n   - Say \"stop the feedback server\" in your Claude Code session — Claude runs `lsof -ti:5050 | xargs kill` (adjust the port if you used a non-default one).\n   - Or hit `Ctrl-C` in the terminal where the server is logging.\n\nYou generally don't need to think about this. The auto-shutdowns mean abandoned servers self-clean — close your Claude window and within ~10 s the port is free again.\n\n---\n\n## Comment types\n\nThe library supports three commenting modes:\n\n- **Text selection** — highlight any text, a popup offers \"comment on selection\".\n- **Element selection** — click the \"select element\" tool, then click an image, table, section. Comment is anchored to a stable selector.\n- **Page-level** — a floating button leaves notes that aren't tied to any specific element.\n\nEach comment carries a stable `cf_id`, a selector describing what was pointed at, the comment body, and a timestamp. The library batches comments client-side and submits as a single POST so Claude responds to a coherent set rather than firing on every keystroke.\n\n---\n\n## When Claude responds\n\nWhen you submit a batch:\n\n1. A \"processing…\" banner appears at the top of the page.\n2. Your tab title changes to `🔔 …` so you can see progress in a backgrounded tab.\n3. Claude edits the relevant HTML, appends an entry to `feedback\u002Fhistory.json` that maps your comment ids → the changes made.\n4. The page polls `history.json` every ~4 seconds, notices the new entry, and auto-reloads — preserving your scroll position.\n5. Post-reload, a walkthrough appears highlighting each changed region with the title Claude gave it. Press `R` to dismiss; the changes stay in the history sidebar.\n\n---\n\n## Repo layout\n\n```\nmake-pages-interactive\u002F\n├── SKILL.md              # Agent-facing skill spec\n├── README.md             # This file\n├── screenshot.png        # README screenshot\n├── LICENSE\n├── lib\u002F\n│   ├── feedback.js\n│   ├── feedback.css\n│   └── server.py\n└── scripts\u002F\n    ├── inject.py\n    └── update.py\n```\n\n---\n\n## Why this exists\n\nI kept building long HTML research reports and wanting to leave inline notes on them — \"expand this section\", \"this plot is misleading\", \"what about edge case X?\" — without breaking out of the page to write a separate to-do list. This skill turns that into a one-liner: every page is now a place I can scribble on, and Claude turns the scribbles into edits.\n\nThe same workflow works for design docs, generated dashboards, code walkthroughs, anything that lives as HTML.\n\n---\n\n## License\n\nMIT. See [LICENSE](LICENSE).\n","make-pages-interactive 是一个能够将静态HTML页面转换为具有实时评论功能的工具。项目的核心功能在于用户可以在页面上高亮文本、点击元素并留下注记，这些注记会发送到本地收件箱中，并由Claude（一个智能代理）读取后对页面进行编辑，随后页面自动刷新展示更改内容。技术实现上，它仅依赖三个主要文件：处理前端交互逻辑的JavaScript库、样式表以及一个小型HTTP服务器。适用于需要快速迭代反馈的研究报告、文档、设计稿或任何HTML格式的内容展示场景。其简洁的设计和低门槛的安装过程使得非技术人员也能轻松使用。",2,"2026-06-11 03:58:05","CREATED_QUERY"]