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.

On this page · 21 sections▾
- What this skill does
- The cookbook
- Install + README
- Watch it built
- 01 · RFC deck (technical proposal)
- 02 · Postmortem deck (timeline + root cause + actions)
- 03 · ADR deck (architecture decision record)
- 04 · Sprint review deck (auto-built from Linear/Jira)
- 05 · Workshop deck (multi-section, code blocks, live demos)
- 06 · Conference talk deck
- 07 · Internal tech-talk lunchtime deck
- 08 · Product launch deck
- 09 · Onboarding deck for new hires
- 10 · Pitch deck for an internal tool
- Community signal
- The contrarian take
- Real decks shipped
- Gotchas
- Pairs well with
- FAQ
- 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 pageInstall
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.zipInstalls 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.
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.
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 lossOne-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.
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 rowsOne-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.
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.
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.
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.
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.
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 /.
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.
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.
“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.
“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.
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.
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.
- Anthony Fu (Slidev author) — talks repository (every Slidev deck Anthony has shipped, including Vue Fes, JSConf, ViteConf)
- Anthony Fu — 'The Vision of Vite' at ViteConf 2022, authored as a Slidev deck
- Anthony Fu — 'Why I Build Open Source in My Free Time' at GOSIM 2024 (Slidev source)
- Slidev official slides — Anthony's own pitch deck used in the launch HN demo
- Vue Fes Japan 2022 talks — multiple speakers shipped Slidev decks (search 'slidev' under VueFes 2022 talk repos)
- Public Slidev decks tagged on GitHub (1,400+ repos using the slidev topic) — https://github.com/topics/slidev
- Hong Minhee — engineering talks deck repository, all authored in Slidev
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.
Related skills
Related MCP servers
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
- XIYO Slidev SKILL.md (the skill manifest)
- Slidev official documentation
- Slidev built-in layouts reference
- Slidev Mermaid diagrams
- Slidev Monaco editor (live code)
Community
- privatenumber — Hacker News
- Mahnoor Faisal, XDA Developers — Blog
- edp — Hacker News
- Anthony Fu (@antfu7) — X / Twitter
- azalemeth — Hacker News
- pkgpulse 2026 comparison — Blog
Critical and contrarian
Internal