Svg skills

PatentFig AI API

davila7

Generate patent-compliant figures from text or images.

Star History Chart

davila7

Self-hosted stargazer charts for GitHub repos.

Generate Social

jeremylongshore

Create on-brand social media templates as SVG.

Generate Doc Template

jeremylongshore

Create branded document templates as SVG files.

Image Renderer

vercel-labs

Transform JSON specs into SVG and PNG images.

Generate pixel art SVG illustrations for READMEs, docs, or slides. Use when user says "画像素图", "pixel art", "make an SVG illustration", "README hero image", or wants a cute visual.

Produce low-fidelity black-and-white UI wireframes as SVGs or viewer pages. Use when asked to wireframe, sketch a screen, draft a layout, make a low-fi mockup, or publish wireframes.

Official GSAP skill for GSAP plugins — registration, ScrollToPlugin, ScrollSmoother, Flip, Draggable, Inertia, Observer, SplitText, ScrambleText, SVG and physics plugins, CustomEase, EasePack, CustomWiggle, CustomBounce, GSDevTools. Use when the user asks about a GSAP plugin, scroll-to, flip animations, draggable, SVG drawing, or plugin registration.

Generate production-grade engineering design diagrams (architecture, sequence, delta, drift) as self-contained dark-themed HTML files with accessible inline SVG. Grounds every diagram in real repo topology via DCI — package manifests, docker-compose, k8s, terraform, import graph. Four modes: generate from a live repo, diff a PR, trace a stack into a sequence diagram, or watch for drift against a fingerprint. Semantic OKLCH palette; Mermaid fallback for large graphs. Use when visualizing system architecture, reviewing a PR for structural change, diagnosing an incident from a trace, onboarding to a codebase, or detecting architectural drift. Trigger with "/design:generate", "/design:diff", "/design:trace", "/design:watch", "draw the architecture", "diagram this PR", "engineer design diagram", or "architecture diagram".

Generates on-brand, editable SVG logo assets — wordmark, monogram, and favicon — from the active brand profile, reusing its exact palette and heading font. Vector output needs no account, key, or network. Use when a user asks for a logo, wordmark, icon, monogram, or favicon. Trigger with "make a logo", "generate a wordmark", or "/brand-make logo".

Command-line interface for Inkscape - A stateful command-line interface for vector graphics editing, following the same patterns as the GI...

Generate draw.io diagrams as .drawio files and export to PNG/SVG/PDF with embedded XML

Create polished dark-themed architecture diagrams as self-contained HTML+SVG files. Use when the user asks for system, infrastructure, cloud, security, or network topology diagrams.

Creating interactive data visualisations using d3.js. This skill should be used when creating custom charts, graphs, network diagrams, geographic visualisations, or any complex SVG-based data visualisation that requires fine-grained control over visual elements, transitions, or interactions. Use this for bespoke visualisations beyond standard charting libraries, whether in React, Vue, Svelte, vanilla JavaScript, or any other environment.