Updated April 2026Cookbook18 min read

10 decks you can ship today with the Claude Slidev skill

Ten real Slidev decks — conference talk, RFC, postmortem, ADR review, sprint review, onboarding, investor one-pager, workshop, lightning talk, internal launch — each as a single Claude prompt with the exact Slidev Markdown it produces.

Already know what skills are? Skip to the cookbook. First time? Read the explainer then come back. Need the install? It’s on the /skills/slidev page.

Editorial illustration: a markdown document on the left transforming into a fanned deck of slides on the right, connected by a luminous teal flow arc, on a midnight navy background.
On this page · 21 sections
  1. What this skill does
  2. The cookbook
  3. Install + README
  4. Watch it built
  5. 01 · RFC deck (technical proposal)
  6. 02 · Postmortem deck (timeline + root cause + actions)
  7. 03 · ADR deck (architecture decision record)
  8. 04 · Sprint review deck (auto-built from Linear/Jira)
  9. 05 · Workshop deck (multi-section, code blocks, live demos)
  10. 06 · Conference talk deck
  11. 07 · Internal tech-talk lunchtime deck
  12. 08 · Product launch deck
  13. 09 · Onboarding deck for new hires
  14. 10 · Pitch deck for an internal tool
  15. Community signal
  16. The contrarian take
  17. Real decks shipped
  18. Gotchas
  19. Pairs well with
  20. FAQ
  21. Sources

What this skill actually does

Sixty seconds of context before the cookbook — what the Slidev skill is, what Claude returns when you invoke it, and the one thing it does NOT do for you.

What this skill actually does

Comprehensive guide for Slidev - a web-based presentation framework for developers. Covers Markdown syntax, layouts, components, animations, theming, and exporting.

XIYO, the skill author · /skills/slidev

What Claude returns

You get a Markdown source file (slides.md) with a YAML headmatter block (theme, title, highlighter, transition, background) and slides separated by '---' padded with blank lines. Each slide can declare per-slide frontmatter (layout: cover | two-cols | quote | section | end, plus background and class). Code fences support Shiki line highlighting via {2,4-6}, line numbers via {lines:true}, and live editors via {monaco} or {monaco-run}. Markdown bodies can mix in built-in Vue components (<Tweet>, <Youtube>, <Toc>, <AutoFitText>), Mermaid fenced blocks, click reveals via <v-clicks> or v-click attributes, and motion via v-motion. The output runs with 'slidev slides.md' and exports to PDF/PPTX/PNG via 'slidev export'.

What it does NOT do

It does not install Slidev for you - you still need Node 20+, a package manager, and 'pnpm add -D playwright-chromium' before 'slidev export' will produce a non-blank PDF. It also does not auto-fit text to slide bounds (the 1920x1080 canvas overflows silently) and it does not auto-import React/JSX/TSX components - Slidev is Vue-only by architecture.

How you trigger it

Make me a Slidev deck on TypeScript narrowing - 5 slides, dark theme, Monaco code on slide 3, export to PDF.Refactor this slides.md into two-cols layouts and add v-clicks reveals on the bullets.Build a 12-slide Slidev workshop deck for our internal Rust onboarding - cover, section dividers, Mermaid diagrams, end slide.

Cost when idle

~100 tokens

The cookbook

Each entry below is a deck you could ship this week. They run in the order I’d teach them — the early ones are reusable across any deck, the later ones lean on Slidev features you only need when the format gets weird (Monaco for live code, Mermaid for diagrams, v-clicks for revealed timelines). Every entry pairs with one or two skills or MCP servers you already have on mcp.directory.

Install + README

If the skill isn’t on your machine yet, here’s the one-liner. The full install panel (Codex, Copilot, Antigravity variants) is on the skill page.

One-line install · by XIYO

Open skill page

Install

mkdir -p .claude/skills/slidev && curl -L -o skill.zip "https://mcp.directory/api/skills/download/120" && unzip -o skill.zip -d .claude/skills/slidev && rm skill.zip

Installs to .claude/skills/slidev

Watch it built

A clean walkthrough of why Slidev exists and what it feels like on stage — useful before the cookbook because it anchors what the rendered output actually looks like.

