Markdown files don't read like blog posts. Some problems only become visible in styled HTML. This skill renders the cited draft into a preview HTML file that mimics the published look.
Input
For slug {slug}:
content-pipeline/6-drafts-cited/{slug}.md (the cited draft)
templates/preview.html (HTML shell)
templates/preview.css (styles)
Process
Read the cited draft. Extract the H1 as the title, the rest as body.
The script reads the draft, converts markdown to HTML, substitutes {{TITLE}}, {{DATE}}, {{BODY_HTML}} into templates/preview.html, and writes the result.
Tell the user the preview path so they can open it in a browser.
Output
content-pipeline/7-preview/{slug}.html
A self-contained HTML file. Open it in a browser to see the article rendered with the brand's typography, callouts, and screenshot placeholders.
Quality checklist
HTML file exists at the expected path
Title in HTML matches the H1 in the cited draft
All H2/H3 headings are styled
Internal links are clickable
Screenshot placeholders are visually distinct (dashed border, "screenshot would go here" treatment)
Tip / sidenote / editor-note callouts are styled if present in the draft
When the preview looks broken
If the rendered HTML drops content, mangles tables, or misses headings:
Check for unbalanced markdown (unmatched **, broken links, stray HTML)
Re-run with the same slug — script overwrites
If a CSS rule is wrong, edit templates/preview.css directly (rebuild not needed; CSS is referenced by relative path)
Note on Python markdown library
The renderer uses Python's standard library + markdown package if installed, falling back to a simple inline converter if not. For best fidelity install:
pip install markdown
Without it, fenced code blocks and tables may render as plain text.
1---2name: preview3description: Render the cited draft as an HTML preview styled like the brand's blog so the writer can review the article in browser before publishing.4---56# Preview Skill78Markdown files don't read like blog posts. Some problems only become visible in styled HTML. This skill renders the cited draft into a preview HTML file that mimics the published look.910## Input1112For slug `{slug}`:13- `content-pipeline/6-drafts-cited/{slug}.md` (the cited draft)14- `templates/preview.html` (HTML shell)15- `templates/preview.css` (styles)1617## Process18191. **Read the cited draft.** Extract the H1 as the title, the rest as body.202. **Run the preview renderer:**21 ```bash22 python .claude/skills/preview/scripts/render_preview.py "<slug>"23 ```24 The script reads the draft, converts markdown to HTML, substitutes `{{TITLE}}`, `{{DATE}}`, `{{BODY_HTML}}` into `templates/preview.html`, and writes the result.253. **Tell the user** the preview path so they can open it in a browser.2627## Output2829`content-pipeline/7-preview/{slug}.html`3031A self-contained HTML file. Open it in a browser to see the article rendered with the brand's typography, callouts, and screenshot placeholders.3233## Quality checklist3435- [ ] HTML file exists at the expected path36- [ ] Title in HTML matches the H1 in the cited draft37- [ ] All H2/H3 headings are styled38- [ ] Internal links are clickable39- [ ] Screenshot placeholders are visually distinct (dashed border, "screenshot would go here" treatment)40- [ ] Tip / sidenote / editor-note callouts are styled if present in the draft4142## When the preview looks broken4344If the rendered HTML drops content, mangles tables, or misses headings:45- Check for unbalanced markdown (unmatched `**`, broken links, stray HTML)46- Re-run with the same slug — script overwrites47- If a CSS rule is wrong, edit `templates/preview.css` directly (rebuild not needed; CSS is referenced by relative path)4849## Note on Python markdown library5051The renderer uses Python's standard library + `markdown` package if installed, falling back to a simple inline converter if not. For best fidelity install:5253```bash54pip install markdown55```5657Without it, fenced code blocks and tables may render as plain text.
Run npx skillmds@latest add lionelndong/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 the cited draft as an HTML preview styled like the brand's blog so the writer can review the article in browser before publishing. 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