About

Imported from shipshitdev/skills (skills/comment-mode/SKILL.md). Install upstream with npx skills add shipshitdev/skills --skill comment-mode. Copyright stays with the author.

Comment Mode

Name: comment-mode
Author: shipshitdev

Generate highlighted HTML with click-to-reveal comments for granular feedback on text. Alternative to rewrites—user keeps their voice, reviews feedback incrementally.

Contract

Inputs:

The draft text to comment on (pasted inline or as a file path)
Optional lens: editor feedback, POV simulation (e.g. "as brian would react"), or focused angle (e.g. "word choice only")

Outputs:

An HTML file at _private/views/{name}-comments-temp.html with highlighted spans and click-to-reveal comment overlays

Creates/Modifies:

Writes _private/views/{name}-comments-temp.html

External Side Effects:

Runs open _private/views/{name}-comments-temp.html to launch the file in the default browser

Confirmation Required:

None — the file is a temp view artifact in _private/ and does not modify source files

Delegates To:

None.

When to Use

User says: "comment on this", "leave comments on", "give feedback on"
User pastes text and asks for feedback/critique
User wants targeted feedback without a full rewrite

Clarify Before Commenting

Use AskUserQuestion to clarify scope when the request is ambiguous. Avoid over-commenting (overwhelming) or under-commenting (missing the point).

Clarify when:

No lens specified → ask what angle they want
Long document → ask if they want full coverage or just key sections
Unclear audience → ask who the recipient is (affects POV comments)

Skip clarification when:

Lens is explicit ("comment on word choice only")
Document is short (<500 words)
Context is obvious from conversation

Example clarification:

User: "comment on this"
[long doc, no lens specified]

→ Use AskUserQuestion:
  "What should I focus on?"
  Options:
  - "Editor feedback (structure, clarity, word choice)"
  - "Recipient POV (how [person] would react)"
  - "Specific angle (tell me what)"

Lenses