01

RFC deck (technical proposal)

Turn a long-form RFC document into a 10-slide proposal you can present to staff engineers and walk away with a decision.

ForTech leads pitching a migration, an architecture change, or a new internal platform. The RFC already exists as Markdown - this just reframes it for a 25-minute meeting.

The prompt

Use the slidev skill to convert ./RFC-edge-cache.md into a 10-slide deck: title, problem, options-considered, proposal, trade-offs, rollout, risks, alternatives, open questions, decision-asked. Use the 'section' layout for dividers, 'two-cols' for trade-offs, max 5 bullets per slide, headings <=60 chars. Write to slides.md.

What slides.md looks like

---
theme: default
title: RFC - Edge Cache Migration
highlighter: shiki
transition: slide-left
---

# RFC - Edge Cache Migration

The case for moving session reads to Cloudflare KV

---
layout: section
---

# The problem

---
layout: two-cols
---

# Keep Redis

<v-clicks>

- Predictable p99
- Mature ops runbook
- One region only
</v-clicks>

::right::

# Move to KV

<v-clicks>

- Reads at edge
- 5x cheaper at scale
- Eventual consistency
</v-clicks>

One-line tweak

Swap 'two-cols' for 'two-cols-header' if you want the trade-off heading to span both columns. Add 'class: text-sm' to slide frontmatter if the bullets still overflow.

02

Postmortem deck (timeline + root cause + actions)

Compress a 3-hour incident into a 12-slide blameless postmortem deck the on-call team can present at the next eng all-hands.

ForIncident commanders, SREs, on-call engineers running a postmortem review. The data lives in Slack threads + PagerDuty - this is the synthesis.

The prompt

Use the slidev skill to write a 12-slide postmortem deck for the 2026-04-22 checkout outage. Sections: cover, impact, timeline (use 'two-cols' with v-clicks for hour-by-hour reveal), what-went-right, what-went-wrong, root-cause, contributing-factors, action-items (with owners), follow-ups, lessons, questions. Tone: blameless. Save to postmortem.md.

What slides.md looks like

---
theme: default
title: Postmortem - Checkout Outage 2026-04-22
class: text-center
---

# Checkout Outage

2026-04-22 - 47 min - blameless review

---
layout: section
---

# Timeline

---
layout: two-cols
---

# 14:02 -> 14:49 UTC

<v-clicks>

- 14:02 deploy of [email protected]
- 14:07 first 500s in Datadog
- 14:11 page fires to oncall
- 14:23 rollback initiated
- 14:49 traffic recovered
</v-clicks>

::right::

# Impact

- 12,400 failed checkouts
- $84k revenue at risk
- 0 data loss

One-line tweak

Drop the v-clicks wrapper if you want the full timeline visible at once for an exec readout. Add a final 'layout: end' slide with the action-item tracker URL.

03

ADR deck (architecture decision record)

Walk a small group through a single architecture decision in 6-8 slides without making them read the full ADR.

ForStaff engineers and architects who need a decision logged + presented. The ADR markdown already exists - this is the readout format.

The prompt

Use the slidev skill to render ./adr/0023-postgres-vs-dynamodb.md as an 8-slide ADR readout: title, context, decision, consequences-positive, consequences-negative, alternatives-considered, status, follow-ups. Use 'quote' layout for the decision sentence and 'two-cols' for consequences. Save to adr-0023.md.

What slides.md looks like

---
theme: default
title: ADR-0023 - Postgres vs DynamoDB
---

# ADR-0023

Primary store for the user-events service

---
layout: quote
---

> We will use Postgres with logical partitioning.
> Status: ACCEPTED. 2026-04-15.

---
layout: two-cols
---

# Positive

- Joins on user_id stay simple
- Existing ops runbook
- Lower fixed cost <500 GB

::right::

# Negative

- Manual sharding past 2 TB
- No native TTL on rows

One-line tweak

If the ADR has more than three alternatives, switch the alternatives slide to 'two-cols-header' with a single header above and the alternatives in a 2-column grid.

04

Sprint review deck (auto-built from Linear/Jira)

