presentation

presentation — technical slide decks that don't suck

A director layer on top of Slidev. This skill owns the what (researched, grounded content) and the how-well (presentation craft). It delegates Slidev syntax mechanics to the official slidev skill — it depends on that skill and never duplicates its syntax reference.

You are not "filling a template." You are interviewing a speaker, researching their topic until you actually understand it, and engineering a deck that an audience will follow and remember.

When to use

• The user wants to build/create a presentation, slide deck, or talk.
• "Make slides / a deck / a presentation about X", "technical talk", "conference talk", "build slides for ", "present ".
• Revising/extending an existing Slidev deck (revision mode).

When to skip

• The user only wants raw Slidev syntax help → use the slidev skill directly.
• A one-off non-deck answer (a definition, a snippet) → just answer.

Dependency: the official slidev skill

This skill produces Slidev markup but does not carry Slidev's syntax reference. Before generating any slides.md:

1. Ensure the official skill is available. If not, install it: npx skills add slidevjs/slidev
2. For any syntax question (layouts, magic-move, click animations, components, export flags), consult the slidev skill / its reference files, or https://sli.dev/llms.txt as a fallback. Do not hand-roll syntax you can look up — getting it wrong breaks rendering.

references/slidev-cheatsheet.md carries only the generator gotchas and the delegation pointers — the things that bite an automated author. It is not a syntax copy.

Non-negotiables (read before working)

These are what the user is paying for. Do not skip them because a deck "looks fine."

1. Research + ground BEFORE the interview. The moment you have a topic, run Gate 1 (references/research-grounding.md). Never build slides from model memory.
2. Build from the brief, not from memory. Every factual claim on a slide traces to the research/grounding brief.
3. Flag weak claims; don't assert them. If something is commonly repeated but poorly supported, skip it or caveat it. Never present a myth as fact.
4. Assertion-evidence + lean text. Slide titles are complete-sentence claims; the body is visual evidence, not a bullet dump. Keep on-slide text to a glance — aim ≤ ~20 words of body per slide; full sentences and detail belong in the speaker notes, not on the slide. (references/presentation-craft.md "Text budget")
5. One idea per slide; ~1–2 min/slide. Split rather than cram.
6. Fill the canvas. Every slide uses all available space with balanced proportions — never top-anchor content above a dead band, and never float a small element in a big empty region. Center/distribute the content group and size visuals to fill their region; distribute whitespace, don't dump it. (references/presentation-craft.md; concrete Slidev recipe in references/slidev-cheatsheet.md)
7. Code discipline. ≤5–7 lines visible at once, large, progressive reveal, dim irrelevant lines; prefer a diagram over a wall of code. (references/technical-craft.md)
8. Generate every legitimately generatable asset (code images, diagrams, charts). Placeholder only the un-generatable (real photos, product screenshots, demo videos) with a specific swap instruction. Never fabricate evidence — no fake screenshots, invented data, or hotlinked images. (references/assets.md)
9. Storyboard approval before writing slides (Gate 2).
10. Self-verify before handing over (Gate 3, references/verification.md).
11. Finish live, zero manual steps. End with the dev server running in the background and the deck open at http://localhost:3030. The user never runs a command.

Workflow

Step 0  Detect topic (and whether it's a specific library/tool)
Gate 1  Research & Ground   → references/research-grounding.md   (BEFORE interview)
Step 2  Interview           → references/interview.md            (adaptive, one Q at a time)
Step 3  Deeper ground       → only if internals/architecture-focused or long-form
Gate 2  Storyboard approval → per-slide plan; user approves before any slides.md
Step 5  Scaffold + theme    → pnpm create slidev; visual theme selection in browser
Step 6  Generate slides.md  → craft refs + slidev skill + assets.md; respect gotchas
Gate 3  Self-verify loop    → references/verification.md         (screenshot → fix → repeat)
Step 8  Finish live         → bg dev server + open browser; then offer export

Step 0 — Detect

Identify the topic. Decide whether it is also a specific library/tool (repo path / GitHub URL / package name / docs URL / names a concrete library / user is in a code repo) — this turns on Gate 1 Track B in addition to Track A.

Gate 1 — Research & Ground (FIRST, before talking)

Load references/research-grounding.md. Run Track A (topic research, always) and, when applicable, Track B (code grounding). Light pass now (enough for a smart interview); deeper pass later if the talk warrants. Produce the research + grounding brief.

Step 2 — Interview

Load references/interview.md. Ask the canonical questions adaptively, one at a time, skipping anything the brief already answers.

Step 3 — Deeper grounding (conditional)

If the chosen areas are internals/architecture-focused or the talk is long-form, deepen the brief at the per-area depth the user set.

Gate 2 — Storyboard approval

Present a per-slide storyboard: assertion title · content/asset · layout · speaker-note intent · place in the narrative arc · running time budget vs stated duration. Get approval/edits before writing any slides.md.

Step 5 — Scaffold + visual theme selection

Scaffold the Slidev project at the user's output location. Select a theme visually in the browser — show 2–4 themes matching brand/tone (gallery previews or a quick render); user picks. Then apply brand colors/fonts/logo. See the branding-mode routing in references/interview.md.

Step 6 — Generate slides.md

Apply the craft layer (presentation-craft.md + technical-craft.md). Consult the slidev skill for all syntax. Produce/insert assets per references/assets.md. Respect the gotchas in references/slidev-cheatsheet.md.

Gate 3 — Self-verify loop

Load references/verification.md. Screenshot every slide in a headless browser, detect overflow / clipped code / contrast / empty / overstuffed, fix, re-check until clean.

Step 8 — Finish live

Leave the dev server running in the background and open the deck in the browser. Then offer the export targets the user chose (PDF/PPTX/SPA).

Revision mode

Pointed at an existing Slidev project, skip scaffolding and extend / restyle / tighten using the same craft layer + self-verify loop.

Reference files

File	Load when
references/research-grounding.md	Gate 1 — researching + grounding the topic
references/interview.md	Step 2 — running the interview; branding routing; slide-count math
references/presentation-craft.md	Step 6 — general craft rules + myth-flags
references/technical-craft.md	Step 6 — code/diagrams/demos/audience for technical talks
references/slidev-cheatsheet.md	Steps 5–6 — generator gotchas + delegation to the slidev skill
references/assets.md	Step 6 — generating assets + placeholder convention
references/verification.md	Gate 3 — self-verify checks + auto-fix loop

Asset helper

assets/render-asset.mjs renders standalone code (Shiki) and diagram (Mermaid) PNGs into a deck's public/. Usage in references/assets.md. Install once with npm --prefix <skill>/assets install and npx playwright install chromium.