The editor reviewing an update wants to see exactly what changed. This skill produces a side-by-side HTML diff: original on the left, updated on the right, with changes highlighted.
A self-contained HTML page with the diff side-by-side.
Quality checklist
Diff opens in browser without errors
Both columns have visible content
Additions are visually distinct from removals
Editor's notes from the updated draft are included at the bottom of the right column
Long content is scrollable, not truncated
Limitations
Whitespace-only differences may show as changes (this is fine; it tells the editor where formatting shifted)
Markdown→HTML conversion uses the same library as /preview (may not handle exotic markdown perfectly)
The diff is line-based — small in-paragraph edits show as full-paragraph changes
1---2name: update-preview3description: Render a side-by-side HTML diff of the original article vs the updated draft so the editor can review every change in browser.4---56# Update Preview Skill78The editor reviewing an update wants to see exactly what changed. This skill produces a side-by-side HTML diff: original on the left, updated on the right, with changes highlighted.910## Input1112`/update-preview <slug>`1314Reads:15- `content-pipeline/updates/1-extracted/{slug}.md` (original)16- `content-pipeline/updates/7-updated-draft/{slug}.md` (updated)1718## Process19201. **Run the diff renderer:**21 ```bash22 python .claude/skills/update-preview/scripts/render_diff.py "<slug>"23 ```24 The script:25 - Reads both files26 - Renders each side as HTML27 - Wraps both in a side-by-side layout28 - Highlights additions (green), removals (red), and unchanged (default)292. **Tell the user** the diff path so they can open in browser.3031## Output3233`content-pipeline/updates/5-update-preview/{slug}.html`3435A self-contained HTML page with the diff side-by-side.3637## Quality checklist3839- [ ] Diff opens in browser without errors40- [ ] Both columns have visible content41- [ ] Additions are visually distinct from removals42- [ ] Editor's notes from the updated draft are included at the bottom of the right column43- [ ] Long content is scrollable, not truncated4445## Limitations4647- Whitespace-only differences may show as changes (this is fine; it tells the editor where formatting shifted)48- Markdown→HTML conversion uses the same library as `/preview` (may not handle exotic markdown perfectly)49- The diff is line-based — small in-paragraph edits show as full-paragraph changes
Run npx skillmds@latest add lionelndong/update-preview in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
Render a side-by-side HTML diff of the original article vs the updated draft so the editor can review every change in browser. It is listed under Web & Frontend on SkillMD.
SkillMD's automated safety review verdict for this skill is PASS. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. Capability flags: executes scripts. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
lionelndong (@lionelndong) published this skill. Their other Agent Skills are listed on their SkillMD profile.
lionelndong