Generate the Friday sprint review deck from the actual ticket state, not a hand-curated 'what we did' list.

ForEngineering managers running sprint review every two weeks. Pulls completed/in-progress tickets and renders them as slides without manual copy-paste.

The prompt

Use the slidev skill plus the Linear MCP to build a sprint review deck for cycle 47. Slides: cover, sprint-goal, shipped (one slide per epic, max 5 issues each), in-progress, slipped (with reasons), demo-pointers, metrics (cycle time, throughput), next-sprint-priorities, q-and-a. Use 'section' for dividers and short bullets. Save to sprint-47.md.

What slides.md looks like

---
theme: default
title: Sprint 47 Review
class: text-center
---

# Sprint 47

Apr 14 - Apr 26 - team payments

---
layout: section
---

# Shipped

---

# Epic - Refund flow v2

<v-clicks>

- PAY-1284 partial-refund API
- PAY-1291 admin UI cutover
- PAY-1297 idempotency keys
- PAY-1302 audit log export
</v-clicks>

<!-- Pull these from Linear cycle 47, status: Done -->

One-line tweak

Add a 'layout: fact' slide between sections with the cycle's headline number ('14 issues shipped' / '92% on-time') for the leads-and-up audience.

05

Workshop deck (multi-section, code blocks, live demos)

A 60-minute workshop deck with proper section dividers, runnable code, and a hands-on exercise block - the format that actually teaches.

ForDevRel, conference workshop hosts, internal trainers running a 60-90 minute hands-on session.

The prompt

Use the slidev skill to build a 25-slide workshop deck on 'Async Rust for backend devs'. Use 4 'section' layouts as chapter dividers: setup, ownership, futures, exercise. Include 3 Monaco-runnable code blocks ({monaco-run}) and one v-clicks code-walkthrough where lines reveal in order. End with 'layout: end'. Save to workshop-async-rust.md.

What slides.md looks like

---
theme: seriph
title: Async Rust for Backend Devs
highlighter: shiki
transition: slide-left
---

# Async Rust

A 60-minute hands-on workshop

---
layout: section
---

# 3. Futures

---

# A future is a state machine

```rust {monaco-run}
async fn fetch_user(id: u64) -> Result<User, Error> {
    let row = sqlx::query!("SELECT * FROM users WHERE id = $1", id)
        .fetch_one(&pool)
        .await?;
    Ok(row.into())
}
```

<!-- Click 'Run' to see the desugared poll() output -->

One-line tweak

Replace {monaco-run} with {monaco} if you want the editor live but don't want the runtime - faster on stage, fewer surprises if Wi-Fi is shaky.

06

Conference talk deck

A 25-minute conference talk deck with cover, section dividers, story arc, two big quote slides, and a clean 'thank you' end.

ForConference speakers writing their first or 50th talk. The format Anthony Fu, Evan You, and most JSConf/ViteConf speakers actually use.

The prompt

Use the slidev skill to author a 22-slide conference talk: 'Why your build is 12x slower than it needs to be'. Structure: cover, hook (a single number), 3 'section' dividers, 4 code-comparison slides ({2,4-6} highlighting), 2 'quote' slides for the takeaway lines, mid-talk demo placeholder, 'fact' slide with the punchline, end. Save to talk-build-perf.md.

What slides.md looks like

---
theme: seriph
title: Why Your Build Is 12x Slower
class: text-center
background: https://cover.sli.dev
---

# Why Your Build Is 12x Slower

Anthony Tran  -  ViteConf 2026

---
layout: fact
---

# 47 seconds

what we cut from cold start

---
layout: quote
---

> "Bundlers don't make builds slow.
> Imports do."

---

```ts {2,4-6}
import { z } from 'zod'
import * as utils from './utils'   // 800 named exports
import { fetcher } from '@/lib/api'
import * as date from './date'      // 1400 LOC barrel
import * as fmt from './format'
import { Modal } from '@/ui/modal'
```

One-line tweak

If the venue projector is dim, swap 'theme: seriph' for 'theme: default' (lighter background) or add a 'class: !bg-black' to the cover slide.

07

Internal tech-talk lunchtime deck

