From snap-skills
Use this skill when the user asks you to create a talk, lecture, seminar, or conference presentation from an existing outline, org-mode note, markdown document, or rough text. Produces a Slidev presentation (markdown + Vue components) with appropriate structure, animations, speaker notes, and layout choices. Do NOT use this for PowerPoint/Keynote files — this skill is Slidev-specific.
How this skill is triggered — by the user, by Claude, or both
Slash command
/snap-skills:create-presentationThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
This skill teaches the agent how to turn a user's rough outline (typically in org-mode, markdown, or plain text) into a polished Slidev presentation with appropriate structure, animations, and speaker notes.
This skill teaches the agent how to turn a user's rough outline (typically in org-mode, markdown, or plain text) into a polished Slidev presentation with appropriate structure, animations, and speaker notes.
Before this skill can produce runnable output, the user must have:
node --version # should be >= 18
npm --version
If missing, install via nvm, fnm, or the system package manager.
Slidev's npm install creates symlinks in node_modules/.bin/. FUSE-based cloud filesystems (OneDrive, Google Drive, Dropbox) often don't support symlinks, causing EPERM: operation not permitted, symlink errors.
Workaround: If the slides need to live on a cloud-synced path (e.g. for backup), keep node_modules separately in /tmp/ or ~/code/ and run slidev from there, pointing at the real slides.md. Specifically:
# Set up node_modules on local filesystem
mkdir -p /tmp/slidev-runtime
cp package.json /tmp/slidev-runtime/
cd /tmp/slidev-runtime && npm install
# Run slidev from there, but the slides.md stays in the real location
cp <real-path>/slides.md /tmp/slidev-runtime/slides.md
cd /tmp/slidev-runtime && npx @slidev/cli slides.md --open
Sync the slides.md back to the real location after each edit.
file:, attachment:, or  references. Follow them and view each image.Create a mental (or explicit) todo list of slides before writing any markdown. For each slide, decide:
Principles:
For existing images (from the outline):
Copy them to public/ in the slidev project folder.
Reference with absolute paths: <img src="/image.png" />
For split reveal animations (showing part of an image first, then expanding), use:
<div class="flex justify-center">
<div class="overflow-hidden rounded shadow transition-all duration-700"
:style="$clicks >= 1 ? 'max-width: 100%' : 'max-width: 30%'">
<img src="/my_figure.png" style="min-width: 900px;" />
</div>
</div>
<div v-click="1" class="hidden" />
For missing diagrams:
mermaid code block.Example: horizontal chain diagram in pure HTML/Tailwind:
<div class="flex items-center justify-center gap-2 mt-12 text-sm">
<div class="flex flex-col items-center">
<div class="px-4 py-2 rounded-lg bg-gray-100 dark:bg-gray-800 font-bold">Item A</div>
<div class="text-xs op-40 mt-1">2024</div>
</div>
<div class="text-gray-300 text-xl">→</div>
<!-- ... more items ... -->
</div>
Use the Slidev syntax:
--- on their own line.--- lines: layout: center, class: text-xl, etc.<!-- notes here -->. The "at the end" part matters — comments elsewhere are ignored.<v-click>...</v-click> or v-click directive on any element.\``python {all|1|2-3|4-5}{lines:true}` — numbers refer to 1-indexed line numbers; pipes separate animation steps.Speaker notes should:
[Click] markers where each step is revealed.Example:
# My Slide
Content here.
<!--
This is where we pivot from the problem statement to the solution. The key point to make is that naive approaches fail because of X — audience members might be tempted to suggest Y, but Y has flaw Z.
[Click to reveal the solution]
And here's where our approach comes in. Emphasize that this is NOT a new technique, but rather a clever composition of existing tools.
-->
Create a minimal slidev project:
// package.json
{
"name": "my-talk",
"private": true,
"scripts": {
"dev": "slidev --open",
"build": "slidev build",
"export": "slidev export"
},
"dependencies": {
"@slidev/cli": "^52.0.0",
"@slidev/theme-default": "latest"
}
}
Then:
npm install
npx @slidev/cli slides.md --open
Verify the build works (slidev build) before handing back to the user.
npx @slidev/cli slides.md --open) so they can see it live. Hot reload is on by default.--- to --- block<img> or generate QR from a URL (e.g., qrserver.com or local CLI){all|1|2-3} pattern| Pitfall | Fix |
|---|---|
| Speaker notes not showing in presenter mode | Notes must be at the END of the slide as an HTML comment |
font-size: Xmm renders text 3.5x too large | In SVG/slidev contexts with viewBox, use px or unitless — never mm |
| Code highlight steps are misaligned after editing code | Recount line numbers (1-indexed) and update `{1 |
| v-click numbering broken after adding elements | v-click indices are global per slide — adding an element shifts subsequent indices; use explicit at="N" to pin |
Theme not found after npm install | @slidev/theme-default must be explicitly in dependencies |
| Slidev dies when backgrounded | Run inside tmux new-session -d -s slidev 'npx @slidev/cli slides.md' instead |
Include:
public/)Leave out (unless requested):
| Symptom | Likely cause | Fix |
|---|---|---|
npm install fails with EPERM: symlink | Filesystem doesn't support symlinks (OneDrive, Drive) | Install in /tmp/ and point at remote slides.md |
| Mermaid diagram not rendering | Unsupported diagram type or syntax error | Test in https://mermaid.live first |
| Images not loading | Wrong path (must be absolute from public/) | Use <img src="/foo.png" />, not ./foo.png |
slidev command not found | Not installed or wrong package | Use npx @slidev/cli (not npx slidev) |
| Hot reload not updating | Slidev was started from cached /tmp copy | Sync your slides.md to the copy, or restart slidev |
pptx or scientific-slides skill.scientific-slides skill.venue-templates or scientific-visualization skill.Provides CDSS development patterns for drug interaction checking, dose validation, clinical scoring (NEWS2, qSOFA), and alert classification integrated into EMR workflows.
npx claudepluginhub snap-stanford/snap-skills --plugin snap-skills