Loading...
Loading...
Found 4 Skills
Explain an algorithm, protocol, data structure, state machine, or architecture as a checked animation or still figure with `vlmkit-anim` — one JSON scene (a `kind` plus intent, never coordinates) compiled to SVG + Web Animations, a GIF, or a cropped figure, and checked against what it claims (semantic checks, `layout` geometry, a fact sheet with `--expect`, `why` for the layout's own reasons). Also draws a module map from a directory's import graph, a repository's architecture, the change map of a branch, the diff of two maps, and imports mermaid the repo already has. Use when asked to animate, illustrate, diagram, draw a dependency / module / architecture map, explain how something works step by step, or embed such a figure in docs. Not a VRT gate — `vlmkit-anim` is its own binary (`@mizchi/vlmkit-anim`).
Answer "how does this work / how is this structured / what does this change" with a drawn figure and a narration that follows it — a module map from the code's own imports, a walked request, a state machine, an algorithm step by step, the change map of a branch — produced with `vlmkit-anim`, checked against the facts it draws, and delivered as an SVG / GIF next to the prose. Use whenever the user asks to explain, walk through, show the structure of, or illustrate code, a repository, a flow, a protocol, a PR, or a bug, and a picture with four or more things and their relations would carry the answer better than a paragraph. The explanation is the deliverable; the picture is its evidence. Scene mechanics are in `explanatory-animation`.
Build a slide deck whose source is text and whose figures are laid out by TALA — one Markdown file with a ```d2 fence per figure, compiled to a self-contained HTML deck (keyboard nav, overview grid, print-to-PDF), each figure as its own SVG, and a copy manifest. The deck is a page, so vlmkit's own gates read it: `check integrity` for a slide that breaks or clips, `check copy --manifest` for text the frame cut off, `check a11y contrast` for a projector. Loop: write `deck.md` → build → gates → fix. Use when asked for slides, a deck, a talk, a presentation, a review walkthrough, or a figure-heavy explainer that has to be presented rather than read. Not for one diagram (`d2-diagram`) or a moving figure (`explanatory-animation`).
Draw a software architecture, system, data-model or call-flow diagram as D2 text laid out by TALA (D2's whiteboard-style engine, open source since D2 0.9), look at it in the terminal before anyone opens an image, and check that the picture says what it claims — `d2 --layout=tala x.d2 x.txt` renders the layout as Unicode box drawing, `--ascii-mode standard` as plain ASCII for a README, and `assets/d2-facts.mjs` reads the drawn boxes and arrows back out of the render and holds them to a fact sheet. Loop: write `.d2` → `d2 fmt --check` / `validate` → facts → terminal render → PNG → fix the text. Use when asked for a D2 diagram, an architecture diagram kept as editable text in the repo, a TALA layout, a diagram that shows in a terminal or a code block, or when the repo already has `.d2` files. Not for animations or figures with a moving walk (`explanatory-animation`, `explain-with-anim`).