A 20-minute, 12-slide lunchtime tech talk - low ceremony, lots of code, one v-clicks reveal, no 'thank you' slide because it's lunch.

ForEngineers running internal lunch-and-learns. The audience is friendly and tolerant; the deck should not feel like a conference talk.

The prompt

Use the slidev skill to draft a 12-slide internal tech talk: 'How our feature flag service handles 800k QPS'. Tone: casual. 1 cover, 1 'fact' slide for the QPS number, 4 architecture slides (with two-cols: claim on left, code on right), 2 v-clicks gotcha slides, 1 numbers slide, 3 'what we'd do differently' slides. No formal end. Save to lunch-flags.md.

What slides.md looks like

---
theme: default
title: 800k QPS Feature Flags
---

# 800k QPS feature flags

How the flagsd service holds up - 12 slides, lunch ends in 25 min

---
layout: fact
---

# 800,000 / sec

p99 read latency: 0.4 ms

---
layout: two-cols
---

# Claim

The hot path never hits Redis.

::right::

# Code

```go {3,5}
func (s *Server) Eval(ctx context.Context, key string) bool {
    if v, ok := s.local.Load(key); ok {
        return v.(bool)            // 99.97% of calls land here
    }
    return s.fetchAndCache(ctx, key)
}
```

One-line tweak

Drop the cover-slide subtitle if the room is small - just the title looks more conversational. Keep the 'fact' slide; it always lands.

08

Product launch deck

A 10-slide launch readout for the day a feature ships - what it is, who asked, what it costs, the demo, the 30-day ask.

ForPMs and engineering leads doing a launch readout to a wider org (eng + design + sales + support). 10 minutes max, screenshot-heavy.

The prompt

Use the slidev skill to write a 10-slide launch deck for 'Workspace Search v2'. Slides: cover, the-tweet (one-sentence promise on a 'fact' layout), problem, what-shipped, demo-placeholder (image-right layout), metrics-we-track, 30-day-targets, who-helped, what-we-killed, what's-next. Save to launch-search-v2.md.

What slides.md looks like

---
theme: default
title: Workspace Search v2 - Launch
class: text-center
---

# Workspace Search v2

Shipped 2026-04-29 - 10-slide launch readout

---
layout: fact
---

# Find anything in 80 ms

across docs, threads, tickets

---
layout: image-right
image: /screenshots/search-v2-hero.png
---

# What it does

<v-clicks>

- Unified index across 6 sources
- Ranks by recency + your graph
- Keyboard-first, mouse optional
- Free for all paid plans
</v-clicks>

One-line tweak

