blog-figure-svglisted

Stop using stock photos. Generate accessible, lightweight SVG figures for any blog or CMS - flow diagrams, comparison bar charts, taxonomy/Venn diagrams, annotated terminal mocks, and 1600x840 OG feature cards. Hand-authored SVG (no embedded fonts, no external assets, no AI-image latency) with a consistent palette, screen-reader metadata (title + desc + aria-labelledby), and a figcaption-required handoff to the writer. Rasterizes to compressed PNG ready for Ghost, WordPress, Webflow, or any static-site generator. Built for content marketers, indie hackers, and dev-tool blogs that want unique illustrations on every post without paying a designer or burning Midjourney credits. Trigger when the user says: 'add a figure to the post', 'illustrate this comparison', 'draw a flow diagram for X', 'make a feature/OG image', or any request to produce a chart/diagram for editorial use.
AutomateLab-tech/publishing-skills · ★ 4 · AI & Automation · score 80

Install: claude install-skill AutomateLab-tech/publishing-skills

# blog-figure-svg Produces SVG figures intended for blog posts: in-line illustrations (1 per ~500 body words is the rule of thumb) and a templated OG feature card. Output is a clean SVG file (the editable source) rasterized to a compressed PNG (what the post references). Every figure carries `title` + `desc` + `role="img"` so screen readers can read it. This skill is **platform-agnostic** — the SVG and PNG it produces work in any CMS (Ghost, WordPress, Webflow, Sanity) or static-site generator (Hugo, Astro, Eleventy, Jekyll, Next-MDX). It complements `seo-blog-writer` (handles the publish step for whatever platform you're on) and `blog-topic-research` (validates the topic). Use it during the **illustration step** of writing a post — after the prose is stable so the anchor sentences are final. ``` /blog-figure-svg flow "<title>" --steps "Trigger -> Filter -> HTTP -> Slack" /blog-figure-svg compare "<title>" --bars "Zapier:0.03,Make:0.015,n8n:0.008" --unit "$ per task" /blog-figure-svg taxonomy "<title>" --groups "Workflows,Agents,RPA" --notes "see references/style-examples.md" /blog-figure-svg terminal "<title>" --lines "$ npm install\nadded 42 packages" /blog-figure-svg feature "<headline>" --accent "#4F46E5" --pill "How To" ``` All variants write to `tmp/blog-drafts/<slug>-<N>-<short-name>.svg` (editable source, gitignored), then rasterize to `<slug>-<N>-<short-name>.png` (uploaded to the blog CDN). --- ## Before you start The skill expects a work