{"id":"9aedb9b3-f616-4250-88ae-50d67e7f3194","entityType":"agent","slug":"clawhub-ljn-hust-html-collab","name":"html-collab","canonicalUrl":"https://www.xpersona.co/agent/clawhub-ljn-hust-html-collab","canonicalPath":"/agent/clawhub-ljn-hust-html-collab","generatedAt":"2026-10-11T11:23:43.305Z","source":"CLAWHUB","claimStatus":"UNCLAIMED","verificationTier":"NONE","summary":{"evidence":{"source":"editorial-content","verified":true,"confidence":"high","updatedAt":"2026-10-11T09:12:36.936Z","emptyReason":null},"description":"Use this skill for any HTML document that will go through LLM–human review cycles. Trigger when: the user asks to write, draft, or generate a document for review or feedback; the user provides a .html file containing annotations or a collab-data block; the user types /html-collab, /html-collab on, or /html-collab off; a .html file contains an AI Bootstrap comment pointing to this skill. When the user asks to \"write a doc\" or \"draft something for review\" without specifying a format, default to html-collab format — don't wait to be asked. /html-collab off triggers this skill too, but outputs clean presentation HTML instead. Skill: html-collab Owner: ljn-hust Summary: Use this skill for any HTML document that will go through LLM–human review cycles. Trigger when: the user asks to write, draft, or generate a document for review or feedback; the user provides a .html file containing annotations or a collab-data block; the user types /html-collab, /html-collab on, or /html-collab off; a .html file contains an AI Bootstrap comment pointing t","descriptionLabel":"Technical summary","evidenceSummary":"Capability contract not published. No trust telemetry is available yet. 1.1K downloads reported by the source. Last updated 10/11/2026.","installCommand":"clawhub skill install s17fpha62y8hdfwvaqngffpjqh88469j:html-collab","sourceUrl":"https://clawhub.ai/ljn-hust/html-collab","homepage":"https://clawhub.ai/ljn-hust/skills/html-collab","primaryLinks":[{"label":"View on ClawHub","url":"https://clawhub.ai/ljn-hust/html-collab","kind":"source"},{"label":"Homepage","url":"https://clawhub.ai/ljn-hust/skills/html-collab","kind":"homepage"}],"safetyScore":84,"overallRank":62,"popularityScore":61,"trustScore":null,"claimedByName":null,"isOwner":false,"seoDescription":"Use this skill for any HTML document that will go through LLM–human review cycles. Trigger when: the user asks to write, draft, or generate a document for revie"},"coverage":{"evidence":{"source":"public-profile","verified":false,"confidence":"medium","updatedAt":"2026-10-11T09:12:36.936Z","emptyReason":null},"protocols":[{"protocol":"OPENCLEW","label":"OpenClaw","status":"self-declared","notes":"Declared in the public agent profile."}],"capabilities":[],"verifiedCount":0,"selfDeclaredCount":1,"capabilityMatrix":{"rows":[{"key":"OPENCLEW","type":"protocol","support":"unknown","confidenceSource":"profile","notes":"Listed on profile"}],"flattenedTokens":"protocol:OPENCLEW|unknown|profile"}},"adoption":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-11T09:12:36.936Z","emptyReason":null},"stars":null,"forks":null,"downloads":1103,"packageName":null,"latestVersion":"0.3.0","tractionLabel":"1.1K downloads"},"release":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-11T09:12:36.930Z","emptyReason":null},"lastUpdatedAt":"2026-10-11T09:12:36.936Z","lastCrawledAt":"2026-10-11T09:12:36.930Z","lastIndexedAt":null,"nextCrawlAt":"2026-10-12T09:12:36.930Z","lastVerifiedAt":null,"highlights":[{"version":"0.3.0","createdAt":"2026-08-11T18:11:06.070Z","changelog":"Comment UX release: align comment bubbles and the add-comment panel with their document anchors, prevent comment input from scrolling the page, add click-to-edit comments with Update/Cancel controls, and refresh generated templates/demo artifacts.","fileCount":4,"zipByteSize":17059},{"version":"0.2.0","createdAt":"2026-07-03T16:26:05.077Z","changelog":"Reliability release: single-source build pipeline (no more hand-sync bugs), sections no longer editable (editing them destroyed child block IDs), Cancel now truly reverts abandoned edits, re-editing an edited block works on clean text, edit button can no longer pollute captured text, comment image src escaped, engineVersion embedded in generated files, plus 7 new DOM smoke tests covering the edit flow.","fileCount":4,"zipByteSize":15878},{"version":"0.1.5","createdAt":"2026-06-15T07:48:10.694Z","changelog":"Fix: Confirm/Cancel buttons unclickable when editing a block inside a section — ancestor elements were incorrectly dimmed (pointer-events:none), blocking the edit bar.","fileCount":4,"zipByteSize":15247},{"version":"0.1.4","createdAt":"2026-06-15T07:19:19.647Z","changelog":"Fix: Save As button broken — formatTimestamp and suggestSaveFilename were not inlined in skill/assets/template.html and index.html.","fileCount":4,"zipByteSize":15075},{"version":"0.1.3","createdAt":"2026-06-14T09:14:06.093Z","changelog":"UX: timestamp in suggested save filename, title bar shows saved filename after first save, dynamic Save As…/Save button label, file picker opens in Documents folder by default. SKILL.md: CC generates files to ~/Documents/html-collab/.","fileCount":4,"zipByteSize":14994},{"version":"0.1.2","createdAt":"2026-06-09T16:31:44.767Z","changelog":"Security: remove auto-fetch fallback from GENERATE step — AI no longer fetches remote template automatically; instead asks user to install via clawhub or provide the file directly.","fileCount":4,"zipByteSize":14687},{"version":"0.1.1","createdAt":"2026-06-09T04:29:50.205Z","changelog":"Security: strengthen AI Bootstrap consent language — AI must stop and ask for explicit user permission before fetching skill instructions or taking any action on the document.","fileCount":4,"zipByteSize":14768},{"version":"0.1.0","createdAt":"2026-06-06T11:14:52.369Z","changelog":"Initial release — single-file HTML format for LLM–human collaborative editing. Supports GENERATE, READ, and REVISE workflows. Compatible with Claude Code and OpenClaw.","fileCount":4,"zipByteSize":14622}]},"execution":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No published capability contract is available yet."},"installCommand":"clawhub skill install s17fpha62y8hdfwvaqngffpjqh88469j:html-collab","setupComplexity":"low","setupSteps":["Setup complexity is classified as HIGH. You must provision dedicated cloud infrastructure or an isolated VM. Do not run this directly on your local workstation.","Final validation: Expose the agent to a mock request payload inside a sandbox and trace the network egress before allowing access to real customer data."],"contract":{"contractStatus":"missing","authModes":[],"requires":[],"forbidden":[],"supportsMcp":false,"supportsA2a":false,"supportsStreaming":false,"inputSchemaRef":null,"outputSchemaRef":null,"dataRegion":null,"contractUpdatedAt":null,"sourceUpdatedAt":null,"freshnessSeconds":null},"invocationGuide":{"preferredApi":{"snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-ljn-hust-html-collab/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-ljn-hust-html-collab/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-ljn-hust-html-collab/trust"},"curlExamples":["curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-ljn-hust-html-collab/snapshot\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-ljn-hust-html-collab/contract\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-ljn-hust-html-collab/trust\""],"jsonRequestTemplate":{"query":"summarize this repo","constraints":{"maxLatencyMs":2000,"protocolPreference":["OPENCLEW"]}},"jsonResponseTemplate":{"ok":true,"result":{"summary":"...","confidence":0.9},"meta":{"source":"CLAWHUB","generatedAt":"2026-10-11T11:23:43.303Z"}},"retryPolicy":{"maxAttempts":3,"backoffMs":[500,1500,3500],"retryableConditions":["HTTP_429","HTTP_503","NETWORK_TIMEOUT"]}},"endpoints":{"dossierUrl":"https://www.xpersona.co/api/v1/agents/clawhub-ljn-hust-html-collab/dossier","snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-ljn-hust-html-collab/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-ljn-hust-html-collab/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-ljn-hust-html-collab/trust"}},"reliability":{"evidence":{"source":"runtime-metrics","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No trust, reliability, or runtime telemetry is available."},"trust":{"status":"unavailable","handshakeStatus":"UNKNOWN","verificationFreshnessHours":null,"reputationScore":null,"p95LatencyMs":null,"successRate30d":null,"fallbackRate":null,"attempts30d":null,"trustUpdatedAt":null,"trustConfidence":"unknown","sourceUpdatedAt":null,"freshnessSeconds":null},"decisionGuardrails":{"doNotUseIf":["Contract metadata is missing or unavailable for deterministic execution."],"safeUseWhen":[],"riskFlags":["missing_or_unavailable_contract","trust_data_unavailable","schema_references_missing"],"operationalConfidence":"low"},"executionMetrics":{"observedLatencyMsP50":null,"observedLatencyMsP95":null,"estimatedCostUsd":null,"uptime30d":null,"rateLimitRpm":null,"rateLimitBurst":null,"lastVerifiedAt":null,"verificationSource":null},"runtimeMetrics":{"successRate":null,"avgLatencyMs":null,"avgCostUsd":null,"hallucinationRate":null,"retryRate":null,"disputeRate":null,"p50Latency":null,"p95Latency":null,"lastUpdated":null}},"benchmarks":{"evidence":{"source":"no-benchmark-data","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No benchmark suites or observed failure patterns are available."},"suites":[],"failurePatterns":[]},"artifacts":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"high","updatedAt":"2026-10-11T09:12:36.936Z","emptyReason":null},"readme":"Skill: html-collab\n\nOwner: ljn-hust\n\nSummary: Use this skill for any HTML document that will go through LLM–human review cycles. Trigger when: the user asks to write, draft, or generate a document for review or feedback; the user provides a .html file containing annotations or a collab-data block; the user types /html-collab, /html-collab on, or /html-collab off; a .html file contains an AI Bootstrap comment pointing to this skill. When the user asks to \"write a doc\" or \"draft something for review\" without specifying a format, default to html-collab format — don't wait to be asked. /html-collab off triggers this skill too, but outputs clean presentation HTML instead.\n\nTags: latest:0.3.0\n\nVersion history:\n\nv0.3.0 | 2026-08-11T18:11:06.070Z | user\n\nComment UX release: align comment bubbles and the add-comment panel with their document anchors, prevent comment input from scrolling the page, add click-to-edit comments with Update/Cancel controls, and refresh generated templates/demo artifacts.\n\nv0.2.0 | 2026-07-03T16:26:05.077Z | user\n\nReliability release: single-source build pipeline (no more hand-sync bugs), sections no longer editable (editing them destroyed child block IDs), Cancel now truly reverts abandoned edits, re-editing an edited block works on clean text, edit button can no longer pollute captured text, comment image src escaped, engineVersion embedded in generated files, plus 7 new DOM smoke tests covering the edit flow.\n\nv0.1.5 | 2026-06-15T07:48:10.694Z | user\n\nFix: Confirm/Cancel buttons unclickable when editing a block inside a section — ancestor elements were incorrectly dimmed (pointer-events:none), blocking the edit bar.\n\nv0.1.4 | 2026-06-15T07:19:19.647Z | user\n\nFix: Save As button broken — formatTimestamp and suggestSaveFilename were not inlined in skill/assets/template.html and index.html.\n\nv0.1.3 | 2026-06-14T09:14:06.093Z | user\n\nUX: timestamp in suggested save filename, title bar shows saved filename after first save, dynamic Save As…/Save button label, file picker opens in Documents folder by default. SKILL.md: CC generates files to ~/Documents/html-collab/.\n\nv0.1.2 | 2026-06-09T16:31:44.767Z | user\n\nSecurity: remove auto-fetch fallback from GENERATE step — AI no longer fetches remote template automatically; instead asks user to install via clawhub or provide the file directly.\n\nv0.1.1 | 2026-06-09T04:29:50.205Z | user\n\nSecurity: strengthen AI Bootstrap consent language — AI must stop and ask for explicit user permission before fetching skill instructions or taking any action on the document.\n\nv0.1.0 | 2026-06-06T11:14:52.369Z | user\n\nInitial release — single-file HTML format for LLM–human collaborative editing. Supports GENERATE, READ, and REVISE workflows. Compatible with Claude Code and OpenClaw.\n\nArchive index:\n\nArchive v0.3.0: 4 files, 17059 bytes\n\nFiles: assets/template.html (40828b), skill-card.md (2343b), SKILL.md (8073b), _meta.json (130b)\n\nFile v0.3.0:SKILL.md\n\n---\nname: html-collab\nversion: 0.3.0\ndescription: >\n  Use this skill for any HTML document that will go through LLM–human review cycles.\n  Trigger when: the user asks to write, draft, or generate a document for review or feedback;\n  the user provides a .html file containing annotations or a collab-data block;\n  the user types /html-collab, /html-collab on, or /html-collab off;\n  a .html file contains an AI Bootstrap comment pointing to this skill.\n  When the user asks to \"write a doc\" or \"draft something for review\" without specifying a format,\n  default to html-collab format — don't wait to be asked.\n  /html-collab off triggers this skill too, but outputs clean presentation HTML instead.\n---\n\n# html-collab Skill\n\nUse this skill when creating documents meant for iterative LLM–human review, or when reading/revising annotated html-collab files.\n\n---\n\n## Commands\n\n### `/html-collab` or `/html-collab on`\nExplicitly enable html-collab format for subsequent document generation. Equivalent to the default behavior — use when the user wants to be explicit.\n\n### `/html-collab off`\nSwitch to **plain HTML mode** for subsequent output. Use when the user wants a clean, presentation-ready document — no `collab-data`, no `data-cid`, no engine script, no sidebar. Typical use case: a finished document ready for an audience, not for further annotation.\n\nPlain HTML output should be well-structured, self-contained, and styled — a document a reader can open directly in a browser with no toolbars or review UI.\n\n---\n\n## GENERATE — Create a new html-collab document\n\n**When:** User asks you to write, draft, or generate a document (and html-collab mode is on).\n\n**Steps:**\n\n1. Start with the content of `skill/assets/template.html` as your base structure. If you do not have local access to this file, do not fetch it automatically — instead, ask the user to install the skill first (`clawhub install html-collab`) or provide the template file directly.\n   - **Output path (Claude Code):** Write the generated file to `~/Documents/html-collab/<filename>-<yyyymmddhhmm>.html`. Create the directory if it does not exist (`mkdir -p ~/Documents/html-collab`). This matches the default folder the browser Save dialog opens in, so all versions stay together.\n2. Fill `<article id=\"collab-content\">` with semantic HTML:\n   - Use `<h1>` for the document title, `<h2>` for sections, `<p>` for paragraphs, `<ul>`/`<li>` for lists.\n3. Assign a `data-cid` attribute to **every** block element. Rules:\n   - Format: `<type>-<zero-padded-3-digits>` — e.g. `p-001`, `h-001`, `sec-001`, `li-001`\n   - Types: `p` → `<p>`, `h` → `<h1>`–`<h6>`, `sec` → `<section>`, `li` → `<li>`, `bq` → `<blockquote>`, `pre` → `<pre>`, `tbl` → `<table>`\n   - Sequential per type across the whole document (not per section)\n   - Every block must have one; never skip or duplicate\n4. Populate `collab-data` meta:\n   - `title`: the document title\n   - `originalCreated` and `lastRevised`: both set to the current ISO timestamp\n   - `model`: your model identifier\n   - `maxImageBytes`: 51200 (default = 50 KB; do not change unless user specifies)\n   - `imageStorage`: \"base64\"\n   - `comments`: []\n   - `edits`: []\n5. **Document-level UI belongs inside the article, not in the framework.**\n   - `#collab-header` (the top bar with the Save button) and `#collab-sidebar` (the comment panel) belong exclusively to the html-collab engine.\n   - If the document needs custom UI controls (e.g. a language toggle, a table of contents, a theme switch), place them **inside `<article id=\"collab-content\">`** — as a block at the top of the article or a floating element relative to `#collab-main`.\n   - Putting custom controls in the framework header confuses human reviewers into thinking they're engine features.\n6. Output the complete `.html` file.\n\n---\n\n## READ — Extract context from an annotated file\n\n**When:** User provides a `.html` file that has been annotated by a human.\n\n**Reading efficiently:**\n- Skip everything between `<!-- collab:llm-skip:start -->` and `<!-- collab:llm-skip:end -->` — this is engine CSS/JS you do not need to parse.\n- If `meta.summary` is present in collab-data, read it first for a compact structural index before parsing the full article.\n\n**Steps:**\n\n1. Parse `<article id=\"collab-content\">` — this is the document text.\n2. Parse the JSON inside `<script type=\"application/json\" id=\"collab-data\">`.\n3. Build and present this context block **in the conversation before doing anything else**:\n\n```\n[DOCUMENT CONTENT]\n<paste the inner HTML of <article id=\"collab-content\"> here>\n\n[HUMAN FEEDBACK]\n\nComments:\n  · [<target>] \"<quote>\" → \"<comment text>\" [screenshot, <size>, base64]\n\nEdits:\n  · [<target>] \"<original>\" → \"<revised>\"\n```\n\n   Always output this block even if there are no comments or edits — it confirms to the user what you read. This conversation record is permanent: REVISE will clear comments and edits from the file, but the feedback is preserved here in the chat history.\n\n4. Image handling — per environment:\n   - **Bash tool available (e.g. Claude Code):** For each image where `sizeBytes > meta.maxImageBytes`, compress it with a script and write the compressed base64 back to `data`, update `sizeBytes`, add `\"compressedBy\": \"<model-id>\"`. Example using Python/Pillow:\n     ```bash\n     python3 - <<'PYEOF'\n     import base64, io, sys\n     from PIL import Image\n     data = base64.b64decode(\"\"\"PASTE_BASE64_HERE\"\"\")\n     img = Image.open(io.BytesIO(data))\n     out = io.BytesIO()\n     img.save(out, 'JPEG', quality=55, optimize=True)\n     print(base64.b64encode(out.getvalue()).decode())\n     PYEOF\n     ```\n   - **Multimodal, no Bash:** Receive the image as a visual input for understanding. In output, set `data` to `null` and add `\"compressedBy\": null, \"description\": \"<one-sentence summary of the screenshot>\"`.\n   - **Text-only model:** Replace each image with `[screenshot, <size>KB, base64-omitted]` in the context block. Do not include the raw base64 string.\n\n5. Where the same `data-cid` appears in both Comments and Edits: the comment's quote reflects the **original** (pre-edit) text. In REVISE, apply the edit first, then interpret the comment against the updated text.\n\n---\n\n## REVISE — Produce a new version incorporating human feedback\n\n**When:** After READ, the user asks you to revise the document.\n\n**Steps:**\n\n1. For each entry in `edits`: replace the text of the corresponding `data-cid` block with `revised` verbatim.\n2. For each entry in `comments`: revise the content of the targeted block to address the feedback. For blocks with both an edit and a comment, apply the edit first, then address the comment.\n3. Add new blocks as needed: assign fresh CIDs continuing from the highest existing number for each type (e.g. if `p-007` exists, next paragraph is `p-008`).\n4. Remove blocks as needed: retire their CIDs permanently — never reuse them.\n5. Output the revised `.html` file:\n   - Updated `<article>` content\n   - All original `data-cid` values preserved (do not reassign existing IDs)\n   - `collab-data` reset: `comments: []`, `edits: []`\n   - `meta.lastRevised` updated to current timestamp\n   - `meta.model` updated to your model identifier\n   - `meta.originalCreated` **unchanged**\n   - `meta.versionHash` set to `\"\"` — the engine recomputes this on next browser save\n   - `meta.summary` set to `\"\"` — the engine recomputes this on next browser save\n   - **File output by environment:**\n     - **Bash/file access available (e.g. Claude Code):** Write directly over the original file. The conversation history preserves the feedback record; no extra file needed.\n     - **Chat environment (no file access):** Suggest a filename using the document title and today's date — e.g. `market-analysis-20260606.html`. This lets users build a natural version sequence in their folder without manual renaming.\n\n---\n\n---\n\n## Reference\n\n- Template: `skill/assets/template.html`\n- Example: `examples/example.html`\n- Live demo: `index.html` (or https://ljn-hust.github.io/html-collab/)\n\nFile v0.3.0:_meta.json\n\n{\n  \"ownerId\": \"kn79a5ae0tx2c4q7bwc3s3tkr583975r\",\n  \"slug\": \"html-collab\",\n  \"version\": \"0.3.0\",\n  \"publishedAt\": 1786471866070\n}\n\nFile v0.3.0:skill-card.md\n\n## Description:\n\nUse this skill for HTML documents that will go through LLM-human review cycles, including drafting reviewable documents, reading annotated html-collab files, and revising them from embedded comments and edits.\n\nThis skill is ready for commercial/non-commercial use.\n\n## Publisher:\n\n[ljn-hust](https://clawhub.ai/user/ljn-hust)\n\n### License/Terms of Use:\n\nMIT-0\n\n## Use Case:\n\nDevelopers, writers, and reviewers use this skill to create self-contained HTML documents that preserve block-level IDs, reviewer comments, proposed edits, and document metadata for iterative LLM-human review. It can also read annotated html-collab files and produce revised HTML that incorporates recorded feedback.\n\n### Deployment Geography for Use:\n\nGlobal\n\n## Known Risks and Mitigations:\n\nRisk: The skill broadly auto-activates for document drafting and annotated HTML workflows.\n\nMitigation: Install and use it only when the html-collab review workflow is desired; use /html-collab off when clean presentation HTML is needed.\n\nRisk: Generated files may include AI bootstrap metadata and embedded image references that affect browser or agent behavior.\n\nMitigation: Open and process html-collab files only from trusted sources, and require explicit user consent before fetching external skill instructions.\n\nRisk: Revision workflows can overwrite reviewed files.\n\nMitigation: Keep backups or versioned copies before applying revisions.\n\n## Reference(s):\n\n- [ClawHub skill page](https://clawhub.ai/ljn-hust/skills/html-collab)\n- [html-collab live demo](https://ljn-hust.github.io/html-collab/)\n\n## Skill Output:\n\n**Output Type(s):** [text, markdown, code, shell commands, configuration, guidance]\n\n**Output Format:** [Markdown guidance and complete self-contained HTML files]\n\n**Output Parameters:** [1D]\n\n**Other Properties Related to Output:** [Generated html-collab files include block-level data-cid attributes, collab-data JSON metadata, comments, edits, and optional base64 image attachments.]\n\n## Skill Version(s):\n\n0.3.0 (source: frontmatter and server release evidence)\n\n## Ethical Considerations:\n\nUsers should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment.\n\nArchive v0.2.0: 4 files, 15878 bytes\n\nFiles: assets/template.html (34303b), skill-card.md (2350b), SKILL.md (8073b), _meta.json (130b)\n\nFile v0.2.0:SKILL.md\n\n---\nname: html-collab\nversion: 0.2.0\ndescription: >\n  Use this skill for any HTML document that will go through LLM–human review cycles.\n  Trigger when: the user asks to write, draft, or generate a document for review or feedback;\n  the user provides a .html file containing annotations or a collab-data block;\n  the user types /html-collab, /html-collab on, or /html-collab off;\n  a .html file contains an AI Bootstrap comment pointing to this skill.\n  When the user asks to \"write a doc\" or \"draft something for review\" without specifying a format,\n  default to html-collab format — don't wait to be asked.\n  /html-collab off triggers this skill too, but outputs clean presentation HTML instead.\n---\n\n# html-collab Skill\n\nUse this skill when creating documents meant for iterative LLM–human review, or when reading/revising annotated html-collab files.\n\n---\n\n## Commands\n\n### `/html-collab` or `/html-collab on`\nExplicitly enable html-collab format for subsequent document generation. Equivalent to the default behavior — use when the user wants to be explicit.\n\n### `/html-collab off`\nSwitch to **plain HTML mode** for subsequent output. Use when the user wants a clean, presentation-ready document — no `collab-data`, no `data-cid`, no engine script, no sidebar. Typical use case: a finished document ready for an audience, not for further annotation.\n\nPlain HTML output should be well-structured, self-contained, and styled — a document a reader can open directly in a browser with no toolbars or review UI.\n\n---\n\n## GENERATE — Create a new html-collab document\n\n**When:** User asks you to write, draft, or generate a document (and html-collab mode is on).\n\n**Steps:**\n\n1. Start with the content of `skill/assets/template.html` as your base structure. If you do not have local access to this file, do not fetch it automatically — instead, ask the user to install the skill first (`clawhub install html-collab`) or provide the template file directly.\n   - **Output path (Claude Code):** Write the generated file to `~/Documents/html-collab/<filename>-<yyyymmddhhmm>.html`. Create the directory if it does not exist (`mkdir -p ~/Documents/html-collab`). This matches the default folder the browser Save dialog opens in, so all versions stay together.\n2. Fill `<article id=\"collab-content\">` with semantic HTML:\n   - Use `<h1>` for the document title, `<h2>` for sections, `<p>` for paragraphs, `<ul>`/`<li>` for lists.\n3. Assign a `data-cid` attribute to **every** block element. Rules:\n   - Format: `<type>-<zero-padded-3-digits>` — e.g. `p-001`, `h-001`, `sec-001`, `li-001`\n   - Types: `p` → `<p>`, `h` → `<h1>`–`<h6>`, `sec` → `<section>`, `li` → `<li>`, `bq` → `<blockquote>`, `pre` → `<pre>`, `tbl` → `<table>`\n   - Sequential per type across the whole document (not per section)\n   - Every block must have one; never skip or duplicate\n4. Populate `collab-data` meta:\n   - `title`: the document title\n   - `originalCreated` and `lastRevised`: both set to the current ISO timestamp\n   - `model`: your model identifier\n   - `maxImageBytes`: 51200 (default = 50 KB; do not change unless user specifies)\n   - `imageStorage`: \"base64\"\n   - `comments`: []\n   - `edits`: []\n5. **Document-level UI belongs inside the article, not in the framework.**\n   - `#collab-header` (the top bar with the Save button) and `#collab-sidebar` (the comment panel) belong exclusively to the html-collab engine.\n   - If the document needs custom UI controls (e.g. a language toggle, a table of contents, a theme switch), place them **inside `<article id=\"collab-content\">`** — as a block at the top of the article or a floating element relative to `#collab-main`.\n   - Putting custom controls in the framework header confuses human reviewers into thinking they're engine features.\n6. Output the complete `.html` file.\n\n---\n\n## READ — Extract context from an annotated file\n\n**When:** User provides a `.html` file that has been annotated by a human.\n\n**Reading efficiently:**\n- Skip everything between `<!-- collab:llm-skip:start -->` and `<!-- collab:llm-skip:end -->` — this is engine CSS/JS you do not need to parse.\n- If `meta.summary` is present in collab-data, read it first for a compact structural index before parsing the full article.\n\n**Steps:**\n\n1. Parse `<article id=\"collab-content\">` — this is the document text.\n2. Parse the JSON inside `<script type=\"application/json\" id=\"collab-data\">`.\n3. Build and present this context block **in the conversation before doing anything else**:\n\n```\n[DOCUMENT CONTENT]\n<paste the inner HTML of <article id=\"collab-content\"> here>\n\n[HUMAN FEEDBACK]\n\nComments:\n  · [<target>] \"<quote>\" → \"<comment text>\" [screenshot, <size>, base64]\n\nEdits:\n  · [<target>] \"<original>\" → \"<revised>\"\n```\n\n   Always output this block even if there are no comments or edits — it confirms to the user what you read. This conversation record is permanent: REVISE will clear comments and edits from the file, but the feedback is preserved here in the chat history.\n\n4. Image handling — per environment:\n   - **Bash tool available (e.g. Claude Code):** For each image where `sizeBytes > meta.maxImageBytes`, compress it with a script and write the compressed base64 back to `data`, update `sizeBytes`, add `\"compressedBy\": \"<model-id>\"`. Example using Python/Pillow:\n     ```bash\n     python3 - <<'PYEOF'\n     import base64, io, sys\n     from PIL import Image\n     data = base64.b64decode(\"\"\"PASTE_BASE64_HERE\"\"\")\n     img = Image.open(io.BytesIO(data))\n     out = io.BytesIO()\n     img.save(out, 'JPEG', quality=55, optimize=True)\n     print(base64.b64encode(out.getvalue()).decode())\n     PYEOF\n     ```\n   - **Multimodal, no Bash:** Receive the image as a visual input for understanding. In output, set `data` to `null` and add `\"compressedBy\": null, \"description\": \"<one-sentence summary of the screenshot>\"`.\n   - **Text-only model:** Replace each image with `[screenshot, <size>KB, base64-omitted]` in the context block. Do not include the raw base64 string.\n\n5. Where the same `data-cid` appears in both Comments and Edits: the comment's quote reflects the **original** (pre-edit) text. In REVISE, apply the edit first, then interpret the comment against the updated text.\n\n---\n\n## REVISE — Produce a new version incorporating human feedback\n\n**When:** After READ, the user asks you to revise the document.\n\n**Steps:**\n\n1. For each entry in `edits`: replace the text of the corresponding `data-cid` block with `revised` verbatim.\n2. For each entry in `comments`: revise the content of the targeted block to address the feedback. For blocks with both an edit and a comment, apply the edit first, then address the comment.\n3. Add new blocks as needed: assign fresh CIDs continuing from the highest existing number for each type (e.g. if `p-007` exists, next paragraph is `p-008`).\n4. Remove blocks as needed: retire their CIDs permanently — never reuse them.\n5. Output the revised `.html` file:\n   - Updated `<article>` content\n   - All original `data-cid` values preserved (do not reassign existing IDs)\n   - `collab-data` reset: `comments: []`, `edits: []`\n   - `meta.lastRevised` updated to current timestamp\n   - `meta.model` updated to your model identifier\n   - `meta.originalCreated` **unchanged**\n   - `meta.versionHash` set to `\"\"` — the engine recomputes this on next browser save\n   - `meta.summary` set to `\"\"` — the engine recomputes this on next browser save\n   - **File output by environment:**\n     - **Bash/file access available (e.g. Claude Code):** Write directly over the original file. The conversation history preserves the feedback record; no extra file needed.\n     - **Chat environment (no file access):** Suggest a filename using the document title and today's date — e.g. `market-analysis-20260606.html`. This lets users build a natural version sequence in their folder without manual renaming.\n\n---\n\n---\n\n## Reference\n\n- Template: `skill/assets/template.html`\n- Example: `examples/example.html`\n- Live demo: `index.html` (or https://ljn-hust.github.io/html-collab/)\n\nFile v0.2.0:_meta.json\n\n{\n  \"ownerId\": \"kn79a5ae0tx2c4q7bwc3s3tkr583975r\",\n  \"slug\": \"html-collab\",\n  \"version\": \"0.2.0\",\n  \"publishedAt\": 1783095965077\n}\n\nFile v0.2.0:skill-card.md\n\n## Description: <br>\nUse this skill for HTML documents that go through LLM-human review cycles, including drafting, reading annotated files, and revising documents from embedded feedback. <br>\n\nThis skill is ready for commercial/non-commercial use. <br>\n\n## Publisher: <br>\n[ljn-hust](https://clawhub.ai/user/ljn-hust) <br>\n\n### License/Terms of Use: <br>\nMIT-0 <br>\n\n\n## Use Case: <br>\nDevelopers and document authors use this skill to create browser-openable HTML drafts with review metadata, read human annotations from html-collab files, and produce revised HTML that preserves feedback history. <br>\n\n### Deployment Geography for Use: <br>\nGlobal <br>\n\n## Known Risks and Mitigations: <br>\nRisk: The skill may write generated HTML files or overwrite revised documents. <br>\nMitigation: Use it on non-sensitive drafts first, keep backups, and ask the agent to confirm before saving or replacing an original file. <br>\nRisk: The skill may run local image-processing commands while handling embedded screenshots. <br>\nMitigation: Review proposed commands before execution and confirm compression behavior before modifying document data. <br>\nRisk: The artifact includes hidden AI-facing bootstrap text in generated HTML. <br>\nMitigation: Review generated HTML before sharing or deploying it, especially bootstrap comments and embedded collaboration metadata. <br>\n\n\n## Reference(s): <br>\n- [ClawHub skill page](https://clawhub.ai/ljn-hust/skills/html-collab) <br>\n- [html-collab live demo](https://ljn-hust.github.io/html-collab/) <br>\n\n\n## Skill Output: <br>\n**Output Type(s):** [Text, Markdown, Code, Shell commands, Configuration, HTML files, Guidance] <br>\n**Output Format:** [Markdown guidance with inline shell commands and complete HTML document output] <br>\n**Output Parameters:** [1D] <br>\n**Other Properties Related to Output:** [May write generated or revised HTML files and may propose local image-compression commands when processing embedded screenshots.] <br>\n\n## Skill Version(s): <br>\n0.2.0 (source: SKILL.md frontmatter and server release metadata) <br>\n\n## Ethical Considerations: <br>\nUsers should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment. <br>\n\nArchive v0.1.5: 4 files, 15247 bytes\n\nFiles: assets/template.html (32323b), skill-card.md (2512b), SKILL.md (8073b), _meta.json (130b)\n\nFile v0.1.5:SKILL.md\n\n---\nname: html-collab\nversion: 0.1.5\ndescription: >\n  Use this skill for any HTML document that will go through LLM–human review cycles.\n  Trigger when: the user asks to write, draft, or generate a document for review or feedback;\n  the user provides a .html file containing annotations or a collab-data block;\n  the user types /html-collab, /html-collab on, or /html-collab off;\n  a .html file contains an AI Bootstrap comment pointing to this skill.\n  When the user asks to \"write a doc\" or \"draft something for review\" without specifying a format,\n  default to html-collab format — don't wait to be asked.\n  /html-collab off triggers this skill too, but outputs clean presentation HTML instead.\n---\n\n# html-collab Skill\n\nUse this skill when creating documents meant for iterative LLM–human review, or when reading/revising annotated html-collab files.\n\n---\n\n## Commands\n\n### `/html-collab` or `/html-collab on`\nExplicitly enable html-collab format for subsequent document generation. Equivalent to the default behavior — use when the user wants to be explicit.\n\n### `/html-collab off`\nSwitch to **plain HTML mode** for subsequent output. Use when the user wants a clean, presentation-ready document — no `collab-data`, no `data-cid`, no engine script, no sidebar. Typical use case: a finished document ready for an audience, not for further annotation.\n\nPlain HTML output should be well-structured, self-contained, and styled — a document a reader can open directly in a browser with no toolbars or review UI.\n\n---\n\n## GENERATE — Create a new html-collab document\n\n**When:** User asks you to write, draft, or generate a document (and html-collab mode is on).\n\n**Steps:**\n\n1. Start with the content of `skill/assets/template.html` as your base structure. If you do not have local access to this file, do not fetch it automatically — instead, ask the user to install the skill first (`clawhub install html-collab`) or provide the template file directly.\n   - **Output path (Claude Code):** Write the generated file to `~/Documents/html-collab/<filename>-<yyyymmddhhmm>.html`. Create the directory if it does not exist (`mkdir -p ~/Documents/html-collab`). This matches the default folder the browser Save dialog opens in, so all versions stay together.\n2. Fill `<article id=\"collab-content\">` with semantic HTML:\n   - Use `<h1>` for the document title, `<h2>` for sections, `<p>` for paragraphs, `<ul>`/`<li>` for lists.\n3. Assign a `data-cid` attribute to **every** block element. Rules:\n   - Format: `<type>-<zero-padded-3-digits>` — e.g. `p-001`, `h-001`, `sec-001`, `li-001`\n   - Types: `p` → `<p>`, `h` → `<h1>`–`<h6>`, `sec` → `<section>`, `li` → `<li>`, `bq` → `<blockquote>`, `pre` → `<pre>`, `tbl` → `<table>`\n   - Sequential per type across the whole document (not per section)\n   - Every block must have one; never skip or duplicate\n4. Populate `collab-data` meta:\n   - `title`: the document title\n   - `originalCreated` and `lastRevised`: both set to the current ISO timestamp\n   - `model`: your model identifier\n   - `maxImageBytes`: 51200 (default = 50 KB; do not change unless user specifies)\n   - `imageStorage`: \"base64\"\n   - `comments`: []\n   - `edits`: []\n5. **Document-level UI belongs inside the article, not in the framework.**\n   - `#collab-header` (the top bar with the Save button) and `#collab-sidebar` (the comment panel) belong exclusively to the html-collab engine.\n   - If the document needs custom UI controls (e.g. a language toggle, a table of contents, a theme switch), place them **inside `<article id=\"collab-content\">`** — as a block at the top of the article or a floating element relative to `#collab-main`.\n   - Putting custom controls in the framework header confuses human reviewers into thinking they're engine features.\n6. Output the complete `.html` file.\n\n---\n\n## READ — Extract context from an annotated file\n\n**When:** User provides a `.html` file that has been annotated by a human.\n\n**Reading efficiently:**\n- Skip everything between `<!-- collab:llm-skip:start -->` and `<!-- collab:llm-skip:end -->` — this is engine CSS/JS you do not need to parse.\n- If `meta.summary` is present in collab-data, read it first for a compact structural index before parsing the full article.\n\n**Steps:**\n\n1. Parse `<article id=\"collab-content\">` — this is the document text.\n2. Parse the JSON inside `<script type=\"application/json\" id=\"collab-data\">`.\n3. Build and present this context block **in the conversation before doing anything else**:\n\n```\n[DOCUMENT CONTENT]\n<paste the inner HTML of <article id=\"collab-content\"> here>\n\n[HUMAN FEEDBACK]\n\nComments:\n  · [<target>] \"<quote>\" → \"<comment text>\" [screenshot, <size>, base64]\n\nEdits:\n  · [<target>] \"<original>\" → \"<revised>\"\n```\n\n   Always output this block even if there are no comments or edits — it confirms to the user what you read. This conversation record is permanent: REVISE will clear comments and edits from the file, but the feedback is preserved here in the chat history.\n\n4. Image handling — per environment:\n   - **Bash tool available (e.g. Claude Code):** For each image where `sizeBytes > meta.maxImageBytes`, compress it with a script and write the compressed base64 back to `data`, update `sizeBytes`, add `\"compressedBy\": \"<model-id>\"`. Example using Python/Pillow:\n     ```bash\n     python3 - <<'PYEOF'\n     import base64, io, sys\n     from PIL import Image\n     data = base64.b64decode(\"\"\"PASTE_BASE64_HERE\"\"\")\n     img = Image.open(io.BytesIO(data))\n     out = io.BytesIO()\n     img.save(out, 'JPEG', quality=55, optimize=True)\n     print(base64.b64encode(out.getvalue()).decode())\n     PYEOF\n     ```\n   - **Multimodal, no Bash:** Receive the image as a visual input for understanding. In output, set `data` to `null` and add `\"compressedBy\": null, \"description\": \"<one-sentence summary of the screenshot>\"`.\n   - **Text-only model:** Replace each image with `[screenshot, <size>KB, base64-omitted]` in the context block. Do not include the raw base64 string.\n\n5. Where the same `data-cid` appears in both Comments and Edits: the comment's quote reflects the **original** (pre-edit) text. In REVISE, apply the edit first, then interpret the comment against the updated text.\n\n---\n\n## REVISE — Produce a new version incorporating human feedback\n\n**When:** After READ, the user asks you to revise the document.\n\n**Steps:**\n\n1. For each entry in `edits`: replace the text of the corresponding `data-cid` block with `revised` verbatim.\n2. For each entry in `comments`: revise the content of the targeted block to address the feedback. For blocks with both an edit and a comment, apply the edit first, then address the comment.\n3. Add new blocks as needed: assign fresh CIDs continuing from the highest existing number for each type (e.g. if `p-007` exists, next paragraph is `p-008`).\n4. Remove blocks as needed: retire their CIDs permanently — never reuse them.\n5. Output the revised `.html` file:\n   - Updated `<article>` content\n   - All original `data-cid` values preserved (do not reassign existing IDs)\n   - `collab-data` reset: `comments: []`, `edits: []`\n   - `meta.lastRevised` updated to current timestamp\n   - `meta.model` updated to your model identifier\n   - `meta.originalCreated` **unchanged**\n   - `meta.versionHash` set to `\"\"` — the engine recomputes this on next browser save\n   - `meta.summary` set to `\"\"` — the engine recomputes this on next browser save\n   - **File output by environment:**\n     - **Bash/file access available (e.g. Claude Code):** Write directly over the original file. The conversation history preserves the feedback record; no extra file needed.\n     - **Chat environment (no file access):** Suggest a filename using the document title and today's date — e.g. `market-analysis-20260606.html`. This lets users build a natural version sequence in their folder without manual renaming.\n\n---\n\n---\n\n## Reference\n\n- Template: `skill/assets/template.html`\n- Example: `examples/example.html`\n- Live demo: `index.html` (or https://ljn-hust.github.io/html-collab/)\n\nFile v0.1.5:_meta.json\n\n{\n  \"ownerId\": \"kn79a5ae0tx2c4q7bwc3s3tkr583975r\",\n  \"slug\": \"html-collab\",\n  \"version\": \"0.1.5\",\n  \"publishedAt\": 1781509690694\n}\n\nFile v0.1.5:skill-card.md\n\n## Description: <br>\nCreates, reads, and revises HTML documents designed for iterative LLM-human review cycles. <br>\n\nThis skill is ready for commercial/non-commercial use. <br>\n\n## Publisher: <br>\n[ljn-hust](https://clawhub.ai/user/ljn-hust) <br>\n\n### License/Terms of Use: <br>\nMIT-0 <br>\n\n\n## Use Case: <br>\nDevelopers, writers, and reviewers use this skill to create self-contained HTML review drafts, extract human feedback from annotated documents, and produce revised HTML versions. <br>\n\n### Deployment Geography for Use: <br>\nGlobal <br>\n\n## Known Risks and Mitigations: <br>\nRisk: The skill can create or overwrite local HTML documents during review workflows. <br>\nMitigation: Confirm the target path before writing, keep revisions in a versioned folder, and save sensitive or uncertain revisions to a new file instead of overwriting the original. <br>\nRisk: Full document text, reviewer comments, edits, and screenshot summaries may appear in the chat transcript. <br>\nMitigation: For sensitive documents, summarize instead of pasting full contents and avoid including raw screenshot or base64 data in the conversation. <br>\nRisk: html-collab can become the default format for review drafts, which may be inappropriate for finished presentation HTML. <br>\nMitigation: Use plain HTML mode when the user asks for a clean final document or does not want collab-data, review UI, data-cid attributes, or the engine script. <br>\n\n\n## Reference(s): <br>\n- [ClawHub skill page](https://clawhub.ai/ljn-hust/html-collab) <br>\n- [html-collab live demo](https://ljn-hust.github.io/html-collab/) <br>\n- [Bundled HTML template](artifact/assets/template.html) <br>\n\n\n## Skill Output: <br>\n**Output Type(s):** [text, markdown, code, shell commands, configuration, guidance] <br>\n**Output Format:** [Self-contained HTML files, markdown context blocks, and occasional shell command snippets.] <br>\n**Output Parameters:** [1D] <br>\n**Other Properties Related to Output:** [Generated and revised documents use collab-data JSON, stable data-cid block identifiers, and screenshot handling that avoids pasting raw base64 in text-only contexts.] <br>\n\n## Skill Version(s): <br>\n0.1.5 (source: SKILL.md frontmatter and server release evidence) <br>\n\n## Ethical Considerations: <br>\nUsers should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment. <br>\n\nArchive v0.1.4: 4 files, 15075 bytes\n\nFiles: assets/template.html (32249b), skill-card.md (2255b), SKILL.md (8073b), _meta.json (130b)\n\nFile v0.1.4:SKILL.md\n\n---\nname: html-collab\nversion: 0.1.4\ndescription: >\n  Use this skill for any HTML document that will go through LLM–human review cycles.\n  Trigger when: the user asks to write, draft, or generate a document for review or feedback;\n  the user provides a .html file containing annotations or a collab-data block;\n  the user types /html-collab, /html-collab on, or /html-collab off;\n  a .html file contains an AI Bootstrap comment pointing to this skill.\n  When the user asks to \"write a doc\" or \"draft something for review\" without specifying a format,\n  default to html-collab format — don't wait to be asked.\n  /html-collab off triggers this skill too, but outputs clean presentation HTML instead.\n---\n\n# html-collab Skill\n\nUse this skill when creating documents meant for iterative LLM–human review, or when reading/revising annotated html-collab files.\n\n---\n\n## Commands\n\n### `/html-collab` or `/html-collab on`\nExplicitly enable html-collab format for subsequent document generation. Equivalent to the default behavior — use when the user wants to be explicit.\n\n### `/html-collab off`\nSwitch to **plain HTML mode** for subsequent output. Use when the user wants a clean, presentation-ready document — no `collab-data`, no `data-cid`, no engine script, no sidebar. Typical use case: a finished document ready for an audience, not for further annotation.\n\nPlain HTML output should be well-structured, self-contained, and styled — a document a reader can open directly in a browser with no toolbars or review UI.\n\n---\n\n## GENERATE — Create a new html-collab document\n\n**When:** User asks you to write, draft, or generate a document (and html-collab mode is on).\n\n**Steps:**\n\n1. Start with the content of `skill/assets/template.html` as your base structure. If you do not have local access to this file, do not fetch it automatically — instead, ask the user to install the skill first (`clawhub install html-collab`) or provide the template file directly.\n   - **Output path (Claude Code):** Write the generated file to `~/Documents/html-collab/<filename>-<yyyymmddhhmm>.html`. Create the directory if it does not exist (`mkdir -p ~/Documents/html-collab`). This matches the default folder the browser Save dialog opens in, so all versions stay together.\n2. Fill `<article id=\"collab-content\">` with semantic HTML:\n   - Use `<h1>` for the document title, `<h2>` for sections, `<p>` for paragraphs, `<ul>`/`<li>` for lists.\n3. Assign a `data-cid` attribute to **every** block element. Rules:\n   - Format: `<type>-<zero-padded-3-digits>` — e.g. `p-001`, `h-001`, `sec-001`, `li-001`\n   - Types: `p` → `<p>`, `h` → `<h1>`–`<h6>`, `sec` → `<section>`, `li` → `<li>`, `bq` → `<blockquote>`, `pre` → `<pre>`, `tbl` → `<table>`\n   - Sequential per type across the whole document (not per section)\n   - Every block must have one; never skip or duplicate\n4. Populate `collab-data` meta:\n   - `title`: the document title\n   - `originalCreated` and `lastRevised`: both set to the current ISO timestamp\n   - `model`: your model identifier\n   - `maxImageBytes`: 51200 (default = 50 KB; do not change unless user specifies)\n   - `imageStorage`: \"base64\"\n   - `comments`: []\n   - `edits`: []\n5. **Document-level UI belongs inside the article, not in the framework.**\n   - `#collab-header` (the top bar with the Save button) and `#collab-sidebar` (the comment panel) belong exclusively to the html-collab engine.\n   - If the document needs custom UI controls (e.g. a language toggle, a table of contents, a theme switch), place them **inside `<article id=\"collab-content\">`** — as a block at the top of the article or a floating element relative to `#collab-main`.\n   - Putting custom controls in the framework header confuses human reviewers into thinking they're engine features.\n6. Output the complete `.html` file.\n\n---\n\n## READ — Extract context from an annotated file\n\n**When:** User provides a `.html` file that has been annotated by a human.\n\n**Reading efficiently:**\n- Skip everything between `<!-- collab:llm-skip:start -->` and `<!-- collab:llm-skip:end -->` — this is engine CSS/JS you do not need to parse.\n- If `meta.summary` is present in collab-data, read it first for a compact structural index before parsing the full article.\n\n**Steps:**\n\n1. Parse `<article id=\"collab-content\">` — this is the document text.\n2. Parse the JSON inside `<script type=\"application/json\" id=\"collab-data\">`.\n3. Build and present this context block **in the conversation before doing anything else**:\n\n```\n[DOCUMENT CONTENT]\n<paste the inner HTML of <article id=\"collab-content\"> here>\n\n[HUMAN FEEDBACK]\n\nComments:\n  · [<target>] \"<quote>\" → \"<comment text>\" [screenshot, <size>, base64]\n\nEdits:\n  · [<target>] \"<original>\" → \"<revised>\"\n```\n\n   Always output this block even if there are no comments or edits — it confirms to the user what you read. This conversation record is permanent: REVISE will clear comments and edits from the file, but the feedback is preserved here in the chat history.\n\n4. Image handling — per environment:\n   - **Bash tool available (e.g. Claude Code):** For each image where `sizeBytes > meta.maxImageBytes`, compress it with a script and write the compressed base64 back to `data`, update `sizeBytes`, add `\"compressedBy\": \"<model-id>\"`. Example using Python/Pillow:\n     ```bash\n     python3 - <<'PYEOF'\n     import base64, io, sys\n     from PIL import Image\n     data = base64.b64decode(\"\"\"PASTE_BASE64_HERE\"\"\")\n     img = Image.open(io.BytesIO(data))\n     out = io.BytesIO()\n     img.save(out, 'JPEG', quality=55, optimize=True)\n     print(base64.b64encode(out.getvalue()).decode())\n     PYEOF\n     ```\n   - **Multimodal, no Bash:** Receive the image as a visual input for understanding. In output, set `data` to `null` and add `\"compressedBy\": null, \"description\": \"<one-sentence summary of the screenshot>\"`.\n   - **Text-only model:** Replace each image with `[screenshot, <size>KB, base64-omitted]` in the context block. Do not include the raw base64 string.\n\n5. Where the same `data-cid` appears in both Comments and Edits: the comment's quote reflects the **original** (pre-edit) text. In REVISE, apply the edit first, then interpret the comment against the updated text.\n\n---\n\n## REVISE — Produce a new version incorporating human feedback\n\n**When:** After READ, the user asks you to revise the document.\n\n**Steps:**\n\n1. For each entry in `edits`: replace the text of the corresponding `data-cid` block with `revised` verbatim.\n2. For each entry in `comments`: revise the content of the targeted block to address the feedback. For blocks with both an edit and a comment, apply the edit first, then address the comment.\n3. Add new blocks as needed: assign fresh CIDs continuing from the highest existing number for each type (e.g. if `p-007` exists, next paragraph is `p-008`).\n4. Remove blocks as needed: retire their CIDs permanently — never reuse them.\n5. Output the revised `.html` file:\n   - Updated `<article>` content\n   - All original `data-cid` values preserved (do not reassign existing IDs)\n   - `collab-data` reset: `comments: []`, `edits: []`\n   - `meta.lastRevised` updated to current timestamp\n   - `meta.model` updated to your model identifier\n   - `meta.originalCreated` **unchanged**\n   - `meta.versionHash` set to `\"\"` — the engine recomputes this on next browser save\n   - `meta.summary` set to `\"\"` — the engine recomputes this on next browser save\n   - **File output by environment:**\n     - **Bash/file access available (e.g. Claude Code):** Write directly over the original file. The conversation history preserves the feedback record; no extra file needed.\n     - **Chat environment (no file access):** Suggest a filename using the document title and today's date — e.g. `market-analysis-20260606.html`. This lets users build a natural version sequence in their folder without manual renaming.\n\n---\n\n---\n\n## Reference\n\n- Template: `skill/assets/template.html`\n- Example: `examples/example.html`\n- Live demo: `index.html` (or https://ljn-hust.github.io/html-collab/)\n\nFile v0.1.4:_meta.json\n\n{\n  \"ownerId\": \"kn79a5ae0tx2c4q7bwc3s3tkr583975r\",\n  \"slug\": \"html-collab\",\n  \"version\": \"0.1.4\",\n  \"publishedAt\": 1781507959647\n}\n\nFile v0.1.4:skill-card.md\n\n## Description: <br>\nhtml-collab helps agents create, read, and revise annotated HTML documents for iterative LLM-human review cycles. <br>\n\nThis skill is ready for commercial/non-commercial use. <br>\n\n## Publisher: <br>\n[ljn-hust](https://clawhub.ai/user/ljn-hust) <br>\n\n### License/Terms of Use: <br>\nMIT-0 <br>\n\n\n## Use Case: <br>\nDevelopers, writers, and reviewers use this skill to draft self-contained HTML review documents, capture human comments and edits, and produce revised versions after feedback. <br>\n\n### Deployment Geography for Use: <br>\nGlobal <br>\n\n## Known Risks and Mitigations: <br>\nRisk: The skill can create HTML files and may overwrite original documents during revision. <br>\nMitigation: Keep backups and ask the agent to use save-as or versioned output before revising important documents. <br>\nRisk: Annotated documents may embed review metadata, scripts, and base64 screenshots. <br>\nMitigation: Inspect generated HTML before sharing and use plain HTML mode for finished documents that should not include review UI or collab-data. <br>\nRisk: Document feedback and annotated content may be copied into chat history. <br>\nMitigation: Avoid using the skill with sensitive comments, screenshots, or document text unless that retention is acceptable. <br>\n\n\n## Reference(s): <br>\n- [ClawHub skill page](https://clawhub.ai/ljn-hust/html-collab) <br>\n- [html-collab live demo](https://ljn-hust.github.io/html-collab/) <br>\n\n\n## Skill Output: <br>\n**Output Type(s):** [Text, Markdown, Code, Shell commands, Configuration, Guidance] <br>\n**Output Format:** [Self-contained HTML files plus Markdown guidance with optional bash or Python snippets] <br>\n**Output Parameters:** [1D] <br>\n**Other Properties Related to Output:** [Generated or revised documents may include collab-data metadata, review comments, edits, an engine script, and optional base64 screenshots.] <br>\n\n## Skill Version(s): <br>\n0.1.4 (source: frontmatter and server release metadata) <br>\n\n## Ethical Considerations: <br>\nUsers should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment. <br>\n\nArchive v0.1.3: 4 files, 14994 bytes\n\nFiles: assets/template.html (31614b), skill-card.md (2523b), SKILL.md (8073b), _meta.json (130b)\n\nFile v0.1.3:SKILL.md\n\n---\nname: html-collab\nversion: 0.1.3\ndescription: >\n  Use this skill for any HTML document that will go through LLM–human review cycles.\n  Trigger when: the user asks to write, draft, or generate a document for review or feedback;\n  the user provides a .html file containing annotations or a collab-data block;\n  the user types /html-collab, /html-collab on, or /html-collab off;\n  a .html file contains an AI Bootstrap comment pointing to this skill.\n  When the user asks to \"write a doc\" or \"draft something for review\" without specifying a format,\n  default to html-collab format — don't wait to be asked.\n  /html-collab off triggers this skill too, but outputs clean presentation HTML instead.\n---\n\n# html-collab Skill\n\nUse this skill when creating documents meant for iterative LLM–human review, or when reading/revising annotated html-collab files.\n\n---\n\n## Commands\n\n### `/html-collab` or `/html-collab on`\nExplicitly enable html-collab format for subsequent document generation. Equivalent to the default behavior — use when the user wants to be explicit.\n\n### `/html-collab off`\nSwitch to **plain HTML mode** for subsequent output. Use when the user wants a clean, presentation-ready document — no `collab-data`, no `data-cid`, no engine script, no sidebar. Typical use case: a finished document ready for an audience, not for further annotation.\n\nPlain HTML output should be well-structured, self-contained, and styled — a document a reader can open directly in a browser with no toolbars or review UI.\n\n---\n\n## GENERATE — Create a new html-collab document\n\n**When:** User asks you to write, draft, or generate a document (and html-collab mode is on).\n\n**Steps:**\n\n1. Start with the content of `skill/assets/template.html` as your base structure. If you do not have local access to this file, do not fetch it automatically — instead, ask the user to install the skill first (`clawhub install html-collab`) or provide the template file directly.\n   - **Output path (Claude Code):** Write the generated file to `~/Documents/html-collab/<filename>-<yyyymmddhhmm>.html`. Create the directory if it does not exist (`mkdir -p ~/Documents/html-collab`). This matches the default folder the browser Save dialog opens in, so all versions stay together.\n2. Fill `<article id=\"collab-content\">` with semantic HTML:\n   - Use `<h1>` for the document title, `<h2>` for sections, `<p>` for paragraphs, `<ul>`/`<li>` for lists.\n3. Assign a `data-cid` attribute to **every** block element. Rules:\n   - Format: `<type>-<zero-padded-3-digits>` — e.g. `p-001`, `h-001`, `sec-001`, `li-001`\n   - Types: `p` → `<p>`, `h` → `<h1>`–`<h6>`, `sec` → `<section>`, `li` → `<li>`, `bq` → `<blockquote>`, `pre` → `<pre>`, `tbl` → `<table>`\n   - Sequential per type across the whole document (not per section)\n   - Every block must have one; never skip or duplicate\n4. Populate `collab-data` meta:\n   - `title`: the document title\n   - `originalCreated` and `lastRevised`: both set to the current ISO timestamp\n   - `model`: your model identifier\n   - `maxImageBytes`: 51200 (default = 50 KB; do not change unless user specifies)\n   - `imageStorage`: \"base64\"\n   - `comments`: []\n   - `edits`: []\n5. **Document-level UI belongs inside the article, not in the framework.**\n   - `#collab-header` (the top bar with the Save button) and `#collab-sidebar` (the comment panel) belong exclusively to the html-collab engine.\n   - If the document needs custom UI controls (e.g. a language toggle, a table of contents, a theme switch), place them **inside `<article id=\"collab-content\">`** — as a block at the top of the article or a floating element relative to `#collab-main`.\n   - Putting custom controls in the framework header confuses human reviewers into thinking they're engine features.\n6. Output the complete `.html` file.\n\n---\n\n## READ — Extract context from an annotated file\n\n**When:** User provides a `.html` file that has been annotated by a human.\n\n**Reading efficiently:**\n- Skip everything between `<!-- collab:llm-skip:start -->` and `<!-- collab:llm-skip:end -->` — this is engine CSS/JS you do not need to parse.\n- If `meta.summary` is present in collab-data, read it first for a compact structural index before parsing the full article.\n\n**Steps:**\n\n1. Parse `<article id=\"collab-content\">` — this is the document text.\n2. Parse the JSON inside `<script type=\"application/json\" id=\"collab-data\">`.\n3. Build and present this context block **in the conversation before doing anything else**:\n\n```\n[DOCUMENT CONTENT]\n<paste the inner HTML of <article id=\"collab-content\"> here>\n\n[HUMAN FEEDBACK]\n\nComments:\n  · [<target>] \"<quote>\" → \"<comment text>\" [screenshot, <size>, base64]\n\nEdits:\n  · [<target>] \"<original>\" → \"<revised>\"\n```\n\n   Always output this block even if there are no comments or edits — it confirms to the user what you read. This conversation record is permanent: REVISE will clear comments and edits from the file, but the feedback is preserved here in the chat history.\n\n4. Image handling — per environment:\n   - **Bash tool available (e.g. Claude Code):** For each image where `sizeBytes > meta.maxImageBytes`, compress it with a script and write the compressed base64 back to `data`, update `sizeBytes`, add `\"compressedBy\": \"<model-id>\"`. Example using Python/Pillow:\n     ```bash\n     python3 - <<'PYEOF'\n     import base64, io, sys\n     from PIL import Image\n     data = base64.b64decode(\"\"\"PASTE_BASE64_HERE\"\"\")\n     img = Image.open(io.BytesIO(data))\n     out = io.BytesIO()\n     img.save(out, 'JPEG', quality=55, optimize=True)\n     print(base64.b64encode(out.getvalue()).decode())\n     PYEOF\n     ```\n   - **Multimodal, no Bash:** Receive the image as a visual input for understanding. In output, set `data` to `null` and add `\"compressedBy\": null, \"description\": \"<one-sentence summary of the screenshot>\"`.\n   - **Text-only model:** Replace each image with `[screenshot, <size>KB, base64-omitted]` in the context block. Do not include the raw base64 string.\n\n5. Where the same `data-cid` appears in both Comments and Edits: the comment's quote reflects the **original** (pre-edit) text. In REVISE, apply the edit first, then interpret the comment against the updated text.\n\n---\n\n## REVISE — Produce a new version incorporating human feedback\n\n**When:** After READ, the user asks you to revise the document.\n\n**Steps:**\n\n1. For each entry in `edits`: replace the text of the corresponding `data-cid` block with `revised` verbatim.\n2. For each entry in `comments`: revise the content of the targeted block to address the feedback. For blocks with both an edit and a comment, apply the edit first, then address the comment.\n3. Add new blocks as needed: assign fresh CIDs continuing from the highest existing number for each type (e.g. if `p-007` exists, next paragraph is `p-008`).\n4. Remove blocks as needed: retire their CIDs permanently — never reuse them.\n5. Output the revised `.html` file:\n   - Updated `<article>` content\n   - All original `data-cid` values preserved (do not reassign existing IDs)\n   - `collab-data` reset: `comments: []`, `edits: []`\n   - `meta.lastRevised` updated to current timestamp\n   - `meta.model` updated to your model identifier\n   - `meta.originalCreated` **unchanged**\n   - `meta.versionHash` set to `\"\"` — the engine recomputes this on next browser save\n   - `meta.summary` set to `\"\"` — the engine recomputes this on next browser save\n   - **File output by environment:**\n     - **Bash/file access available (e.g. Claude Code):** Write directly over the original file. The conversation history preserves the feedback record; no extra file needed.\n     - **Chat environment (no file access):** Suggest a filename using the document title and today's date — e.g. `market-analysis-20260606.html`. This lets users build a natural version sequence in their folder without manual renaming.\n\n---\n\n---\n\n## Reference\n\n- Template: `skill/assets/template.html`\n- Example: `examples/example.html`\n- Live demo: `index.html` (or https://ljn-hust.github.io/html-collab/)\n\nFile v0.1.3:_meta.json\n\n{\n  \"ownerId\": \"kn79a5ae0tx2c4q7bwc3s3tkr583975r\",\n  \"slug\": \"html-collab\",\n  \"version\": \"0.1.3\",\n  \"publishedAt\": 1781428446093\n}\n\nFile v0.1.3:skill-card.md\n\n## Description: <br>\nhtml-collab helps agents create, read, and revise self-contained HTML documents for iterative LLM-human review cycles with embedded comments, edits, and collaboration metadata. <br>\n\nThis skill is ready for commercial/non-commercial use. <br>\n\n## Publisher: <br>\n[ljn-hust](https://clawhub.ai/user/ljn-hust) <br>\n\n### License/Terms of Use: <br>\nMIT-0 <br>\n\n\n## Use Case: <br>\nDevelopers, writers, and reviewers use this skill to draft browser-openable HTML documents that preserve human comments, edits, screenshots, and revision metadata for agent-assisted review cycles. It also supports reading annotated html-collab files, summarizing their feedback, and producing revised versions. <br>\n\n### Deployment Geography for Use: <br>\nGlobal <br>\n\n## Known Risks and Mitigations: <br>\nRisk: The skill can activate for broad document drafting and review requests, which may surprise users who expected plain output. <br>\nMitigation: Install it only when the html-collab workflow is desired, and use /html-collab off when a clean presentation HTML document is needed. <br>\nRisk: The skill can create or overwrite local HTML files during generation and revision workflows. <br>\nMitigation: Ask the agent to show the target path before writing and save a copy instead of overwriting important originals. <br>\nRisk: Optional image compression may process embedded image data with Python and Pillow. <br>\nMitigation: Run the compression step only when needed and avoid processing images from untrusted HTML files. <br>\n\n\n## Reference(s): <br>\n- [ClawHub release page](https://clawhub.ai/ljn-hust/html-collab) <br>\n- [html-collab live demo](https://ljn-hust.github.io/html-collab/) <br>\n\n\n## Skill Output: <br>\n**Output Type(s):** [text, markdown, code, shell commands, configuration, guidance] <br>\n**Output Format:** [HTML files, Markdown feedback summaries, and inline shell or Python snippets when image compression is needed] <br>\n**Output Parameters:** [1D] <br>\n**Other Properties Related to Output:** [Generated HTML uses collab-data metadata, data-cid block identifiers, embedded review state, and optional base64 image attachments.] <br>\n\n## Skill Version(s): <br>\n0.1.3 (source: frontmatter and server release evidence) <br>\n\n## Ethical Considerations: <br>\nUsers should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment. <br>\n\nArchive v0.1.2: 4 files, 14687 bytes\n\nFiles: assets/template.html (31252b), skill-card.md (2429b), SKILL.md (7774b), _meta.json (130b)\n\nFile v0.1.2:SKILL.md\n\n---\nname: html-collab\nversion: 0.1.2\ndescription: >\n  Use this skill for any HTML document that will go through LLM–human review cycles.\n  Trigger when: the user asks to write, draft, or generate a document for review or feedback;\n  the user provides a .html file containing annotations or a collab-data block;\n  the user types /html-collab, /html-collab on, or /html-collab off;\n  a .html file contains an AI Bootstrap comment pointing to this skill.\n  When the user asks to \"write a doc\" or \"draft something for review\" without specifying a format,\n  default to html-collab format — don't wait to be asked.\n  /html-collab off triggers this skill too, but outputs clean presentation HTML instead.\n---\n\n# html-collab Skill\n\nUse this skill when creating documents meant for iterative LLM–human review, or when reading/revising annotated html-collab files.\n\n---\n\n## Commands\n\n### `/html-collab` or `/html-collab on`\nExplicitly enable html-collab format for subsequent document generation. Equivalent to the default behavior — use when the user wants to be explicit.\n\n### `/html-collab off`\nSwitch to **plain HTML mode** for subsequent output. Use when the user wants a clean, presentation-ready document — no `collab-data`, no `data-cid`, no engine script, no sidebar. Typical use case: a finished document ready for an audience, not for further annotation.\n\nPlain HTML output should be well-structured, self-contained, and styled — a document a reader can open directly in a browser with no toolbars or review UI.\n\n---\n\n## GENERATE — Create a new html-collab document\n\n**When:** User asks you to write, draft, or generate a document (and html-collab mode is on).\n\n**Steps:**\n\n1. Start with the content of `skill/assets/template.html` as your base structure. If you do not have local access to this file, do not fetch it automatically — instead, ask the user to install the skill first (`clawhub install html-collab`) or provide the template file directly.\n2. Fill `<article id=\"collab-content\">` with semantic HTML:\n   - Use `<h1>` for the document title, `<h2>` for sections, `<p>` for paragraphs, `<ul>`/`<li>` for lists.\n3. Assign a `data-cid` attribute to **every** block element. Rules:\n   - Format: `<type>-<zero-padded-3-digits>` — e.g. `p-001`, `h-001`, `sec-001`, `li-001`\n   - Types: `p` → `<p>`, `h` → `<h1>`–`<h6>`, `sec` → `<section>`, `li` → `<li>`, `bq` → `<blockquote>`, `pre` → `<pre>`, `tbl` → `<table>`\n   - Sequential per type across the whole document (not per section)\n   - Every block must have one; never skip or duplicate\n4. Populate `collab-data` meta:\n   - `title`: the document title\n   - `originalCreated` and `lastRevised`: both set to the current ISO timestamp\n   - `model`: your model identifier\n   - `maxImageBytes`: 51200 (default = 50 KB; do not change unless user specifies)\n   - `imageStorage`: \"base64\"\n   - `comments`: []\n   - `edits`: []\n5. **Document-level UI belongs inside the article, not in the framework.**\n   - `#collab-header` (the top bar with the Save button) and `#collab-sidebar` (the comment panel) belong exclusively to the html-collab engine.\n   - If the document needs custom UI controls (e.g. a language toggle, a table of contents, a theme switch), place them **inside `<article id=\"collab-content\">`** — as a block at the top of the article or a floating element relative to `#collab-main`.\n   - Putting custom controls in the framework header confuses human reviewers into thinking they're engine features.\n6. Output the complete `.html` file.\n\n---\n\n## READ — Extract context from an annotated file\n\n**When:** User provides a `.html` file that has been annotated by a human.\n\n**Reading efficiently:**\n- Skip everything between `<!-- collab:llm-skip:start -->` and `<!-- collab:llm-skip:end -->` — this is engine CSS/JS you do not need to parse.\n- If `meta.summary` is present in collab-data, read it first for a compact structural index before parsing the full article.\n\n**Steps:**\n\n1. Parse `<article id=\"collab-content\">` — this is the document text.\n2. Parse the JSON inside `<script type=\"application/json\" id=\"collab-data\">`.\n3. Build and present this context block **in the conversation before doing anything else**:\n\n```\n[DOCUMENT CONTENT]\n<paste the inner HTML of <article id=\"collab-content\"> here>\n\n[HUMAN FEEDBACK]\n\nComments:\n  · [<target>] \"<quote>\" → \"<comment text>\" [screenshot, <size>, base64]\n\nEdits:\n  · [<target>] \"<original>\" → \"<revised>\"\n```\n\n   Always output this block even if there are no comments or edits — it confirms to the user what you read. This conversation record is permanent: REVISE will clear comments and edits from the file, but the feedback is preserved here in the chat history.\n\n4. Image handling — per environment:\n   - **Bash tool available (e.g. Claude Code):** For each image where `sizeBytes > meta.maxImageBytes`, compress it with a script and write the compressed base64 back to `data`, update `sizeBytes`, add `\"compressedBy\": \"<model-id>\"`. Example using Python/Pillow:\n     ```bash\n     python3 - <<'PYEOF'\n     import base64, io, sys\n     from PIL import Image\n     data = base64.b64decode(\"\"\"PASTE_BASE64_HERE\"\"\")\n     img = Image.open(io.BytesIO(data))\n     out = io.BytesIO()\n     img.save(out, 'JPEG', quality=55, optimize=True)\n     print(base64.b64encode(out.getvalue()).decode())\n     PYEOF\n     ```\n   - **Multimodal, no Bash:** Receive the image as a visual input for understanding. In output, set `data` to `null` and add `\"compressedBy\": null, \"description\": \"<one-sentence summary of the screenshot>\"`.\n   - **Text-only model:** Replace each image with `[screenshot, <size>KB, base64-omitted]` in the context block. Do not include the raw base64 string.\n\n5. Where the same `data-cid` appears in both Comments and Edits: the comment's quote reflects the **original** (pre-edit) text. In REVISE, apply the edit first, then interpret the comment against the updated text.\n\n---\n\n## REVISE — Produce a new version incorporating human feedback\n\n**When:** After READ, the user asks you to revise the document.\n\n**Steps:**\n\n1. For each entry in `edits`: replace the text of the corresponding `data-cid` block with `revised` verbatim.\n2. For each entry in `comments`: revise the content of the targeted block to address the feedback. For blocks with both an edit and a comment, apply the edit first, then address the comment.\n3. Add new blocks as needed: assign fresh CIDs continuing from the highest existing number for each type (e.g. if `p-007` exists, next paragraph is `p-008`).\n4. Remove blocks as needed: retire their CIDs permanently — never reuse them.\n5. Output the revised `.html` file:\n   - Updated `<article>` content\n   - All original `data-cid` values preserved (do not reassign existing IDs)\n   - `collab-data` reset: `comments: []`, `edits: []`\n   - `meta.lastRevised` updated to current timestamp\n   - `meta.model` updated to your model identifier\n   - `meta.originalCreated` **unchanged**\n   - `meta.versionHash` set to `\"\"` — the engine recomputes this on next browser save\n   - `meta.summary` set to `\"\"` — the engine recomputes this on next browser save\n   - **File output by environment:**\n     - **Bash/file access available (e.g. Claude Code):** Write directly over the original file. The conversation history preserves the feedback record; no extra file needed.\n     - **Chat environment (no file access):** Suggest a filename using the document title and today's date — e.g. `market-analysis-20260606.html`. This lets users build a natural version sequence in their folder without manual renaming.\n\n---\n\n---\n\n## Reference\n\n- Template: `skill/assets/template.html`\n- Example: `examples/example.html`\n- Live demo: `index.html` (or https://ljn-hust.github.io/html-collab/)\n\nFile v0.1.2:_meta.json\n\n{\n  \"ownerId\": \"kn79a5ae0tx2c4q7bwc3s3tkr583975r\",\n  \"slug\": \"html-collab\",\n  \"version\": \"0.1.2\",\n  \"publishedAt\": 1781022704767\n}\n\nFile v0.1.2:skill-card.md\n\n## Description: <br>\nhtml-collab helps agents create, read, and revise self-contained HTML documents that preserve human comments, edits, and screenshot annotations for iterative review. <br>\n\nThis skill is ready for commercial/non-commercial use. <br>\n\n## Publisher: <br>\n[ljn-hust](https://clawhub.ai/user/ljn-hust) <br>\n\n### License/Terms of Use: <br>\nMIT-0 <br>\n\n\n## Use Case: <br>\nDevelopers, writers, and reviewers use this skill to draft HTML documents for LLM-human review cycles and to revise annotated files while preserving feedback in the conversation. <br>\n\n### Deployment Geography for Use: <br>\nGlobal <br>\n\n## Known Risks and Mitigations: <br>\nRisk: Annotated files can contain embedded comments, edits, and pasted screenshots, including base64 image data. <br>\nMitigation: Avoid using the workflow for sensitive material unless storing that data inside the HTML file is acceptable; review the file before sharing and use clean plain HTML output for final distribution. <br>\nRisk: The skill may choose html-collab format for broad document-review prompts. <br>\nMitigation: Explicitly request /html-collab off or a different output format when a review container is not desired. <br>\nRisk: In file-access environments, revisions may be written back over the original annotated HTML file. <br>\nMitigation: Keep a versioned copy before revision when preserving the original annotated state matters. <br>\n\n\n## Reference(s): <br>\n- [ClawHub html-collab release](https://clawhub.ai/ljn-hust/html-collab) <br>\n- [html-collab live demo](https://ljn-hust.github.io/html-collab/) <br>\n\n\n## Skill Output: <br>\n**Output Type(s):** [text, markdown, code, configuration, guidance] <br>\n**Output Format:** [Self-contained HTML documents, clean presentation HTML, and Markdown or plain-text review summaries.] <br>\n**Output Parameters:** [1D] <br>\n**Other Properties Related to Output:** [Generated html-collab files embed collab-data JSON for comments, edits, image metadata, and review state; /html-collab off produces plain HTML without the review engine.] <br>\n\n## Skill Version(s): <br>\n0.1.2 (source: frontmatter and server release evidence) <br>\n\n## Ethical Considerations: <br>\nUsers should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment. <br>\n\nArchive v0.1.1: 4 files, 14768 bytes\n\nFiles: assets/template.html (31252b), skill-card.md (2645b), SKILL.md (7844b), _meta.json (130b)\n\nFile v0.1.1:SKILL.md\n\n---\nname: html-collab\nversion: 0.1.1\ndescription: >\n  Use this skill for any HTML document that will go through LLM–human review cycles.\n  Trigger when: the user asks to write, draft, or generate a document for review or feedback;\n  the user provides a .html file containing annotations or a collab-data block;\n  the user types /html-collab, /html-collab on, or /html-collab off;\n  a .html file contains an AI Bootstrap comment pointing to this skill.\n  When the user asks to \"write a doc\" or \"draft something for review\" without specifying a format,\n  default to html-collab format — don't wait to be asked.\n  /html-collab off triggers this skill too, but outputs clean presentation HTML instead.\n---\n\n# html-collab Skill\n\nUse this skill when creating documents meant for iterative LLM–human review, or when reading/revising annotated html-collab files.\n\n---\n\n## Commands\n\n### `/html-collab` or `/html-collab on`\nExplicitly enable html-collab format for subsequent document generation. Equivalent to the default behavior — use when the user wants to be explicit.\n\n### `/html-collab off`\nSwitch to **plain HTML mode** for subsequent output. Use when the user wants a clean, presentation-ready document — no `collab-data`, no `data-cid`, no engine script, no sidebar. Typical use case: a finished document ready for an audience, not for further annotation.\n\nPlain HTML output should be well-structured, self-contained, and styled — a document a reader can open directly in a browser with no toolbars or review UI.\n\n---\n\n## GENERATE — Create a new html-collab document\n\n**When:** User asks you to write, draft, or generate a document (and html-collab mode is on).\n\n**Steps:**\n\n1. Start with the content of `skill/assets/template.html` as your base structure (also available at `https://raw.githubusercontent.com/ljn-hust/html-collab/main/skill/assets/template.html`). If you do not have local access, fetch it from the URL above.\n2. Fill `<article id=\"collab-content\">` with semantic HTML:\n   - Use `<h1>` for the document title, `<h2>` for sections, `<p>` for paragraphs, `<ul>`/`<li>` for lists.\n3. Assign a `data-cid` attribute to **every** block element. Rules:\n   - Format: `<type>-<zero-padded-3-digits>` — e.g. `p-001`, `h-001`, `sec-001`, `li-001`\n   - Types: `p` → `<p>`, `h` → `<h1>`–`<h6>`, `sec` → `<section>`, `li` → `<li>`, `bq` → `<blockquote>`, `pre` → `<pre>`, `tbl` → `<table>`\n   - Sequential per type across the whole document (not per section)\n   - Every block must have one; never skip or duplicate\n4. Populate `collab-data` meta:\n   - `title`: the document title\n   - `originalCreated` and `lastRevised`: both set to the current ISO timestamp\n   - `model`: your model identifier\n   - `maxImageBytes`: 51200 (default = 50 KB; do not change unless user specifies)\n   - `imageStorage`: \"base64\"\n   - `comments`: []\n   - `edits`: []\n5. **Document-level UI belongs inside the article, not in the framework.**\n   - `#collab-header` (the top bar with the Save button) and `#collab-sidebar` (the comment panel) belong exclusively to the html-collab engine.\n   - If the document needs custom UI controls (e.g. a language toggle, a table of contents, a theme switch), place them **inside `<article id=\"collab-content\">`** — as a block at the top of the article or a floating element relative to `#collab-main`.\n   - Putting custom controls in the framework header confuses human reviewers into thinking they're engine features.\n6. Output the complete `.html` file.\n\n---\n\n## READ — Extract context from an annotated file\n\n**When:** User provides a `.html` file that has been annotated by a human.\n\n**Reading efficiently:**\n- Skip everything between `<!-- collab:llm-skip:start -->` and `<!-- collab:llm-skip:end -->` — this is engine CSS/JS you do not need to parse.\n- If `meta.summary` is present in collab-data, read it first for a compact structural index before parsing the full article.\n\n**Steps:**\n\n1. Parse `<article id=\"collab-content\">` — this is the document text.\n2. Parse the JSON inside `<script type=\"application/json\" id=\"collab-data\">`.\n3. Build and present this context block **in the conversation before doing anything else**:\n\n```\n[DOCUMENT CONTENT]\n<paste the inner HTML of <article id=\"collab-content\"> here>\n\n[HUMAN FEEDBACK]\n\nComments:\n  · [<target>] \"<quote>\" → \"<comment text>\" [screenshot, <size>, base64]\n\nEdits:\n  · [<target>] \"<original>\" → \"<revised>\"\n```\n\n   Always output this block even if there are no comments or edits — it confirms to the user what you read. This conversation record is permanent: REVISE will clear comments and edits from the file, but the feedback is preserved here in the chat history.\n\n4. Image handling — per environment:\n   - **Bash tool available (e.g. Claude Code):** For each image where `sizeBytes > meta.maxImageBytes`, compress it with a script and write the compressed base64 back to `data`, update `sizeBytes`, add `\"compressedBy\": \"<model-id>\"`. Example using Python/Pillow:\n     ```bash\n     python3 - <<'PYEOF'\n     import base64, io, sys\n     from PIL import Image\n     data = base64.b64decode(\"\"\"PASTE_BASE64_HERE\"\"\")\n     img = Image.open(io.BytesIO(data))\n     out = io.BytesIO()\n     img.save(out, 'JPEG', quality=55, optimize=True)\n     print(base64.b64encode(out.getvalue()).decode())\n     PYEOF\n     ```\n   - **Multimodal, no Bash:** Receive the image as a visual input for understanding. In output, set `data` to `null` and add `\"compressedBy\": null, \"description\": \"<one-sentence summary of the screenshot>\"`.\n   - **Text-only model:** Replace each image with `[screenshot, <size>KB, base64-omitted]` in the context block. Do not include the raw base64 string.\n\n5. Where the same `data-cid` appears in both Comments and Edits: the comment's quote reflects the **original** (pre-edit) text. In REVISE, apply the edit first, then interpret the comment against the updated text.\n\n---\n\n## REVISE — Produce a new version incorporating human feedback\n\n**When:** After READ, the user asks you to revise the document.\n\n**Steps:**\n\n1. For each entry in `edits`: replace the text of the corresponding `data-cid` block with `revised` verbatim.\n2. For each entry in `comments`: revise the content of the targeted block to address the feedback. For blocks with both an edit and a comment, apply the edit first, then address the comment.\n3. Add new blocks as needed: assign fresh CIDs continuing from the highest existing number for each type (e.g. if `p-007` exists, next paragraph is `p-008`).\n4. Remove blocks as needed: retire their CIDs permanently — never reuse them.\n5. Output the revised `.html` file:\n   - Updated `<article>` content\n   - All original `data-cid` values preserved (do not reassign existing IDs)\n   - `collab-data` reset: `comments: []`, `edits: []`\n   - `meta.lastRevised` updated to current timestamp\n   - `meta.model` updated to your model identifier\n   - `meta.originalCreated` **unchanged**\n   - `meta.versionHash` set to `\"\"` — the engine recomputes this on next browser save\n   - `meta.summary` set to `\"\"` — the engine recomputes this on next browser save\n   - **File output by environment:**\n     - **Bash/file access available (e.g. Claude Code):** Write directly over the original file. The conversation history preserves the feedback record; no extra file needed.\n     - **Chat environment (no file access):** Suggest a filename using the document title and today's date — e.g. `market-analysis-20260606.html`. This lets users build a natural version sequence in their folder without manual renaming.\n\n---\n\n---\n\n## Reference\n\n- Template: `skill/assets/template.html` (remote: `https://raw.githubusercontent.com/ljn-hust/html-collab/main/skill/assets/template.html`)\n- Example: `examples/example.html`\n- Live demo: `index.html` (or https://ljn-hust.github.io/html-collab/)\n\nFile v0.1.1:_meta.json\n\n{\n  \"ownerId\": \"kn79a5ae0tx2c4q7bwc3s3tkr583975r\",\n  \"slug\": \"html-collab\",\n  \"version\": \"0.1.1\",\n  \"publishedAt\": 1780979390205\n}\n\nFile v0.1.1:skill-card.md\n\n## Description: <br>\nUse this skill for HTML documents that go through iterative LLM-human review cycles, including drafting, reading annotated files, and revising documents from reviewer feedback. <br>\n\nThis skill is ready for commercial/non-commercial use. <br>\n\n## Publisher: <br>\n[ljn-hust](https://clawhub.ai/user/ljn-hust) <br>\n\n### License/Terms of Use: <br>\nMIT-0 <br>\n\n\n## Use Case: <br>\nDevelopers, writers, and reviewers use this skill to create review-ready HTML documents, capture human comments and edits, and produce revised or clean presentation HTML. <br>\n\n### Deployment Geography for Use: <br>\nGlobal <br>\n\n## Known Risks and Mitigations: <br>\nRisk: The skill activates broadly for document drafting and review-oriented HTML workflows. <br>\nMitigation: Install it only when html-collab should be the default format for review documents, and disable or avoid it for workflows that should produce plain files. <br>\nRisk: Annotated document content and reviewer feedback may be placed into chat history. <br>\nMitigation: Avoid using the skill with sensitive documents unless that retention pattern is acceptable. <br>\nRisk: Revision behavior can overwrite the original HTML file in file-access environments. <br>\nMitigation: Ask the agent to create a versioned copy or backup before revising files. <br>\nRisk: The workflow may fetch a remote template or run image-compression commands when local assets are unavailable or screenshots are large. <br>\nMitigation: Require explicit approval before remote fetches or image-compression scripts are run. <br>\n\n\n## Reference(s): <br>\n- [ClawHub skill page](https://clawhub.ai/ljn-hust/html-collab) <br>\n- [Remote template](https://raw.githubusercontent.com/ljn-hust/html-collab/main/skill/assets/template.html) <br>\n- [Live demo](https://ljn-hust.github.io/html-collab/) <br>\n\n\n## Skill Output: <br>\n**Output Type(s):** [text, markdown, code, shell commands, configuration, guidance] <br>\n**Output Format:** [HTML files, Markdown context summaries, inline shell commands, and guidance] <br>\n**Output Parameters:** [1D] <br>\n**Other Properties Related to Output:** [May create or revise HTML documents, preserve data-cid identifiers, reset review metadata after revision, and produce clean presentation HTML when requested.] <br>\n\n## Skill Version(s): <br>\n0.1.1 (source: frontmatter and release evidence) <br>\n\n## Ethical Considerations: <br>\nUsers should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment. <br>\n\nArchive v0.1.0: 4 files, 14622 bytes\n\nFiles: assets/template.html (30920b), skill-card.md (2614b), SKILL.md (7844b), _meta.json (130b)\n\nFile v0.1.0:SKILL.md\n\n---\nname: html-collab\nversion: 0.1.0\ndescription: >\n  Use this skill for any HTML document that will go through LLM–human review cycles.\n  Trigger when: the user asks to write, draft, or generate a document for review or feedback;\n  the user provides a .html file containing annotations or a collab-data block;\n  the user types /html-collab, /html-collab on, or /html-collab off;\n  a .html file contains an AI Bootstrap comment pointing to this skill.\n  When the user asks to \"write a doc\" or \"draft something for review\" without specifying a format,\n  default to html-collab format — don't wait to be asked.\n  /html-collab off triggers this skill too, but outputs clean presentation HTML instead.\n---\n\n# html-collab Skill\n\nUse this skill when creating documents meant for iterative LLM–human review, or when reading/revising annotated html-collab files.\n\n---\n\n## Commands\n\n### `/html-collab` or `/html-collab on`\nExplicitly enable html-collab format for subsequent document generation. Equivalent to the default behavior — use when the user wants to be explicit.\n\n### `/html-collab off`\nSwitch to **plain HTML mode** for subsequent output. Use when the user wants a clean, presentation-ready document — no `collab-data`, no `data-cid`, no engine script, no sidebar. Typical use case: a finished document ready for an audience, not for further annotation.\n\nPlain HTML output should be well-structured, self-contained, and styled — a document a reader can open directly in a browser with no toolbars or review UI.\n\n---\n\n## GENERATE — Create a new html-collab document\n\n**When:** User asks you to write, draft, or generate a document (and html-collab mode is on).\n\n**Steps:**\n\n1. Start with the content of `skill/assets/template.html` as your base structure (also available at `https://raw.githubusercontent.com/ljn-hust/html-collab/main/skill/assets/template.html`). If you do not have local access, fetch it from the URL above.\n2. Fill `<article id=\"collab-content\">` with semantic HTML:\n   - Use `<h1>` for the document title, `<h2>` for sections, `<p>` for paragraphs, `<ul>`/`<li>` for lists.\n3. Assign a `data-cid` attribute to **every** block element. Rules:\n   - Format: `<type>-<zero-padded-3-digits>` — e.g. `p-001`, `h-001`, `sec-001`, `li-001`\n   - Types: `p` → `<p>`, `h` → `<h1>`–`<h6>`, `sec` → `<section>`, `li` → `<li>`, `bq` → `<blockquote>`, `pre` → `<pre>`, `tbl` → `<table>`\n   - Sequential per type across the whole document (not per section)\n   - Every block must have one; never skip or duplicate\n4. Populate `collab-data` meta:\n   - `title`: the document title\n   - `originalCreated` and `lastRevised`: both set to the current ISO timestamp\n   - `model`: your model identifier\n   - `maxImageBytes`: 51200 (default = 50 KB; do not change unless user specifies)\n   - `imageStorage`: \"base64\"\n   - `comments`: []\n   - `edits`: []\n5. **Document-level UI belongs inside the article, not in the framework.**\n   - `#collab-header` (the top bar with the Save button) and `#collab-sidebar` (the comment panel) belong exclusively to the html-collab engine.\n   - If the document needs custom UI controls (e.g. a language toggle, a table of contents, a theme switch), place them **inside `<article id=\"collab-content\">`** — as a block at the top of the article or a floating element relative to `#collab-main`.\n   - Putting custom controls in the framework header confuses human reviewers into thinking they're engine features.\n6. Output the complete `.html` file.\n\n---\n\n## READ — Extract context from an annotated file\n\n**When:** User provides a `.html` file that has been annotated by a human.\n\n**Reading efficiently:**\n- Skip everything between `<!-- collab:llm-skip:start -->` and `<!-- collab:llm-skip:end -->` — this is engine CSS/JS you do not need to parse.\n- If `meta.summary` is present in collab-data, read it first for a compact structural index before parsing the full article.\n\n**Steps:**\n\n1. Parse `<article id=\"collab-content\">` — this is the document text.\n2. Parse the JSON inside `<script type=\"application/json\" id=\"collab-data\">`.\n3. Build and present this context block **in the conversation before doing anything else**:\n\n```\n[DOCUMENT CONTENT]\n<paste the inner HTML of <article id=\"collab-content\"> here>\n\n[HUMAN FEEDBACK]\n\nComments:\n  · [<target>] \"<quote>\" → \"<comment text>\" [screenshot, <size>, base64]\n\nEdits:\n  · [<target>] \"<original>\" → \"<revised>\"\n```\n\n   Always output this block even if there are no comments or edits — it confirms to the user what you read. This conversation record is permanent: REVISE will clear comments and edits from the file, but the feedback is preserved here in the chat history.\n\n4. Image handling — per environment:\n   - **Bash tool available (e.g. Claude Code):** For each image where `sizeBytes > meta.maxImageBytes`, compress it with a script and write the compressed base64 back to `data`, update `sizeBytes`, add `\"compressedBy\": \"<model-id>\"`. Example using Python/Pillow:\n     ```bash\n     python3 - <<'PYEOF'\n     import base64, io, sys\n     from PIL import Image\n     data = base64.b64decode(\"\"\"PASTE_BASE64_HERE\"\"\")\n     img = Image.open(io.BytesIO(data))\n     out = io.BytesIO()\n     img.save(out, 'JPEG', quality=55, optimize=True)\n     print(base64.b64encode(out.getvalue()).decode())\n     PYEOF\n     ```\n   - **Multimodal, no Bash:** Receive the image as a visual input for understanding. In output, set `data` to `null` and add `\"compressedBy\": null, \"description\": \"<one-sentence summary of the screenshot>\"`.\n   - **Text-only model:** Replace each image with `[screenshot, <size>KB, base64-omitted]` in the context block. Do not include the raw base64 string.\n\n5. Where the same `data-cid` appears in both Comments and Edits: the comment's quote reflects the **original** (pre-edit) text. In REVISE, apply the edit first, then interpret the comment against the updated text.\n\n---\n\n## REVISE — Produce a new version incorporating human feedback\n\n**When:** After READ, the user asks you to revise the document.\n\n**Steps:**\n\n1. For each entry in `edits`: replace the text of the corresponding `data-cid` block with `revised` verbatim.\n2. For each entry in `comments`: revise the content of the targeted block to address the feedback. For blocks with both an edit and a comment, apply the edit first, then address the comment.\n3. Add new blocks as needed: assign fresh CIDs continuing from the highest existing number for each type (e.g. if `p-007` exists, next paragraph is `p-008`).\n4. Remove blocks as needed: retire their CIDs permanently — never reuse them.\n5. Output the revised `.html` file:\n   - Updated `<article>` content\n   - All original `data-cid` values preserved (do not reassign existing IDs)\n   - `collab-data` reset: `comments: []`, `edits: []`\n   - `meta.lastRevised` updated to current timestamp\n   - `meta.model` updated to your model identifier\n   - `meta.originalCreated` **unchanged**\n   - `meta.versionHash` set to `\"\"` — the engine recomputes this on next browser save\n   - `meta.summary` set to `\"\"` — the engine recomputes this on next browser save\n   - **File output by environment:**\n     - **Bash/file access available (e.g. Claude Code):** Write directly over the original file. The conversation history preserves the feedback record; no extra file needed.\n     - **Chat environment (no file access):** Suggest a filename using the document title and today's date — e.g. `market-analysis-20260606.html`. This lets users build a natural version sequence in their folder without manual renaming.\n\n---\n\n---\n\n## Reference\n\n- Template: `skill/assets/template.html` (remote: `https://raw.githubusercontent.com/ljn-hust/html-collab/main/skill/assets/template.html`)\n- Example: `examples/example.html`\n- Live demo: `index.html` (or https://ljn-hust.github.io/html-collab/)\n\nFile v0.1.0:_meta.json\n\n{\n  \"ownerId\": \"kn79a5ae0tx2c4q7bwc3s3tkr583975r\",\n  \"slug\": \"html-collab\",\n  \"version\": \"0.1.0\",\n  \"publishedAt\": 1780744492369\n}\n\nFile v0.1.0:skill-card.md\n\n## Description: <br>\nUse this skill for HTML documents that go through LLM-human review cycles, including generating reviewable files, reading annotations, and revising annotated documents. <br>\n\nThis skill is ready for commercial/non-commercial use. <br>\n\n## Publisher: <br>\n[ljn-hust](https://clawhub.ai/user/ljn-hust) <br>\n\n### License/Terms of Use: <br>\nMIT-0 <br>\n\n\n## Use Case: <br>\nDevelopers, writers, and review teams use this skill to produce self-contained HTML documents for iterative LLM-human feedback, then read comments and edits from annotated files and generate revised versions. <br>\n\n### Deployment Geography for Use: <br>\nGlobal <br>\n\n## Known Risks and Mitigations: <br>\nRisk: Broad activation can cause ordinary document drafting requests to use html-collab format by default. <br>\nMitigation: Install only when reviewable html-collab output is desired, and use /html-collab off when a clean presentation document is needed. <br>\nRisk: The skill can copy full document text, comments, edits, and screenshots into the conversation. <br>\nMitigation: Avoid confidential drafts unless the user accepts that document content and feedback may be exposed in chat history. <br>\nRisk: Revision behavior may overwrite the original HTML file in environments with file access. <br>\nMitigation: Keep backups or versioned copies before applying revisions. <br>\nRisk: The artifact references a remote GitHub fallback for the HTML template. <br>\nMitigation: Prefer the bundled template from the installed artifact and review any remote fallback before use. <br>\n\n\n## Reference(s): <br>\n- [ClawHub skill page](https://clawhub.ai/ljn-hust/html-collab) <br>\n- [html-collab template](https://raw.githubusercontent.com/ljn-hust/html-collab/main/skill/assets/template.html) <br>\n- [html-collab live demo](https://ljn-hust.github.io/html-collab/) <br>\n\n\n## Skill Output: <br>\n**Output Type(s):** [text, markdown, code, shell commands, configuration, guidance] <br>\n**Output Format:** [Markdown instructions and complete self-contained HTML files] <br>\n**Output Parameters:** [1D] <br>\n**Other Properties Related to Output:** [May include full document text, collab-data JSON, inline HTML/CSS/JavaScript, and optional local image-compression commands.] <br>\n\n## Skill Version(s): <br>\n0.1.0 (source: frontmatter and release evidence) <br>\n\n## Ethical Considerations: <br>\nUsers should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment. <br>","readmeExcerpt":"Skill: html-collab Owner: ljn-hust Summary: Use this skill for any HTML document that will go through LLM–human review cycles. Trigger when: the user asks to write, draft, or generate a document for review or feedback; the user provides a .html file containing annotations or a collab-data block; the user types /html-collab, /html-collab on, or /html-collab off; a .html file contains an AI Bootstrap comment pointing t","codeSnippets":[],"executableExamples":[{"language":"text","snippet":"[DOCUMENT CONTENT]\n<paste the inner HTML of <article id=\"collab-content\"> here>\n\n[HUMAN FEEDBACK]\n\nComments:\n  · [<target>] \"<quote>\" → \"<comment text>\" [screenshot, <size>, base64]\n\nEdits:\n  · [<target>] \"<original>\" → \"<revised>\""},{"language":"bash","snippet":"python3 - <<'PYEOF'\n     import base64, io, sys\n     from PIL import Image\n     data = base64.b64decode(\"\"\"PASTE_BASE64_HERE\"\"\")\n     img = Image.open(io.BytesIO(data))\n     out = io.BytesIO()\n     img.save(out, 'JPEG', quality=55, optimize=True)\n     print(base64.b64encode(out.getvalue()).decode())\n     PYEOF"},{"language":"text","snippet":"[DOCUMENT CONTENT]\n<paste the inner HTML of <article id=\"collab-content\"> here>\n\n[HUMAN FEEDBACK]\n\nComments:\n  · [<target>] \"<quote>\" → \"<comment text>\" [screenshot, <size>, base64]\n\nEdits:\n  · [<target>] \"<original>\" → \"<revised>\""},{"language":"bash","snippet":"python3 - <<'PYEOF'\n     import base64, io, sys\n     from PIL import Image\n     data = base64.b64decode(\"\"\"PASTE_BASE64_HERE\"\"\")\n     img = Image.open(io.BytesIO(data))\n     out = io.BytesIO()\n     img.save(out, 'JPEG', quality=55, optimize=True)\n     print(base64.b64encode(out.getvalue()).decode())\n     PYEOF"},{"language":"text","snippet":"[DOCUMENT CONTENT]\n<paste the inner HTML of <article id=\"collab-content\"> here>\n\n[HUMAN FEEDBACK]\n\nComments:\n  · [<target>] \"<quote>\" → \"<comment text>\" [screenshot, <size>, base64]\n\nEdits:\n  · [<target>] \"<original>\" → \"<revised>\""},{"language":"bash","snippet":"python3 - <<'PYEOF'\n     import base64, io, sys\n     from PIL import Image\n     data = base64.b64decode(\"\"\"PASTE_BASE64_HERE\"\"\")\n     img = Image.open(io.BytesIO(data))\n     out = io.BytesIO()\n     img.save(out, 'JPEG', quality=55, optimize=True)\n     print(base64.b64encode(out.getvalue()).decode())\n     PYEOF"}],"parameters":null,"dependencies":[],"permissions":[],"extractedFiles":[{"path":"SKILL.md","content":"---\nname: html-collab\nversion: 0.3.0\ndescription: >\n  Use this skill for any HTML document that will go through LLM–human review cycles.\n  Trigger when: the user asks to write, draft, or generate a document for review or feedback;\n  the user provides a .html file containing annotations or a collab-data block;\n  the user types /html-collab, /html-collab on, or /html-collab off;\n  a .html file contains an AI Bootstrap comment pointing to this skill.\n  When the user asks to \"write a doc\" or \"draft something for review\" without specifying a format,\n  default to html-collab format — don't wait to be asked.\n  /html-collab off triggers this skill too, but outputs clean presentation HTML instead.\n---\n\n# html-collab Skill\n\nUse this skill when creating documents meant for iterative LLM–human review, or when reading/revising annotated html-collab files.\n\n---\n\n## Commands\n\n### `/html-collab` or `/html-collab on`\nExplicitly enable html-collab format for subsequent document generation. Equivalent to the default behavior — use when the user wants to be explicit.\n\n### `/html-collab off`\nSwitch to **plain HTML mode** for subsequent output. Use when the user wants a clean, presentation-ready document — no `collab-data`, no `data-cid`, no engine script, no sidebar. Typical use case: a finished document ready for an audience, not for further annotation.\n\nPlain HTML output should be well-structured, self-contained, and styled — a document a reader can open directly in a browser with no toolbars or review UI.\n\n---\n\n## GENERATE — Create a new html-collab document\n\n**When:** User asks you to write, draft, or generate a document (and html-collab mode is on).\n\n**Steps:**\n\n1. Start with the content of `skill/assets/template.html` as your base structure. If you do not have local access to this file, do not fetch it automatically — instead, ask the user to install the skill first (`clawhub install html-collab`) or provide the template file directly.\n   - **Output path (Claude Code):** Write the generated file to `~/Documents/html-collab/<filename>-<yyyymmddhhmm>.html`. Create the directory if it does not exist (`mkdir -p ~/Documents/html-collab`). This matches the default folder the browser Save dialog opens in, so all versions stay together.\n2. Fill `<article id=\"collab-content\">` with semantic HTML:\n   - Use `<h1>` for the document title, `<h2>` for sections, `<p>` for paragraphs, `<ul>`/`<li>` for lists.\n3. Assign a `data-cid` attribute to **every** block element. Rules:\n   - Format: `<type>-<zero-padded-3-digits>` — e.g. `p-001`, `h-001`, `sec-001`, `li-001`\n   - Types: `p` → `<p>`, `h` → `<h1>`–`<h6>`, `sec` → `<section>`, `li` → `<li>`, `bq` → `<blockquote>`, `pre` → `<pre>`, `tbl` → `<table>`\n   - Sequential per type across the whole document (not per section)\n   - Every block must have one; never skip or duplicate\n4. Populate `collab-data` meta:\n   - `title`: the document title\n   - `originalCreated` and `lastRevised`: both set to the current ISO timestamp\n   - `mode"},{"path":"_meta.json","content":"{\n  \"ownerId\": \"kn79a5ae0tx2c4q7bwc3s3tkr583975r\",\n  \"slug\": \"html-collab\",\n  \"version\": \"0.3.0\",\n  \"publishedAt\": 1786471866070\n}"},{"path":"skill-card.md","content":"## Description:\n\nUse this skill for HTML documents that will go through LLM-human review cycles, including drafting reviewable documents, reading annotated html-collab files, and revising them from embedded comments and edits.\n\nThis skill is ready for commercial/non-commercial use.\n\n## Publisher:\n\n[ljn-hust](https://clawhub.ai/user/ljn-hust)\n\n### License/Terms of Use:\n\nMIT-0\n\n## Use Case:\n\nDevelopers, writers, and reviewers use this skill to create self-contained HTML documents that preserve block-level IDs, reviewer comments, proposed edits, and document metadata for iterative LLM-human review. It can also read annotated html-collab files and produce revised HTML that incorporates recorded feedback.\n\n### Deployment Geography for Use:\n\nGlobal\n\n## Known Risks and Mitigations:\n\nRisk: The skill broadly auto-activates for document drafting and annotated HTML workflows.\n\nMitigation: Install and use it only when the html-collab review workflow is desired; use /html-collab off when clean presentation HTML is needed.\n\nRisk: Generated files may include AI bootstrap metadata and embedded image references that affect browser or agent behavior.\n\nMitigation: Open and process html-collab files only from trusted sources, and require explicit user consent before fetching external skill instructions.\n\nRisk: Revision workflows can overwrite reviewed files.\n\nMitigation: Keep backups or versioned copies before applying revisions.\n\n## Reference(s):\n\n- [ClawHub skill page](https://clawhub.ai/ljn-hust/skills/html-collab)\n- [html-collab live demo](https://ljn-hust.github.io/html-collab/)\n\n## Skill Output:\n\n**Output Type(s):** [text, markdown, code, shell commands, configuration, guidance]\n\n**Output Format:** [Markdown guidance and complete self-contained HTML files]\n\n**Output Parameters:** [1D]\n\n**Other Properties Related to Output:** [Generated html-collab files include block-level data-cid attributes, collab-data JSON metadata, comments, edits, and optional base64 image attachments.]\n\n## Skill Version(s):\n\n0.3.0 (source: frontmatter and server release evidence)\n\n## Ethical Considerations:\n\nUsers should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment."}],"languages":[],"docsSourceLabel":"CLAWHUB","editorialOverview":"Use this skill for any HTML document that will go through LLM–human review cycles. Trigger when: the user asks to write, draft, or generate a document for review or feedback; the user provides a .html file containing annotations or a collab-data block; the user types /html-collab, /html-collab on, or /html-collab off; a .html file contains an AI Bootstrap comment pointing to this skill. When the user asks to \"write a doc\" or \"draft something for review\" without specifying a format, default to html-collab format — don't wait to be asked. /html-collab off triggers this skill too, but outputs clean presentation HTML instead. Skill: html-collab Owner: ljn-hust Summary: Use this skill for any HTML document that will go through LLM–human review cycles. Trigger when: the user asks to write, draft, or generate a document for review or feedback; the user provides a .html file containing annotations or a collab-data block; the user types /html-collab, /html-collab on, or /html-collab off; a .html file contains an AI Bootstrap comment pointing t","editorialQuality":{"score":100,"threshold":65,"status":"ready","wordCount":1475,"uniquenessScore":45,"reasons":[]}},"media":{"evidence":{"source":"no-media","verified":false,"confidence":"low","updatedAt":"2026-10-11T09:12:36.936Z","emptyReason":"No screenshots, media assets, or demo links are available."},"primaryImageUrl":null,"mediaAssetCount":0,"assets":[],"demoUrl":null},"ownerResources":{"evidence":{"source":"unclaimed","verified":false,"confidence":"low","updatedAt":"2026-10-11T09:12:36.936Z","emptyReason":"This page has not been claimed by the agent owner."},"hasCustomPage":false,"customPageUpdatedAt":null,"customLinks":[],"structuredLinks":{"docsUrl":null,"demoUrl":null,"supportUrl":null,"pricingUrl":null,"statusUrl":null},"customPage":null},"relatedAgents":{"evidence":{"source":"protocol-neighbors","verified":false,"confidence":"medium","updatedAt":"2026-10-11T11:23:43.305Z","emptyReason":null},"items":[{"id":"8ebccd8e-3863-4187-8355-c3f14e1f9edf","entityType":"agent","canonicalPath":"/agent/iofficeai-aionui","slug":"iofficeai-aionui","name":"AionUi","description":"Free, local, open-source 24/7 Cowork app and OpenClaw for Gemini CLI, Claude Code, Codex, OpenCode, Qwen Code, Goose CLI, Auggie, and more | 🌟 Star if you like it!","url":"https://github.com/iOfficeAI/AionUi","homepage":"https://www.aionui.com","source":"GITHUB_REPOS","protocols":["MCP","OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-10-09T19:11:12.944Z","createdAt":"2026-02-25T03:38:16.584Z","downloads":null},{"id":"b917f68a-ebff-438e-84f8-3f4b2494c0bc","entityType":"agent","canonicalPath":"/agent/activepieces-activepieces","slug":"activepieces-activepieces","name":"activepieces","description":"AI Agents & MCPs & AI Workflow Automation • (~400 MCP servers for AI agents) • AI Automation / AI Agent with MCPs • AI Workflows & AI Agents • MCPs for AI Agents","url":"https://github.com/activepieces/activepieces","homepage":"https://www.activepieces.com","source":"GITHUB_REPOS","protocols":["OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-04-15T02:22:12.426Z","createdAt":"2026-02-25T03:38:12.412Z","downloads":null},{"id":"5cb26759-3a39-483f-94cf-276a98c13bb8","entityType":"agent","canonicalPath":"/agent/cherryhq-cherry-studio","slug":"cherryhq-cherry-studio","name":"cherry-studio","description":"AI productivity studio with smart chat, autonomous agents, and 300+ assistants. Unified access to frontier LLMs","url":"https://github.com/CherryHQ/cherry-studio","homepage":"https://cherry-ai.com","source":"GITHUB_REPOS","protocols":["MCP","OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-04-11T14:38:40.986Z","createdAt":"2026-02-25T03:38:19.379Z","downloads":null},{"id":"6f6582d0-5d76-4f0f-b81d-86520247950b","entityType":"agent","canonicalPath":"/agent/copilotkit-copilotkit","slug":"copilotkit-copilotkit","name":"CopilotKit","description":"The Frontend for Agents & Generative UI. React + Angular","url":"https://github.com/CopilotKit/CopilotKit","homepage":"https://docs.copilotkit.ai","source":"GITHUB_REPOS","protocols":["OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-03-25T09:50:57.846Z","createdAt":"2026-02-25T03:39:14.617Z","downloads":null}],"links":{"hub":"/agent","source":"/agent/source/clawhub","protocols":[{"label":"OpenClaw","href":"/agent/protocol/openclew"}]}}}