New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Blog Figure SVG

by jeremylongshore in jeremylongshore/tons-of-skills-marketplace

Design accessible, source-backed SVG editorial figures and optionally rasterize reviewed assets for a blog or CMS.

MIT-0Auto-check passed

Install Blog Figure SVG

skills CLI
$ npx skills add jeremylongshore/tons-of-skills-marketplace --skill blog-figure-svg -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install jeremylongshore/tons-of-skills-marketplace blog-figure-svg --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/jeremylongshore/tons-of-skills-marketplace.git skills-src && mkdir -p .claude/skills && cp -r skills-src/plugins/productivity/publishing-skills/skills/blog-figure-svg .claude/skills/blog-figure-svg && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
blog-figure-svg
GitHub stars
2.8k
Token cost
~2k tokens
SKILL.md length
808 words
Files
1
Skills in repo
3,342
Repo updated
First seen
Licence
MIT-0

At a glance

Design accessible, source-backed SVG editorial figures and optionally rasterize reviewed assets for a blog or CMS.

  • Works in 10 steps: Identify the single information… → Extract the exact facts from the… → Create a safe kebab-case filename,… → …
  • A post needs a flow
  • SKILL.md covers Overview, Prerequisites, Tool Discipline and Instructions, plus 10 more sections
  • Calls python3 and magick; reaches w3.org

What it does

Blog Figure SVG is an agent skill from jeremylongshore/tons-of-skills-marketplace. 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".

Its SKILL.md is about 2k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts. Compatibility notes: Designed for Claude Code; file creation is local by default, while brand changes, data claims, uploads, overwrites, and publication require owner approval

The repository describes itself as: Model-agnostic agent-skills platform with a harness-free canonical layer, verified adapters, and the ccpi package manager. Explore at tonsofskills.com. The licence is MIT-0.

When your agent uses it

  • A post needs a flow
  • With add a figure to this post
  • Make an SVG diagram

Example prompts

  • “add a figure to this post”
  • “make an SVG diagram”
  • “/blog-figure-svg”

Requirements

  • Python 3
  • Compatibility (from SKILL.md): Designed for Claude Code; file creation is local by default, while brand changes, data claims, uploads, overwrites, and publication require owner approval
  • Pre-approved tools (allowed-tools): Read, Write, Edit, Bash(command:*), Bash(magick:*), Bash(identify:*), Bash(rsvg-convert:*), Bash(inkscape:*), Bash(python3:*)

Workflow steps

10 steps, taken from the first numbered list in SKILL.md.

  1. Identify the single information structure to communicate. Choose flow for ordered steps, compare for sourced numeric values, taxonomy for…
  2. Extract the exact facts from the approved source. Record a URL or article anchor for every number, quote, product claim, and terminal…
  3. Create a safe kebab-case filename, refuse parent traversal or absolute output paths, and avoid overwriting an existing asset unless the…
  4. Lay out the figure on a responsive SVG viewBox. Use text elements rather than embedded fonts, preserve readable contrast, and keep labels…
  5. Add a unique and , then connect them with role="img" and aria-labelledby. Decorative shapes should not add noise to the accessibility tree.
  6. Keep the SVG self-contained: no scripts, event handlers, remote images, external stylesheets, foreignObject, or unreviewed embedded data.
  7. Validate the XML and scan for forbidden active content. Review clipping, reading order, contrast, label accuracy, and source correspondence.
  8. If PNG output is requested, choose an installed rasterizer, pass fully quoted local paths, render at the required dimensions, and verify…
  9. Compress only after preserving the SVG source. Compare before/after dimensions and file size, and retain quality acceptable for text and…
  10. Return paths, dimensions, alt text, caption, evidence mapping, validation results, and any upload action still awaiting approval.

What it can do on your machine

Read from SKILL.md and the folder at commit cfae287. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves these tools, so the agent can use them without asking each time:

    • Read
    • Write
    • Edit
    • Bash(command:*)
    • Bash(magick:*)
    • Bash(identify:*)
    • Bash(rsvg-convert:*)
    • Bash(inkscape:*)
    • Bash(python3:*)

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • python3
    • magick

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Hosts in commands or code, which the agent is likely to contact:

    • w3.org

    Also links to:

    • developer.mozilla.org
    • cheatsheetseries.owasp.org

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

  • Compatibility

    Designed for Claude Code; file creation is local by default, while brand changes, data claims, uploads, overwrites, and publication require owner approval

    From compatibility in the SKILL.md frontmatter.