Replace 'image-right' with 'image-left' if your screenshot reads right-to-left (e.g. a sidebar mockup). Drop /public/screenshots/*.png next to slides.md and Slidev serves them at /.

09

Onboarding deck for new hires

A 30-slide onboarding deck for week-1 engineers: orientation + system map + 'how we work' + first-week checklist.

ForEng managers and DevRel running new-hire onboarding. Same deck used 6-12 times a year - it should live in the repo and update like code.

The prompt

Use the slidev skill to build a 30-slide onboarding deck for new backend hires. Sections (each behind a 'section' layout): orientation, system-map, codebase-tour, how-we-ship, first-week-checklist, mentors-and-channels. Embed the system architecture as a Mermaid diagram. Add presenter notes on every slide. Save to onboarding-backend.md.

What slides.md looks like

---
theme: default
title: Backend Onboarding - Week 1
---

# Welcome to the backend team

Week 1 - 30 slides - your mentor walks you through this on day 2

<!-- Hand the laptop to the new hire after slide 5; they drive the rest. -->

---
layout: section
---

# 2. System map

---

# How requests flow

```mermaid
sequenceDiagram
    Client->>Edge: POST /checkout
    Edge->>API: forward
    API->>Postgres: write order
    API->>Queue: emit order.created
    Queue->>Worker: charge card
```

<!-- Spend 4 min here. Most new hires confuse Edge with API on day 2. -->

One-line tweak

Slidev presenter notes are HTML comments at the end of each slide; they show in 'slidev presenter' mode. Keep them under 2 sentences each so the screen doesn't blow up.

10

Pitch deck for an internal tool

A 14-slide pitch deck for an internal tool - written for the funding committee that decides whether the tool gets a team next quarter.

ForEng leads pitching a platform investment to internal stakeholders. Less polished than a VC deck, more rigorous than a tech talk.

The prompt

Use the slidev skill to write a 14-slide internal pitch deck for 'devbox' - a self-hosted dev environment service. Slides: cover, the-ask (1 sentence on 'fact' layout), today's-pain (with metrics), proposed-solution, demo, before/after numbers, cost-breakdown (table), team-needed, milestones (3-month, 6-month), risks, asks-of-this-room, FAQ, end. Save to pitch-devbox.md.

What slides.md looks like

---
theme: default
title: devbox - Internal Pitch
class: text-center
---

# devbox

A self-hosted dev environment service - 14-slide pitch

---
layout: fact
---

# 2 engineers, 1 quarter

what we need to ship the MVP

---

# Cost breakdown

| Item             | Year 1   | Year 2   |
|------------------|----------|----------|
| 2 engineers      | $480k    | $520k    |
| AWS (EC2 + EBS)  | $84k     | $140k    |
| Total            | $564k    | $660k    |

<v-click>

Net savings vs status-quo: **$1.1M / year** at 200 active devs.

</v-click>

One-line tweak

Wrap the 'risks' slide in 'layout: two-cols' if you want 'risk' and 'mitigation' side by side. Use Slidev's table support (plain Markdown pipes) - it renders cleanly in PDF export.

Community signal

Three voices from people using Slidev for real work. The first is the clearest comparative endorsement; the second is the daily-use story; the third is the failure mode every LLM author hits.

For the first time, I cannot wait to do a slideshow presentation!

privatenumber · Hacker News

Top-rated reaction on the Slidev launch HN thread. Captures the exact mood the cookbook is trying to bottle - a developer surprised by enjoying slide work.

Source
I never thought I'd say this, I don't think I'll be making my presentation slides any other way again.

Mahnoor Faisal, XDA Developers · Blog

Mainstream-press review of authoring slides via an AI agent (the article uses Anthropic's Frontend Slides skill, an adjacent skill in the same category). Quoted here because it captures the same conviction shift that landing on a Slidev cookbook produces — code-first slide authoring beats the WYSIWYG flow.

Source
Missing from markdown/web based slides is a way to auto resize text content to fit on a page, like powerpoint does ... slidevjs won't do it either.

edp · Hacker News

The single failure mode every LLM author hits - bullets overflow the 1920x1080 canvas. The cookbook prompts cap bullets and headings to dodge this.

Source

The contrarian take

Not everyone keeps Slidev. The most honest critique on the launch threads is from Roland Huss (rhuss/cc-slidev README):

Generic presentation tools fail developers because: PowerPoint/Keynote: Not code-friendly, hard to version control; Google Slides: No local workflow, limited code support; Raw Slidev: Powerful but no guardrails against bad design.

Roland Huss (rhuss/cc-slidev README) · Blog

From the HN launch thread.

Source

Fair. The moment you stop reaching for built-in layouts and start authoring custom slide chrome, you’re writing CSS, not Markdown. The cookbook above leans hard on the built-in layouts (cover, section, two-cols, two-cols-header, quote, statement, fact, intro, end) and on MDC attribute syntax for one-off tweaks — so you stay in Markdown for >90% of the deck. If you want to author every pixel from scratch, Reveal.js is the more honest pick.

One more alternative worth naming: there is a community Slidev MCP server (raykuonz/slidev-mcp-server) that wraps Slidev as MCP tools. The trade-off is the usual skill-vs-MCP one: the skill is ~100 idle tokens, the MCP’s tool schemas load every turn. Pick the MCP only when multiple AI clients need to render decks against a shared instance — otherwise stick with the skill in this cookbook.

Real decks shipped with Slidev

Concrete examples from public talks. None of these used the Claude skill specifically — they’re here to show what production-grade Slidev decks look like, so you have a target shape in mind when you write the prompt.

Gotchas (the four that bite)

Sourced from the Slidev launch threads and the slidevjs/slidev issue tracker.

Text overflows the slide canvas

The 1920x1080 default doesn't auto-fit content. Cap headings at ~60 chars and bullets at ~80 chars; the cookbook prompts already enforce this.

PPTX export is image-based

Slidev's pptx export rasterizes each slide. Colleagues can open the file but can't edit text. Plan for this — if PPTX is the primary delivery format, write the deck differently.

v-clicks order surprises

Putting v-click on individual list items reveals one-by-one; wrapping a list in v-clicks reveals the same list with subtly different keyframe timing. Pick one and stick with it inside a slide.

Custom layouts pull you into Vue + UnoCSS

The moment you go past two-cols-header, you're writing a Vue SFC. The cookbook stays inside built-ins on purpose — leave custom layouts for after the deck is shipped once.

Pairs well with

Curated to match the cookbook’s actual integrations: the presentation-adjacent skills (pptx, frontend-slides, drawio) plus the MCP servers the longer use cases (5, 10) lean on.

Two posts that compose well with this cookbook: What are Claude Code skills? covers the underlying mechanism, and Claude Code best practices covers the orchestration patterns the longer use cases (5, 10) lean on.

Frequently asked questions

Do I need to know Vue or Tailwind to use the Slidev skill?

No for the cookbook prompts in this post — all 10 use the built-in layouts and Slidev's MDC syntax, which is plain Markdown plus a few attributes. You only reach for Vue or UnoCSS classes when you want a custom layout the defaults don't cover.

Can the Slidev skill export to PDF or PowerPoint?

Yes. Slidev itself exports to PDF, PNG, PPTX, and a single-file SPA via 'slidev export'. The skill knows to run the export and report the output path. PPTX export ships as image-based slides, which is by design.

Does the skill render Mermaid diagrams and live-runnable code?

Both. Slidev has first-class Mermaid via fenced code blocks, and Monaco Editor via the {monaco} and {monaco-run} attributes. Use case 6 covers Mermaid; use case 8 covers Monaco.

How do I avoid the 'text overflows the slide' problem when an LLM authors decks?

Cap each slide at six bullets and watch for headings longer than 60 characters — those are the two patterns that overflow Slidev's 1920×1080 canvas. The cookbook prompts already include these constraints. Spot-check by running 'slidev export' and reviewing the PDF.

Can Claude pull source content from Linear, Jira, or Confluence directly?

Yes if you have the matching MCP server installed. Each use case lists its 'pairs with' — use case 5 leans on the Linear/Jira MCP for tickets, use case 10 uses the Confluence skill to attach the rendered PDF.

What is the difference between using the Slidev skill versus pasting the syntax into a CLAUDE.md?

A skill loads only when triggered (~100 tokens at idle), so it's nearly free. A CLAUDE.md loads on every turn — you'd be paying the Slidev syntax tax even when writing unrelated code. Use the skill if you make decks occasionally; CLAUDE.md only if every project session ships slides.

When should I reach for Reveal.js or Marp instead of the Slidev skill?

Reveal.js if you want to author every pixel from scratch — its API is lower-level than Slidev's layout system. Marp if your audience needs a single-file deck without a Node toolchain. Slidev wins when you want layouts, Mermaid, Monaco, and PDF export out of the box.

Is there a Slidev MCP server I can use instead of the skill?

There is a community Slidev MCP server (raykuonz/slidev-mcp-server) that exposes Slidev rendering as MCP tools. It works, but for most authors the skill is the lighter option: a skill costs ~100 tokens at idle while an MCP server's tool schemas load on every turn. Reach for the MCP only if multiple AI clients need to render Slidev decks against a shared running instance — otherwise the skill is the cheaper composition.

Why is 'slidev' getting impressions on Google but no clicks?

The bare 'slidev' query brings the official sli.dev site as the first result. This blog targets the long-tail variants that map to the use cases ('slidev skill', 'slidev mcp', 'claude slidev', plus all 10 deck types in the cookbook above) — the queries where developers want a how-to, not a homepage.

Sources

Primary

Community

Critical and contrarian

Internal

Keep reading