Generates highlighted HTML with click-to-reveal inline comments for granular feedback on drafts without rewriting. Use for 'comment on this', editor reviews, POV simulations, or focused angles like word choice.
npx claudepluginhub shipshitdev/libraryThis skill uses the workspace's default tool permissions.
Generate highlighted HTML with click-to-reveal comments for granular feedback on text. Alternative to rewrites—user keeps their voice, reviews feedback incrementally.
Generates highlighted HTML with click-to-reveal inline comments for granular feedback on drafts without rewriting. Use for 'comment on this', editor reviews, POV simulations, or focused angles like word choice.
Critiques complete or near-complete essays with severity-ranked feedback capped at 600 words. Opens with top fix, weaves in strengths, closes with simulated social media reactions.
Reviews documentation, blog posts, READMEs, proposals, and prose for quality issues in content, style, and embedded artifacts using parallel agents.
Share bugs, ideas, or general feedback.
Generate highlighted HTML with click-to-reveal comments for granular feedback on text. Alternative to rewrites—user keeps their voice, reviews feedback incrementally.
Use AskUserQuestion to clarify scope when the request is ambiguous. Avoid over-commenting (overwhelming) or under-commenting (missing the point).
Clarify when:
Skip clarification when:
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)"
| 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" |
DO:
_private/views/{name}-comments-temp.htmlopen _private/views/{name}-comments-temp.htmlDO NOT:
<!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>
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; }
data-comment attributes_private/views/{name}-comments-temp.htmlopen _private/views/{name}-comments-temp.htmlEditor 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