Skills
.Work. You
Rest

generate-svg

Community

Generate accessible SVG diagrams from prompts.

Design & Creative#design#accessibility#visualization#svg#diagram#material-icons#diagram-patterns
Authorjey3dayo
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Create accurate, accessible SVG diagrams from natural language prompts to replace manual diagram drawing.

Core Features & Use Cases

  • Transparent background and dark-mode friendly: diagrams render without background and adapt to light/dark contexts.
  • Accessibility compliance: supports WCAG-friendly labeling via title and desc for screen readers.
  • Material Icons integration: embeds icons from Material Icons as inline SVG paths.
  • Supports six design patterns: architecture, flow, relationship, component, concept, and comparison diagrams.
  • Usage in content creation: ideal for technical blogs, product docs, dashboards, and marketing assets.

Quick Start

Provide the diagram type and key elements, and I will generate an accessible SVG diagram.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: generate-svg
Download link: https://github.com/jey3dayo/dotfiles/archive/main.zip#generate-svg

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.