Lens	Color	Comment style
Editor	Yellow (#fff3cd)	observations, suggestions: "weak opener", "add proof here"
POV (as person)	Blue (#e3f2fd)	reactions from that person's perspective: "i know this already", "legal would freak out"
Focused	Yellow	specific angle only: "word choice", "tone", "weak arguments"

Comment Style

Always lowercase
Short (5-15 words)
Smart about type: observations when noting, suggestions when alternatives help, reactions when simulating POV
Only comment where there's something worth saying—sparse beats exhaustive

Output Rules

DO:

Write to _private/views/{name}-comments-temp.html
Open with open _private/views/{name}-comments-temp.html
Use highlight colors matching the lens
Keep comments sparse and high-signal

DO NOT:

Comment on everything—only where there's an obvious edit or insight
Over-explain in comments—keep them punchy
Mix lenses in one output—pick one and stick to it

Template

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{title}</title>
  <style>
    * { box-sizing: border-box; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      max-width: 700px;
      margin: 0 auto;
      padding: 40px 20px;
      line-height: 1.7;
      color: #1a1a1a;
      background: #fafafa;
    }
    h1, h2, h3 { margin-top: 2em; font-weight: 600; }
    h1 { font-size: 1.4em; }
    h2 { font-size: 1.2em; color: #333; }
    p { margin: 1em 0; }

    .highlight {
      background: {highlight-bg};  /* #fff3cd yellow for editor, #e3f2fd blue for POV */
      padding: 1px 4px;
      border-radius: 3px;
      cursor: pointer;
      border-bottom: 2px solid {highlight-border};  /* #ffc107 for editor, #2196f3 for POV */
      transition: background 0.15s;
    }
    .highlight:hover, .highlight.active {
      background: {highlight-hover};  /* #ffe69c for editor, #bbdefb for POV */
    }

    .comment {
      display: none;
      background: {comment-bg};  /* #1a1a1a for editor, #0052cc for POV */
      color: #fff;
      padding: 8px 12px;
      border-radius: 6px;
      font-size: 0.85em;
      margin: 8px 0;
      line-height: 1.5;
    }
    .comment.show { display: block; }

    .section-break {
      border: none;
      border-top: 1px solid #ddd;
      margin: 2em 0;
    }

    .legend {
      position: fixed;
      bottom: 20px;
      right: 20px;
      background: #fff;
      padding: 12px 16px;
      border-radius: 8px;
      box-shadow: 0 2px 12px rgba(0,0,0,0.1);
      font-size: 0.8em;
      color: #666;
    }
  </style>
</head>
<body>

{content with <span class="highlight" data-comment="comment text">highlighted phrase</span>}

<div class="legend">{count} comments · click highlights to reveal</div>

<script>
document.querySelectorAll('.highlight').forEach(el => {
  const commentText = el.getAttribute('data-comment');
  const commentDiv = document.createElement('div');
  commentDiv.className = 'comment';
  commentDiv.textContent = commentText;
  el.insertAdjacentElement('afterend', commentDiv);

  el.addEventListener('click', () => {
    const wasActive = el.classList.contains('active');
    document.querySelectorAll('.highlight').forEach(h => h.classList.remove('active'));
    document.querySelectorAll('.comment').forEach(c => c.classList.remove('show'));
    if (!wasActive) {
      el.classList.add('active');
      commentDiv.classList.add('show');
    }
  });
});
</script>
</body>
</html>

Color Reference

Editor lens (yellow):

.highlight { background: #fff3cd; border-bottom: 2px solid #ffc107; }
.highlight:hover, .highlight.active { background: #ffe69c; }
.comment { background: #1a1a1a; }

POV lens (blue):

.highlight { background: #e3f2fd; border-bottom: 2px solid #2196f3; }
.highlight:hover, .highlight.active { background: #bbdefb; }
.comment { background: #0052cc; }

Workflow

User pastes text + asks for comments
If ambiguous: Use AskUserQuestion to clarify lens/scope
Read text, identify key phrases worth commenting on (sparse, high-signal)
Generate HTML with highlights and data-comment attributes
Write to _private/views/{name}-comments-temp.html
Run open _private/views/{name}-comments-temp.html

Examples

Editor lens:

User: "comment on this, focus on word choice"
→ Yellow highlights, suggestions like "vague, try 'specifically'" or "jargon, simplify"

POV lens:

User: "comment on this as brian would react"
→ Blue highlights, reactions like "i already know this" or "legal would push back here"

Focused lens:

User: "leave comments on this, only flag weak arguments"
→ Yellow highlights on weak claims, comments like "needs evidence" or "assumes too much"

Sparse/sharp lens:

User: "comment only where there's an obvious fix"
→ Minimal highlights, only typos, missing words, or clear improvements

Use it

Copy one of these into your project. Installing also returns the manifest and these snippets.

yaml

targets:
  - https://api.opensmartroute.ai/api/v1/registry/shipshitdev-skills-comment-mode/manifest   # or paste the manifest below

Manifest

An Open Capability Manifest: the router reads it to know what this does, what it costs and when to pick it.

shipshitdev-skills-comment-mode.ocm.jsonjson

{
  "ocm": "1",
  "id": "shipshitdev-skills-comment-mode",
  "kind": "skill",
  "name": "comment-mode",
  "description": "Granular feedback on drafts without rewriting. Generates highlighted HTML with click-to-reveal inline comments. Use when user says \"comment on this\", \"leave comments on\", \"give feedback on\", or asks for feedback on a draft. Supports multiple lenses—editor feedback, POV simulation (\"as brian would react\"), or focused angles (\"word choice only\", \"weak arguments\"). A granular alternative to rewrites that lets users review feedback incrementally without losing their voice.",
  "publisher": "shipshitdev",
  "version": "1.0.0",
  "capabilities": {
    "domains": [
      "general"
    ],
    "tags": [
      "skill-md",
      "feedback",
      "comments",
      "editing",
      "skills-sh"
    ],
    "languages": [
      "en"
    ]
  },
  "quality_prior": 0.6,
  "examples": [
    "Granular feedback on drafts without rewriting. Generates highlighted HTML with click-to-reveal inline comments. Use when user says \"comment on this\", \"leave comments on\", \"give feedback on\", or asks for feedback on a draft. Supports multiple lenses—editor feedback, POV simulation (\"as brian would react\"), or focused angles (\"word choice only\", \"weak arguments\"). A granular alternative to rewrites that lets users review feedback incrementally without losing their voice."
  ],
  "primary": false,
  "metadata": {
    "source": {
      "provider": "skills.sh",
      "repository": "https://github.com/shipshitdev/skills",
      "path": "skills/comment-mode/SKILL.md",
      "ref": "HEAD",
      "url": "https://github.com/shipshitdev/skills/blob/HEAD/skills/comment-mode/SKILL.md",
      "key": "shipshitdev/skills/skills/comment-mode/SKILL.md"
    },
    "allowed_tools": [
      "Bash(open",
      "*)",
      "Write"
    ]
  },
  "instructions": "# Comment Mode\n\nGenerate highlighted HTML with click-to-reveal comments for granular feedback on text. Alternative to rewrites—user keeps their voice, reviews feedback incrementally.\n\n## Contract\n\nInputs:\n\n- The draft text to comment on (pasted inline or as a file path)\n- Optional lens: editor feedback, POV simulation (e.g. \"as brian would react\"), or focused angle (e.g. \"word choice only\")\n\nOutputs:\n\n- An HTML file at `_private/views/{name}-comments-temp.html` with highlighted spans and click-to-reveal comment overlays\n\nCreates/Modifies:\n\n- Writes `_private/views/{name}-comments-temp.html`\n\nE",
  "cost": {
    "context_tokens": 1745
  }
}

Fetch it by URL: GET /api/v1/registry/shipshitdev-skills-comment-mode/manifest?version=1.0.0

Reviews

Star ratings from people who tried it. One review per account; edit yours any time.

No reviews yet. Install it, try it, and be the first to rate it.