Render Visual

**DELIVERY SKILL** — Produce polished diagrams, presentation slides, and social cards as crisp PNGs by authoring HTML/SVG and rendering it with a local headless Chromium. Eight built-in themes (ember, slate, paper, terminal, blueprint, frost, neon, sepia), swappable with a flag. Also frames your own screenshots and photos — in a browser, phone or terminal frame, or cropped to a shape. USE FOR: architecture and flow diagrams, slide decks, og/social cards, blog and README figures, banners, device mockups, any designed image a document needs. DO NOT USE FOR: data charts from datasets (use a plotting library), capturing a live UI, photo retouching, or any surface where you cannot run shell commands — write inline SVG instead. TRIGGERS: diagram, flow chart, architecture visual, swimlane, tree view, cluster, deployment, mind map, slide, slide deck, presentation, og card, social card, banner, cover image, blog figure, screenshot in a browser frame, device mockup, render a png, make an image, visual.

node "$SKILL/scripts/render.mjs" "$SKILL/templates/palette.html" palette.png --theme blueprint

mkdir -p ~/.claude/skills/render-visual
curl -L https://claudskills.com/skills/render-visual/SKILL.md \
  -o ~/.claude/skills/render-visual/SKILL.md

@misc{render-visual-2026,
  author    = {imshaikot},
  title     = {Render Visual [Claude Code skill]},
  year      = {2026},
  publisher = {ClaudSkills},
  url       = {https://claudskills.com/skills/render-visual/}
}