Agent skill · creative production · jeremylongshore
blog-figure-svg
Design accessible, source-backed SVG editorial figures and optionally rasterize reviewed assets for a blog or CMS. Use when a post needs a flow, comparison, taxonomy, terminal mock, or feature card. Trigger with "add a figure to this post" or "make an SVG diagram".
Why this skill is useful
Adds specific commands for generating and rasterizing SVG figures tailored for blog content that the AI wouldn't reliably generate on its own.
What it needs
Requires cairosvg, imagemagick, inkscape, oxipng, pngquant, python3, rsvg-convert installed locally. About 4k tokens when loaded. Last updated 2026-08-07. 2,604 stars on the source repository.
What this skill does
Accessible Editorial SVG Figures Overview Create lightweight editorial artwork whose visual claims are traceable to the approved article or source data. Supported shapes are process flows, comparison bars, taxonomies, terminal mocks, and 1600x840 feature cards. The editable SVG is the source of truth. PNG rasterization is optional, and CMS upload remains a separate approved action. Prerequisites Final or near-final article copy with the intended anchor paragraph Approved title, caption, data points, source URLs, brand palette, and output directory A writable local draft directory such as tmp/blog-drafts/ For PNG output, one installed rasterizer: ImageMagick, rsvg-convert, Inkscape, or CairoSVG Optional pngquant or oxipng for lossless or reviewed lossy compression Tool Discipline Use Read to inspect the approved article and brand tokens. Use Write or Edit for local SVG, caption, and receipt files. The scoped Bash commands may only detect or invoke the named local renderers and Python validator; never interpolate untrusted titles, SVG fragments, filenames, or shell arguments. Instructions 1. Identify the single information structure to communicate. Choose flow for ordered steps, compare for sourced numeric values, taxonomy for categories, terminal for verified command output, or feature for a title card. 2. Extract the exact facts from the approved source. Record a URL or article anchor for every number, quote, product claim, and terminal line. Omit unsupported content. 3. Create a safe kebab-case filename, refuse parent traversal or absolute output paths, and avoid overwriting an existing asset unless the owner approves. 4. Lay out the figure on a responsive SVG viewBox. Use text elements rather than embedded fonts, preserve readable contrast, and keep labels legible at the target display width. 5. Add a unique <title> and <desc>, then connect them with role="img" and aria-labelledby. Decorative shapes should not add noise to the accessibility tree. 6. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills jeremylongshore/blog-figure-svg