d2-slides

Builds slide decks from Markdown with D2 figures compiled into self-contained HTML.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires d2, playwright, and includes assets (resource) components.

What problem does it solve? Slide decks normally have no failing state, so defects like clipped bullets, split sentences, and unreadable contrast reach the audience unnoticed. This Skill makes a deck a plain-text artifact that is compiled and then verified with deterministic gates before it is presented. ## Core Features & Use Cases - Text-to-deck compilation: Write one Markdown file where each figure is a ```d2 fence; the builder renders every figure with D2's TALA layout engine and emits a self-contained HTML deck with keyboard navigation, an overview grid, and print-to-PDF support. - Deterministic verification loop: Run vlmkit gates against the built deck — check integrity for clipped or colliding content, check copy --manifest for text the frame cut off, and check a11y contrast for projector readability. - Figure fact-checking and read-back scoring: Pin each figure's boxes and edges to a fact sheet with d2-facts, and use deck-review to screenshot slides, hand them to a vision reader, and score fidelity, order, and split sentences. - Use Case: Draft a technical talk in deck.md, build it, run the four gates plus figure fact checks, fix what they name, and deliver a verified HTML deck and PDF. ## Quick Start Ask the agent to build a slide deck from your Markdown outline with D2 figures, then run the integrity, copy, and contrast gates on the built output and fix any reported defects.

Frequently Asked Questions about d2-slides

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

FAQPage Schema
How do I build a slide deck from Markdown with D2 diagrams?

Write a Markdown file with slides separated by lines of exactly --- and each figure as a ```d2 fence, then run build-deck.mjs with the file and an output directory. It compiles each figure with D2's TALA layout and emits index.html, print.html, per-slide SVGs, a copy manifest, and slides.json.

How do I check a slide deck for clipped or overflowing text?

Run vlmkit check integrity on the built index.html across viewports and on print.html at 1280px, which reads every slide at once. Then run check copy with the generated copy.txt manifest to catch lines the fixed 1280x720 frame cut off.

What are the requirements for using D2 TALA layout in slides?

The d2 CLI must be installed and d2 layout must list tala as bundled. The builder itself has no npm dependencies, and the generated deck loads no network resources, so D2 with TALA is the only hard requirement.

Why does the copy gate report copy-invisible on visible slide text?

This is a known vlmkit gate limitation: a manifest line whose rendered text is assembled from several inline children, such as code or strong tags, can read as invisible. Re-run with --allow-invisible unknown and check the missing count, which is the part that matters.

When should I not use this deck builder?

Do not use it for a single standalone diagram, which belongs in the d2-diagram workflow, or for animated figures, which belong in explanatory-animation. It targets whole decks presented on screen or printed to PDF.

How do I verify a D2 figure draws the right boxes and edges?

Run d2-facts.mjs with --from-svg on the built slide SVG and --expect pointing to a fact sheet listing required boxes, edges, and forbidden connections. It exits 1 and names the box or edge that is wrong, catching errors the page gates cannot see.