Context cost

Blog Figure SVG loads about 2k tokens when it runs. Until then it costs about 70 tokens; SKILL.md has 808 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~70
When it runs · the whole SKILL.md, loaded when a task matches
~2k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from jeremylongshore/tons-of-skills-marketplace at commit cfae287, republished under its MIT-0 licence (© jeremylongshore). 808 words, ~2,049 tokens.

Download SKILL.mdSave it as .claude/skills/blog-figure-svg/SKILL.md (or your agent's skills folder).
name
blog-figure-svg
description
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".
allowed-tools
Read, Write, Edit, Bash(command:*), Bash(magick:*), Bash(identify:*), Bash(rsvg-convert:*), Bash(inkscape:*), Bash(python3:*)
compatibility
Designed for Claude Code; file creation is local by default, while brand changes, data claims, uploads, overwrites, and publication require owner approval
argument-hint
[flow|compare|taxonomy|terminal|feature] [title] [options]
version
1.2.0
author
AutomateLab <hello@automatelab.tech>
license
MIT-0
tags
svg, accessibility, editorial-design, diagrams, image-optimization
model
inherit
effort
high

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. Keep the SVG self-contained: no scripts, event handlers, remote images, external stylesheets, foreignObject, or unreviewed embedded data.
  7. Validate the XML and scan for forbidden active content. Review clipping, reading order, contrast, label accuracy, and source correspondence.
  8. If PNG output is requested, choose an installed rasterizer, pass fully quoted local paths, render at the required dimensions, and verify the output type and dimensions.
  9. Compress only after preserving the SVG source. Compare before/after dimensions and file size, and retain quality acceptable for text and fine lines.
  10. Return paths, dimensions, alt text, caption, evidence mapping, validation results, and any upload action still awaiting approval.

SVG Contract

Every figure starts with this security and accessibility shape:

xml
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 900"
     role="img" aria-labelledby="figure-title figure-desc">
  <title id="figure-title">Approved figure title</title>
  <desc id="figure-desc">Concise explanation of the relationships shown.</desc>
  <rect width="1600" height="900" fill="#ffffff"/>
  <!-- Reviewed, static vector elements only. -->
</svg>

For comparison charts, label values directly and start quantitative axes at zero unless an explicit analytical reason is disclosed in the caption. For terminal mocks, reproduce only sanitized output; never include secrets, tokens, home paths, customer data, or misleading commands.

Rasterization

Detect tools without installing anything:

bash
command -v magick
command -v rsvg-convert
command -v inkscape
python3 -c 'import cairosvg; print(cairosvg.__version__)'

Example with trusted local paths:

bash
magick -density 192 -background white figure.svg -resize 1600x figure.png
identify figure.png

Do not run package installers automatically. If no renderer exists, deliver the validated SVG and provide installation options for the owner to choose.

Show full SKILL.md (325 more words)Show less

Authentication

Local SVG creation, validation, and rasterization require no authentication and must not make network requests. CMS authentication is deliberately out of scope for this skill; pass the reviewed asset to the publishing workflow, which owns the target-specific secret and upload controls.

Approval Boundaries

Require approval before inventing or altering brand tokens, changing sourced values, overwriting assets, installing software, uploading to a CMS, or publishing. A figure must not imply causation, scale, performance, price, or endorsement beyond its cited evidence.

Output

Produce:

  • editable .svg path and SHA-256 digest
  • optional .png path, dimensions, MIME type, and byte size
  • article anchor, figure title, descriptive alt text, and visible caption
  • evidence mapping for factual labels and values
  • XML, active-content, accessibility, and render checks
  • unresolved decisions and upload/publication status

Error Handling

ConditionResponse
Source data conflictsStop the chart, list the conflicting values and dates, and request an authoritative source.
SVG parser rejects the fileDo not rasterize or upload; repair the XML and rerun validation.
Active content is detectedRemove scripts, handlers, remote resources, and foreignObject; regenerate from safe primitives.
Labels clip or contrast failsAdjust layout or palette, then inspect again at target width.
Rasterizer is unavailableReturn the validated SVG and an explicit unexecuted renderer recommendation.
Output path already existsUse a new versioned filename or obtain overwrite approval.

Examples

Create a source-backed process figure:

text
request: flow "Webhook delivery lifecycle"
steps: receive -> authenticate -> enqueue -> process -> acknowledge
source: approved article section "Delivery lifecycle"
outputs: webhook-delivery-lifecycle.svg, webhook-delivery-lifecycle.png
validation: XML clean; active content absent; 1600x900; alt text present

Refuse an unsupported comparison:

text
request: compare three vendors by reliability
result: blocked
reason: the article provides no comparable reliability measurement or source
next: supply an authoritative dataset or use a nonquantitative taxonomy

Verification

  • Parse the SVG as XML and confirm one unique title/description pair.
  • Search for script, event attributes, javascript:, remote references, and foreignObject; expect none.
  • Inspect the rendered asset at desktop and narrow content widths.
  • Verify every number and terminal line against the recorded source.
  • Verify PNG dimensions and MIME type independently of the extension.

Resources

Next Steps

Attach the figure receipt to the article review, then let the publishing workflow perform the separately approved upload and rendered-page verification.

© jeremylongshore, MIT-0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in plugins/productivity/publishing-skills/skills/blog-figure-svg of jeremylongshore/tons-of-skills-marketplace.

Open the folder on GitHubat commit cfae287

Compare with similar skills

Blog Figure SVG next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Blog Figure SVG compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Blog Figure SVG this skilljeremylongshore/tons-of-skills-marketplace2.8k—~2kAutomated safety check: PassMIT-0
Accessibilityaffaan-m/ECC277k1 repos~1.6kAutomated safety check: PassMIT
Figurevectorize-io/hindsight48k—~1.9kAutomated safety check: PassMIT
Accessibilityaffaan-m/ECC276k—~1.2kAutomated safety check: PassMIT
Accessibilityaffaan-m/ECC276k—~1kAutomated safety check: PassMIT
Accessibilityelastic/kibana21k—~338Automated safety check: PassCustom licence

Similar skills

  • Accessibility

    affaan-m/ECC

    Design, implement, and audit accessible UI to WCAG 2.2 Level AA across Web, iOS, and Android — semantic ARIA roles and labels, accessibility traits and hints, focus management, contrast, target…

    277k GitHub starsUsed in 1 repo~1.6k tokens
    Frontend & DesignAuto-check passed

  • Figure

    vectorize-io/hindsight

    Draw an animated figure (boxes, arrows, moving data) as one self-contained SVG for a GitHub README, PR, issue or blog post.

    48k GitHub stars~1.9k tokensUpdated yesterday
    Writing & ContentAuto-check passed

  • Accessibility

    affaan-m/ECC

    WCAG 2.2 レベル AA 標準を用いてインクルーシブなデジタルプロダクトを設計・実装・監査します。Web 用のセマンティック ARIA および Web・ネイティブプラットフォーム（iOS/Android）のアクセシビリティトレイトを生成するために使用します。

    276k GitHub stars~1.2k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • Accessibility

    affaan-m/ECC

    使用 WCAG 2.2 Level AA 标准设计、实施和审计包容性数字产品。运用此技能为 Web 生成语义 ARIA，并为 Web 和原生平台（iOS/Android）生成无障碍特性。

    276k GitHub stars~1k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • Accessibility

    elastic/kibana

    Official

    Accessibility guidance for Kibana. An agent skill from elastic/kibana.

    21k GitHub stars~338 tokensUpdated today
    Frontend & DesignAuto-check passed

  • Options

    asgeirtj/system_prompts_leaks

    Present multiple design options as a vertical stack of anchored turns

    69k GitHub stars~918 tokensUpdated yesterday
    Auto-check passed

More from jeremylongshore/tons-of-skills-marketplace

All 3,342 skills in this repo

  • Performing Security Code Review

    jeremylongshore/tons-of-skills-marketplace

    Execute this skill enables AI assistant to conduct a security-focused code review using the security-agent plugin.

    2.8k GitHub starsUsed in 2 repos~1.3k tokens
    Auto-check: notes

  • Adapting Transfer Learning Models

    jeremylongshore/tons-of-skills-marketplace

    Build this skill automates the adaptation of pre-trained machine learning models using transfer learning techniques.

    2.8k GitHub stars~1.1k tokensUpdated today
    Auto-check passed

  • Agent Context Loader

    jeremylongshore/tons-of-skills-marketplace

    Execute proactive auto-loading: automatically detects and loads agents.md files.

    2.8k GitHub stars~1.1k tokensUpdated today
    Auto-check passed

  • Aggregating Performance Metrics

    jeremylongshore/tons-of-skills-marketplace

    Aggregate and centralize performance metrics from applications, systems, databases, caches, and services.

    2.8k GitHub stars~1.2k tokensUpdated today
    Auto-check passed

  • Analyzing Capacity Planning

    jeremylongshore/tons-of-skills-marketplace

    Execute this skill enables AI assistant to analyze capacity requirements and plan for future growth.

    2.8k GitHub stars~947 tokensUpdated today
    Auto-check passed

  • Analyzing Database Indexes

    jeremylongshore/tons-of-skills-marketplace

    Process use when you need to work with database indexing. An agent skill from jeremylongshore/tons-of-skills-marketplace.

    2.8k GitHub stars~2k tokensUpdated today
    Auto-check passed

Questions about Blog Figure SVG

What does Blog Figure SVG do?

Design accessible, source-backed SVG editorial figures and optionally rasterize reviewed assets for a blog or CMS. Blog Figure SVG is an agent skill from jeremylongshore/tons-of-skills-marketplace. Design accessible, source-backed SVG editorial figures and optionally rasterize reviewed assets for a blog or CMS.

When should I use Blog Figure SVG?

Blog Figure SVG fits situations like: A post needs a flow; with add a figure to this post; make an SVG diagram.

How do I install Blog Figure SVG in Claude Code?

Run `npx skills add jeremylongshore/tons-of-skills-marketplace --skill blog-figure-svg -a claude-code`. Or copy the skill folder (plugins/productivity/publishing-skills/skills/blog-figure-svg in jeremylongshore/tons-of-skills-marketplace) into .claude/skills/blog-figure-svg in your project. Claude Code loads it when a task matches its description.

How do I install Blog Figure SVG in Codex?

Run `npx skills add jeremylongshore/tons-of-skills-marketplace --skill blog-figure-svg -a codex`. Or copy the skill folder (plugins/productivity/publishing-skills/skills/blog-figure-svg in jeremylongshore/tons-of-skills-marketplace) into .agents/skills/blog-figure-svg in your project. Codex loads it when a task matches its description.

Can I use Blog Figure SVG in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add jeremylongshore/tons-of-skills-marketplace --skill blog-figure-svg -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/blog-figure-svg, .gemini/skills/blog-figure-svg, .github/skills/blog-figure-svg and .opencode/skills/blog-figure-svg in your project.

What does Blog Figure SVG need to run?

Going by SKILL.md and its folder, Blog Figure SVG needs the command-line tools its instructions call (python3 and magick). Our summary lists: Python 3. Its frontmatter pre-approves these tools: Read, Write, Edit, Bash(command:*), Bash(magick:*), Bash(identify:*), Bash(rsvg-convert:*), Bash(inkscape:*), Bash(python3:*). Compatibility (from SKILL.md): Designed for Claude Code; file creation is local by default, while brand changes, data claims, uploads, overwrites, and publication require owner approval.

Does Blog Figure SVG access the network?

SKILL.md names 3 domains. In commands or code: w3.org; the agent is likely to contact it when it follows the instructions. As links in the text: developer.mozilla.org and cheatsheetseries.owasp.org. This is read from the text; nothing was executed.

Is Blog Figure SVG safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Blog Figure SVG use?

Blog Figure SVG is published under the MIT-0 licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Blog Figure SVG use?

About 2k tokens (SKILL.md is roughly 8.2k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Blog Figure SVG?

Skills that share tags, products or a category with Blog Figure SVG: Accessibility (affaan-m/ECC, 277k stars), Figure (vectorize-io/hindsight, 48k stars), Accessibility (affaan-m/ECC, 276k stars) and Accessibility (affaan-m/ECC, 276k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Blog Figure SVG?

jeremylongshore (a GitHub user) maintains it in jeremylongshore/tons-of-skills-marketplace, which has 2,827 GitHub stars. The repository holds 3,342 skills in this directory. The repository was last updated on October 10, 2026.

Source: jeremylongshore/tons-of-skills-marketplace on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.