aipptskill.

SCENE

Build a tech-talk deck for a developer conference

A 4-skill pipeline for code-heavy conference talks — Slidev for the deck, mermaid for diagrams, terminal recordings for demos, frontend-design polish.

Pipeline

  1. Slides Creator Skill
  2. Mermaid Tools Skill
  3. CLI Demo Generator Skill
  4. Frontend Design Skill

A tech talk deck is the opposite of a pitch deck: you’re not selling a recommendation, you’re explaining a system. The stack below is built for developers in a dim room with a projector, not investors over coffee.

Step 1: Pick Slidev for the base

Use slides-creator in Slidev mode. Slidev is the developer-conference standard for a reason: Markdown-first authoring, first-class code blocks with syntax highlighting that survives export, and keyboard navigation built in.

Use slides-creator (Slidev format) to build a 20-slide tech talk on
"Building reliable agent systems." Audience: backend engineers.
Use the dark theme. Include syntax-highlighted code blocks for
TypeScript and Python.

Step 2: Pre-render diagrams with Mermaid

Architecture diagrams in tech talks die at projection. Bare Mermaid blocks render fine on your laptop, fuzzy on a 1080p projector. Use mermaid-tools to extract every Mermaid block from your Markdown source and render to 2x retina PNG.

Use mermaid-tools on my talk.md. Render every mermaid block to PNG
at 2x density. Save under ./diagrams/. Replace the inline blocks
with image references.

Step 3: Record terminal demos with VHS

Live coding fails 30% of the time on stage. Pre-record terminal demos with cli-demo-generator — write a .tape script, get a deterministic GIF every render. Embed the GIF in Slidev where you’d otherwise live-code.

Use cli-demo-generator to record `pnpm install`, `pnpm dev`, then
opening localhost:4321. 15 seconds, dark theme, monospace.

Step 4: Polish with frontend-design (optional)

If the default Slidev styling reads too generic, layer frontend-design on the embedded CSS. The “anti-AI-slop” rules (no centered layouts, no purple gradients, no uniform rounded corners) keep the deck from looking like every other AI-generated talk.

Variations

  • Lightning talk (5 slides) — skip step 4, lean on Slidev defaults.
  • Workshop (90 min) — add interactive code blocks Slidev supports natively.
  • OSS launch announcement — record more demo GIFs, drop the architecture diagrams.

What this pipeline doesn’t do

  • Inter-slide animations — Slidev does subtle transitions; for full motion graphics use nanobanana-ppt instead.
  • Brand-themed corporate styling — for that, swap step 1 for ppt-creator + theme-factory.

This stack assumes the audience is technical, the room is dim, and the deck is judged on clarity not flair.

See also: AI diagram skills guide · ppt-creator vs slides-creator