Animated SVG

This skill should be used when the user asks to "animate this diagram", "create an animated architecture diagram", "animated AWS/GCP/Azure diagram", "animated sequence diagram", "animated flowchart", "turn this PNG/SVG into an animation", "schematic animation", "data flow animation", "animate this SVG", "show the diagram style gallery", "illustrate a concept with cliparts/emojis", "animated concept illustration", "animate a large flow with pan and zoom", "code walkthrough animation", "Arabic animated diagram", "رسم متحرك", "animate this with my voiceover/SRT", "sync animation to narration time

16 stars 2 forksDevOps & Cloud

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add omkamal/animated-diagrams-skill --skill animated-svg

Manual install

git clone --depth 1 https://github.com/omkamal/animated-diagrams-skill.git /tmp/animated-diagrams-skill
mkdir -p ~/.claude/skills
cp -r /tmp/animated-diagrams-skill/. ~/.claude/skills/animated-svg

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# animated-svg — animated 2D schematic diagrams

Turn a description or an existing diagram (PNG/SVG) into a choreographed,
cinema-quality animation: semantic SVG scene + GSAP 3 timeline + HyperFrames
deterministic rendering (HTML → frame-seeked headless Chrome → FFmpeg).

## Companion agent

For **batch jobs or delegation** (multiple artifacts with one consistent
style, or another skill needing an animation produced) launch the
**`diagram-animator`** agent (`agents/diagram-animator.md`, installed at
`~/.claude/agents/`) via the Agent tool — it operates this skill end-to-end,
decides unspecified options (mode/style/icons/duration), keeps a batch
visually consistent, and returns a manifest of MP4/GIF/SVG/interactive-HTML
(+ alpha WebM) paths, all under one subdirectory of the calling directory.

## Paths

```bash
SKILL_DIR=~/.claude/skills/animated-svg          # resolve via this SKILL.md's location
HF=$SKILL_DIR/node_modules/.bin/hyperframes
```

**Setup gate**: if `$HF` does not exist, run `bash $SKILL_DIR/scripts/setup.sh`
first (installs hyperframes + gsap, vendors GSAP plugins, ensures Chrome,
smoke-renders). One-time, then everything is offline. The script is portable
across macOS zsh and Linux bash — **run it, never `source`/`.` it** (sourcing
breaks self-path detection; the script refuses with a hint). macOS prereqs:
`brew install node ffmpeg python`.

## Workflow

### 1. Classify the request

- Diagram type: cloud-arch / sequence / flowchart / network / illustration.

Read the full skill on GitHub

Details

Skill name: animated-svg
Repository: omkamal/animated-diagrams-skill
License: Apache-2.0
Repo updated: 12 June 2026

FAQ

What does the Animated SVG skill do?

How do I install the Animated SVG skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add omkamal/animated-diagrams-skill --skill animated-svg. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Animated SVG popular?

It lives in omkamal/animated-diagrams-skill, which has 16 GitHub stars and 2 forks.

Related skills

Xcloud Docker Deploy

Asif2BD/xCloud-Docker-Deploy-Skill

xCloud Docker Deploy v1.4.1 — a confirmation-gated skill for preparing projects for xCloud. It inspects or changes files only after user consent, generates Docker/GHCR deployment files, fixes xCloud port rules, and routes live API work only after a separate explicit token-consent step.

DevOps & Cloud

Pc Cleanup

DogukanK/claude-pc-cleanup

Scan a macOS machine for reclaimable disk space and clean it up safely. Use this whenever the user reports low disk space, a "disk almost full" warning, wants to free up storage, asks to delete unnecessary/junk/system files, mentions "sistem verileri" (macOS's System Data category) taking up too much room, asks what's safe to delete on their Mac, wants to reclaim space from old node_modules/Docker or Podman images/build caches piled up across dev projects, or wants a recurring PC/disk cleanup routine — even if they never say the words "disk" or "clean up" outright. Always run the read-only sca

DevOps & Cloud

Vibe Ship

sudais-khalid/vibe-ship

Generates and audits production-ready deployment setups for any app. Detects the stack from the repo (Node/Next.js/Bun/Deno, Python/Django/FastAPI, Go, Rust, Java/Spring, .NET, Ruby/Rails, PHP/Laravel, Elixir/Phoenix, static sites, monorepos) and writes hardened Dockerfiles, .dockerignore, compose.yaml with databases/caches/queues, .env.example, GitHub Actions or GitLab CI (test, build, scan, SBOM, signing, deploy), Kubernetes manifests, and configs for Fly.io, Render, Railway, Cloud Run, AWS, Azure, VPS+Caddy or Kamal. Verifies output with a 90+ rule static auditor (score, SARIF, CI exit code

DevOps & Cloud

Vercel Github Actions Deploy

itsOmSarraf/vercel-github-actions-deploy-skills

Set up GitHub Actions to deploy any Vercel project using the Git Author Override method, enabling teammates to deploy on the free Hobby plan. Use when the user asks about Vercel deployment via GitHub Actions, CI/CD for Vercel, letting teammates deploy on Vercel free plan, bypassing Vercel's Hobby plan deploy restrictions, or automating Vercel production deploys. Covers workflow setup, GitHub Secrets configuration, and package manager variants (bun, npm, pnpm).

DevOps & Cloud

Free My Arch

debba/free-my-arch

Interactive disk cleanup for Arch Linux. Scans package caches (pacman, AUR helpers, orphans, journal, coredumps), user & app caches, dev caches (pip/cargo/npm/go, stale node_modules), Docker/Flatpak leftovers, and oversized personal files. Reports reclaimable space, then cleans with group-level confirmation for caches and per-file selection for large files. Use when the user wants to free disk space, clean caches, remove junk, or find large files on Arch Linux.

DevOps & Cloud

Kubernetes

kcns008/cluster-agent-swarm-skills

Kubernetes & OpenShift Platform Agent Swarm — A coordinated multi-agent system for cluster operations. Includes Orchestrator (Jarvis), Cluster Ops (Atlas), GitOps (Flow), Security (Shield), Observability (Pulse), Artifacts (Cache), and Developer Experience (Desk). Pure instruction-based skill — no executable scripts.

DevOps & Cloud

Browse the most popular Claude skills, all devops & cloud skills, or write your own with the skills generator.