blog-figure-svg

What it does

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.

The skill provides multiple variants to create different figure types:

• flow — horizontal process flow for how-to sequences or topology
• compare — bar chart for numeric comparisons
• taxonomy — labelled group diagram (Venn-lite style)
• terminal — annotated terminal mock for command output or config blobs
• feature — OG / 1600x840 feature card for post thumbnails

All variants write to tmp/blog-drafts/<slug>-<N>-<short-name>.svg (editable source, gitignored), then rasterize to <slug>-<N>-<short-name>.png for blog CDN.

How it works

• The skill defines variants and their purpose (flow, compare, taxonomy, terminal, feature). Each variant provides a Python-like code block or SVG generation logic that builds an SVG with a title, description, and shapes according to the variant’s design rules.
• The SVG skeleton ensures accessibility by setting role="img", including <title> and <desc>, and using aria-labelledby to reference them.
• For each variant, it writes the generated SVG to the specified output path, e.g., tmp/blog-drafts/<slug>-<N>-<short-name>.svg, then a corresponding PNG is produced by an external rasterizer (ImageMagick, rsvg-convert, inkscape, or cairosvg) and compressed with PNG optimizers (pngquant or oxipng).
• The variants include concrete parameters and example command invocations showing how to pass title, data, and notes to produce the figure.

When to use it

Trigger phrases include: '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.

What it can touch

• Writes to tmp/blog-drafts/<slug>-<N>-<short-name>.svg (editable source).
• Rasterizes to <slug>-<N>-<short-name>.png (uploaded to the blog CDN).
• Utilizes an external rasterizer tool selected from ImageMagick, rsvg-convert, inkscape, or cairosvg, and PNG compression tools like pngquant or oxipng.

Caveats

• Requires a working directory to write into (default: tmp/blog-drafts/).
• The PNG rasterizer must be installed for the PNG output step to complete.
• All figures include accessibility metadata in the SVG; ensure the data presented is accurate and cited by the surrounding text.