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.

  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
    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: []
    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.
    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:
    Parse 
     — this is the document text.
    Parse the JSON inside 
        
    
        
    Skill工具集 © 2026