Comment Mode

Name: Comment Mode
Author: shipshitdev

shipshitdev/library

127 installs
31 repo stars
Updated August 2, 2026
shipshitdev/library

Review diffs by leaving precise inline comments on risks, style, tests, and regressions so authors fix issues before merge without rewriting entire patches.

About

Comment-mode enables focused code review behavior where the agent annotates pull requests and patches with targeted inline feedback. It is suited to SaaS, API, and CLI repos where reviewers must call out defects, missing tests, and maintainability concerns before changes ship.

Leaves line-level review comments on diffs
Flags security, performance, and test gaps
Keeps feedback constructive and merge-oriented
Separates nitpicks from blocking issues clearly

Comment Mode by the numbers

127 all-time installs (skills.sh)
+3 installs in the week ending Jul 27, 2026 (Skillselion tracking)
Ranked #403 of 1,352 Code Review & Quality skills by installs in the Skillselion catalog
Data as of Aug 3, 2026 (Skillselion catalog sync)

npx skills add https://github.com/shipshitdev/library --skill comment-mode

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/shipshitdev/library/comment-mode.svg)](https://skillselion.com/skills/shipshitdev/library/comment-mode)

Installs	127
repo stars	★ 31
Last updated	August 2, 2026
Repository	shipshitdev/library ↗

What it does

Review diffs by leaving precise inline comments on risks, style, tests, and regressions so authors fix issues before merge without rewriting entire patches.

Files

SKILL.mdMarkdownGitHub ↗

Comment Mode

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

1. User pastes text + asks for comments 2. If ambiguous: Use AskUserQuestion to clarify lens/scope 3. Read text, identify key phrases worth commenting on (sparse, high-signal) 4. Generate HTML with highlights and data-comment attributes 5. Write to _private/views/{name}-comments-temp.html 6. 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

{
  "name": "comment-mode",
  "version": "1.0.0",
  "description": "Granular feedback on drafts without rewriting. Generates highlighted HTML with click-to-reveal inlin",
  "author": {
    "name": "Ship Shit Dev",
    "email": "hello@shipshit.dev",
    "url": "https://shipshit.dev"
  },
  "license": "MIT",
  "skills": "."
}