comment-mode

仓库: shipshitdev/library
安装量: 64
排名: #11751

安装

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

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.

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

<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 highlighted phrase}
{count} comments · click highlights to reveal
<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

← 返回排行榜