skills.rest
zircote
zircoteCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

svg-graphics

Generate branded, accessible SVG graphics for blog content and diagrams.

3|Updated Jan 17, 2026
Search Tags:#branding#accessibility#mermaid#visualization#svg#blog#graphic-design
One-click install
npx skills add https://github.com/zircote/agents --skill svg-graphics-zircote
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: svg-graphics
Source: https://github.com/zircote/agents/tree/main/skills/svg-graphics
Command: npx skills add https://github.com/zircote/agents --skill svg-graphics-zircote

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Branded, accessible visuals are often manual to produce and difficult to keep on-brand; this skill automates generating SVG graphics for blog content, social previews, diagrams, and data visualizations with consistent styling and accessibility.

Core Features & Use Cases

  • Social previews (hero images) for Open Graph/Twitter Card integration.
  • Technical diagrams (flowcharts, architecture diagrams, sequences) in branded SVG.
  • Data visualizations and styled tables converted to branded SVG.
  • Mermaid-to-SVG conversion with brand theming and accessibility enhancements.

Quick Start

Create a social preview for my post about API authentication.

Frequently Asked Questions about svg-graphics

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert mermaid diagrams to branded SVG for a blog post?▼

To convert mermaid diagrams to branded SVG, the skill leverages mermaid CLI to render diagrams while applying your brand color palette and injecting accessibility attributes like title and aria-labelledby.

Can I generate social preview images for Open Graph using SVG?▼

Yes, you can generate SVG social previews for Open Graph and Twitter Card integration, and the skill supports exporting these graphics to PNG format specifically for og:image requirements.

How do I turn markdown tables into accessible SVG data visualizations?▼

You can convert markdown tables into branded SVG data visualizations automatically, ensuring the resulting graphics retain proper accessibility elements such as title, desc, and aria-labelledby attributes.

What is the best way to ensure SVG accessibility attributes are included in technical diagrams?▼

The best way to ensure SVG accessibility attributes in technical diagrams is to auto-render them with proper title, desc, and aria-labelledby tags while applying consistent brand styling to architecture and sequence diagrams.

Do I need mermaid CLI installed to render branded mermaid diagrams?▼

Yes, you need mermaid CLI available in your environment, as the skill leverages it directly to process mermaid syntax and apply brand theming and accessibility enhancements to the output SVG.

Related Skills

Explore More Content & Communication Skills→
ahundtahundt
12

mermaid-diagrams

Render Mermaid diagram syntax from .mmd files into styled SVG files.

Community
Basic
cat-xierluocat-xierluo
557

svg-article-illustrator

Generate SVG illustrations from Markdown articles with animation and PNG export.

Community
Advanced
KrystianYCSilvaKrystianYCSilva

markdown-expert

Create Markdown documentation with Mermaid diagrams and GFM tables.

Community
Intermediate
zivtechzivtech

graphic-design-executor

Transform design-planner specifications into SVG and HTML assets.

Official
Advanced