From ccc-skills
This skill should be used when the user asks to "share this HTML", "publish HTML", "get a link for this file", "share this report", "make this shareable", "upload this HTML", or wants to publish any HTML artifact for others to view. ALSO use it for collaborative review on an HTML doc/spec/report — triggers include "get feedback on this", "let reviewers comment", "collect feedback", "share for review", "let people annotate this", "synthesize the feedback", "converge the feedback", "what did reviewers say", "incorporate the comments", or "improve this from the feedback". Wraps Surge.sh for zero-cost hosting with guided privacy options, plus an embedded annotation + AI converge workflow.
How this skill is triggered — by the user, by Claude, or both
Slash command
/ccc-skills:htmldropThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Publish any HTML file and get a shareable URL instantly via the `htmldrop` CLI. Two modes:
Publish any HTML file and get a shareable URL instantly via the htmldrop CLI. Two modes:
npm install -g @yeefeiooi/htmldrop@latest (the binary is still htmldrop)htmldrop init once (sets up Surge account + subdomain)htmldrop auth setup once (generates an author API key in ~/.htmldrop/config.json)~/.netrc; the feedback author key lives in ~/.htmldrop/config.jsonhtmldrop pushThis is the most common case — "just give me a link." Follow this sequence.
which htmldrop
test -f ~/.htmldrop/config.json && echo "initialized" || echo "not initialized"
If not set up, direct the user to run htmldrop init interactively. The first deploy triggers Surge's interactive email/password login. After that, the token is saved in ~/.netrc and future deploys are automatic.
Present two options:
If public — ask one follow-up: "Block search engines and AI crawlers from indexing?"
htmldrop push --noindex /path/to/file.htmlhtmldrop push /path/to/file.htmlIf password-protected — ask for a password or offer to generate a memorable one (e.g., coral-sunset-42):
htmldrop push --password <pass> /path/to/file.html
Public:
Published: https://subdomain.surge.sh/filename.html
Password-protected:
Published with password protection!
URL: https://subdomain.surge.sh/filename.html
Password: coral-sunset-42
Share both with your recipients.
If the user explicitly states preference in their request, skip the question:
| Command | Purpose |
|---|---|
htmldrop init | One-time setup (subdomain + Surge login) |
htmldrop push <file> | Publish a file (flags: --password, --noindex, --open) |
htmldrop list | Show all published files with URLs |
htmldrop delete <file> | Remove a file and redeploy |
htmldrop open <file> | Open published file in browser |
Use this when the user wants people to review and comment on an HTML doc, spec, or report — or when they want to pull, answer, or synthesize that feedback. Publishing with --feedback embeds an annotation widget in the page.
htmldrop push <file> --feedback prints one shareable Feedback URL like:
https://htmldrop-feedback.htmldrop.workers.dev/doc/<uuid>
That single /doc/<uuid> link serves everyone:
There is no separate "viewer link" vs "author link." Share the one URL and you are done.
The link is stable. Re-pushing the same file with --feedback reuses its docId, so the URL never changes and existing comments stay attached. This is why the agent loop below works: you can keep updating the document at the same link as feedback comes in. Use --new-doc only when you deliberately want a fresh, empty doc.
htmldrop auth setup run once (creates the author API key). Add --force to regenerate it.converge additionally needs an LLM API key (Anthropic, OpenAI, or Gemini) in the environment — ANTHROPIC_API_KEY, OPENAI_API_KEY, GEMINI_API_KEY, or LLM_API_KEY. The provider is auto-detected from the key; override with --provider/--model. No SDK install needed.| Command | Purpose |
|---|---|
htmldrop auth setup [--force] | One-time: generate an author API key. Required before any feedback feature. |
htmldrop push <file> --feedback | Publish with the annotation widget; prints a stable Feedback URL. Re-push same file → same link, comments preserved. |
htmldrop push <file> --feedback --password <pw> | Feedback-enabled private doc — the widget appears after the viewer decrypts. Review link is the password-gated URL (reviewers need the password). |
htmldrop push <file> --feedback --new-doc | Force a fresh feedback doc/link (clean slate). |
htmldrop feedback pull <file> [--json] | Retrieve feedback for your own file (uses local manifest + author key). |
htmldrop feedback read <docId|url> [--json] | Read feedback for any doc by id or link — no ownership/manifest. Use this when reviewing a teammate's doc. |
htmldrop feedback list | List which published files have feedback enabled. |
htmldrop feedback add [file] --text "..." [--doc-id <id|url>] [--name "..."] [--on "<anchor>"] [--parent-id <id>] | Post a comment (the agent write path). --doc-id comments on a doc you didn't publish; --on anchors to text; --parent-id replies. |
htmldrop feedback clear <file> | Delete all feedback for a file (owner only). |
htmldrop fetch <url> [--password <pw>] [--out <f>] | Fetch + decrypt a published doc so the agent can read its content (use with a teammate's link + password). |
htmldrop converge <file> [--dry-run] | One-shot: pull all feedback → LLM → write <file>.converged.html, auto-resolving disagreements (owner only). --dry-run prints the prompt without calling the API. |
htmldrop studio [--port <n>] [--no-browser] | Open the local "Converge Studio" dashboard to review feedback + trigger AI insights. |
Roles: anyone with the link is a reviewer (read + comment, via feedback read / feedback add --doc-id / fetch — no key). The owner (author-key holder who published) additionally runs converge and feedback clear. So a teammate's Claude/Codex session can fully review a shared doc, but only the owner synthesizes/converges it.
When Claude generates a doc/spec/report and the user wants collaborative review, this is the workflow:
Generate & publish — write the HTML, then:
htmldrop push /path/to/doc.html --feedback
Share the printed Feedback URL with the user. Reviewers comment on it directly.
Pull feedback — when the user asks what reviewers said, or before synthesizing:
htmldrop feedback pull /path/to/doc.html
Inject researched answers (optional but powerful) — Claude can respond to a comment with its own evidence after researching. Anchor the reply to the exact text being discussed:
htmldrop feedback add /path/to/doc.html \
--text "Verified against the 2026 pricing docs: the tier cap is 500 req/s, not 200." \
--name "AI Research" \
--on "the rate limit is 200 req/s"
Use --parent-id <id> to reply directly under a specific reviewer comment instead of anchoring to text.
Converge — synthesize all comments into an improved document. Two paths:
htmldrop converge /path/to/doc.html pulls all feedback, calls an LLM, and writes /path/to/doc.html.converged.html. It auto-resolves disagreements itself. Review it, then promote it over doc.html once it looks right. Use --dry-run first to inspect the prompt without spending an API call.Close the loop — post resolutions back as replies. After you fold in a comment or the human decides an open item, reply on that reviewer's comment so the resolution lives on the document (reviewer refreshes the link → sees their comment was addressed → and why):
htmldrop feedback pull /path/to/doc.html --json # get comment ids
htmldrop feedback add /path/to/doc.html --parent-id <id> --name "<author>" --text "<how it was resolved>"
For a password-gated doc, add --password <pw> to the reply (gated feedback requires the token derived from the password).
Re-push to the same link — publish the improved version so reviewers see it update in place:
htmldrop push /path/to/doc.html --feedback
Same URL, comments intact. The loop can repeat as more feedback arrives.
For the detailed walkthrough — single-URL mechanics, anchoring rules, the two-tier converge (clear wins vs. judgment calls), closing the loop with reply resolutions, and troubleshooting — read references/feedback-workflow.md.
When the user asks to create an HTML artifact AND share/review it:
test -f /path/to/file.html--feedback and follow the Agent Loop| Issue | Fix |
|---|---|
htmldrop: command not found | npm install -g @yeefeiooi/htmldrop@latest |
| Not initialized (simple share) | Run htmldrop init interactively |
| Auth error on push | Run htmldrop init to re-authenticate |
| Feedback command rejected / no author key | Run htmldrop auth setup once |
converge fails | Ensure an LLM key is set (ANTHROPIC_API_KEY / OPENAI_API_KEY / GEMINI_API_KEY / LLM_API_KEY); pass --provider if the key prefix is unrecognized |
| Feedback link changed unexpectedly | You likely passed --new-doc; omit it to keep the stable link |
| File not found | Use absolute path |
| Change password | Re-push with new --password (overwrites) |
references/feedback-workflow.md — Deep dive on the feedback + converge agent loop, single-URL model, auth setup, and troubleshootingreferences/privacy-levels.md — Detailed privacy/security comparison and user FAQReviews code diffs for over-engineering: unnecessary complexity, reinvented standard library, speculative abstractions. One-line findings per location. Use for 'review for over-engineering' or /ponytail-review.
npx claudepluginhub wenjix/ccc