explanatory-animation

Generates checked animations and diagrams from declarative JSON scenes with vlmkit-anim.

22|1|Updated Mar 30, 2026
One-click install
npx skills add https://github.com/mizchi/vlmkit --skill explanatory-animation-mizchi
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: explanatory-animation
Source: https://github.com/mizchi/vlmkit/tree/main/.apm/skills/vlmkit/workflows/explanatory-animation
Command: npx skills add https://github.com/mizchi/vlmkit --skill explanatory-animation-mizchi

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @mizchi/vlmkit-anim, playwright.

What problem does it solve? Explaining algorithms, architectures, or code changes with hand-drawn diagrams is slow and error-prone, and nothing verifies that the picture actually matches the code or the claim it makes. This Skill lets you write one declarative JSON scene and get a compiled, semantically checked animation or figure. ## Core Features & Use Cases - Scene compilation and checking: Write a JSON scene with a kind (sort, tree, state-machine, modules, sequence, and 14 more) plus intent, then run vlmkit-anim check, layout, explain, and why to validate semantics, geometry, and narration. - Code-grounded diagrams: Generate module maps, repository architecture diagrams, PR change maps, and diffs between two maps, verified against fact sheets extracted from the actual import graph via --expect. - Multiple outputs: Render still SVG/PNG figures, standalone HTML pages, GIF/MP4 videos, mermaid imports, and Markdown embeds through a remark plugin. - Use Case: Ask how a branch changes a repository; the Skill runs vlmkit-anim pr --base origin/main to produce one animated beat per commit with a paste-ready Markdown summary. ## Quick Start Ask the agent to animate how bubble sort works on the values [5, 3, 8, 1] and produce a checked SVG figure for the docs.

Frequently Asked Questions about explanatory-animation

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

FAQPage Schema
How do I create an animated algorithm explanation from JSON?

Write a scene file with a format field, a kind such as sort or tree, and intent fields like the algorithm name and values. Run vlmkit-anim check to validate it, then still, html, or video to render the figure or animation.

How to generate an architecture diagram from actual code?

Run vlmkit-anim facts on a directory to extract its import graph into a fact sheet, then write a modules scene and check it with --expect so the diagram is verified against the real dependencies. vlmkit-anim repo automates this for a whole workspace.

Does vlmkit-anim require a browser or API key?

Writing and checking scenes is browser-free and key-free. Playwright is only needed for PNG output, contact sheets, video, and eval, while review --model needs a vision model API key through vlmkit-ai.

Can I import an existing mermaid diagram?

Yes, vlmkit-anim import mermaid converts flowchart, sequenceDiagram, and stateDiagram-v2 sources into a scene. It reports dropped or changed constructs like styles and classDefs, which you re-add as tones or captions.

Why does my diagram fail the layout check?

Layout failures name the exact texts colliding, edges crossing boxes, or labels past the canvas edge per step. Run vlmkit-anim why to see what set each layer and band, then regroup containers or shorten the named label rather than guessing.

When should I use D2 instead of vlmkit-anim?

Use the d2-diagram skill when you want D2 text output, terminal box-drawing rendering, or already maintain .d2 files. vlmkit-anim is for checked animations and figures verified against fact sheets; D2 output has no such checking.