--- name: html-collab version: 0.1.5 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. --- # html-collab Skill Use this skill when creating documents meant for iterative LLM–human review, or when reading/revising annotated html-collab files. --- ## Commands ### `/html-collab` or `/html-collab on` Explicitly enable html-collab format for subsequent document generation. Equivalent to the default behavior — use when the user wants to be explicit. ### `/html-collab off` Switch 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. Plain 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. --- ## GENERATE — Create a new html-collab document **When:** User asks you to write, draft, or generate a document (and html-collab mode is on). **Steps:** 1. 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. - **Output path (Claude Code):** Write the generated file to `~/Documents/html-collab/-.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. 2. Fill `

` with semantic HTML: - Use `

` for the document title, `

` for sections, `

` for paragraphs, `

` for lists. 3. Assign a `data-cid` attribute to **every** block element. Rules: - Format: `-` — e.g. `p-001`, `h-001`, `sec-001`, `li-001` - Types: `p` → `

`, `h` → `

`–`

`, `sec` → `

`, `li` → `

`, `bq` → `

`, `pre` → `

`, `tbl` → ``
   - Sequential per type across the whole document (not per section)
   - Every block must have one; never skip or duplicate
4. Populate `collab-data` meta:
   - `title`: the document title
   - `originalCreated` and `lastRevised`: both set to the current ISO timestamp
   - `model`: your model identifier
   - `maxImageBytes`: 51200 (default = 50 KB; do not change unless user specifies)
   - `imageStorage`: "base64"
   - `comments`: []
   - `edits`: []
5. **Document-level UI belongs inside the article, not in the framework.**
   - `#collab-header` (the top bar with the Save button) and `#collab-sidebar` (the comment panel) belong exclusively to the html-collab engine.
   - If the document needs custom UI controls (e.g. a language toggle, a table of contents, a theme switch), place them **inside ``** — as a block at the top of the article or a floating element relative to `#collab-main`.
   - Putting custom controls in the framework header confuses human reviewers into thinking they're engine features.
6. Output the complete `.html` file.

---

## READ — Extract context from an annotated file

**When:** User provides a `.html` file that has been annotated by a human.

**Reading efficiently:**
- Skip everything between `` and `` — this is engine CSS/JS you do not need to parse.
- If `meta.summary` is present in collab-data, read it first for a compact structural index before parsing the full article.

**Steps:**

1. Parse `` — this is the document text.
2. Parse the JSON inside `

html-collab

Description

Latest Changes

Install html-collab with One Click