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.