SkillsAdd

smithery.ai

slidev

Create and present web-based slidedecks for developers using Slidev with Markdown, Vue components, code highlighting, animations, and interactive features. Use when building technical presentations, conference talks, code walkthroughs, teaching materials, or developer decks.

First seen Mar 12, 2026

Installation

$ npx skills add https://smithery.ai
View on skills.sh ↗ Website ↗

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

frontend-design Same topic
anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existi…

866.4K installs
agent-browser Same topic
vercel-labs/agent-browser

Browser automation CLI for AI agents. Use when the user needs to interact with websites, includ…

810.4K installs
vercel-react-best-practices Same topic
vercel-labs/agent-skills 697.8K installs
web-design-guidelines Same topic
vercel-labs/agent-skills

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "chec…

617.3K installs
microsoft-foundry Same topic
microsoft/azure-skills

Build, deploy, evaluate, optimize, fine-tune, and manage Microsoft Foundry agents, models, and …

576.5K installs
azure-diagnostics Same topic
microsoft/azure-skills

Debug Azure production issues on Azure using AppLens, Azure Monitor, resource health, and safe …

568.9K installs

Also in this package

Other skills from smithery.ai · top by installs.

npx skills add https://smithery.ai
smithery-ai-cli 7.8K frontend-design 6.2K skill-creator 2.5K ck:ui-ux-pro-max 1.3K pdf 1.2K xlsx 966 pptx 894 docx 884 webapp-testing 1 web-design-reviewer 657

Browse all from smithery.ai

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 8,896 B
  • docs SUMMARY.md 237 B

History

  1. First seen on skills.sh
  2. First recorded snapshot · 33 installs

SKILL.md

Slidev - Presentation Slides for Developers

Web-based slides maker built on Vite, Vue, and Markdown.

When to Use

  • Technical presentations or slidedecks with live code examples
  • Syntax-highlighted code snippets with animations
  • Interactive demos (Monaco editor, runnable code)
  • Mathematical equations (LaTeX) or diagrams (Mermaid, PlantUML)
  • Record presentations with presenter notes
  • Export to PDF, PPTX, or host as SPA
  • Code walkthroughs for developer talks or workshops

Quick Start

pnpm create slidev    # Create project
pnpm run dev          # Start dev server (opens http://localhost:3030)
pnpm run build        # Build static SPA
pnpm run export       # Export to PDF (requires playwright-chromium)

Verify: After pnpm run dev, confirm slides load at http://localhost:3030. After pnpm run export, check the output PDF exists in the project root.

Basic Syntax

---
theme: default
title: My Presentation
---

# First Slide

Content here

---

# Second Slide

More content

<!--
Presenter notes go here
-->
  • --- separates slides
  • First frontmatter = headmatter (deck config)
  • HTML comments = presenter notes

Core References

Topic Description Reference
Markdown Syntax Slide separators, frontmatter, notes, code blocks [core-syntax](references/core-syntax.md)
Animations v-click, v-clicks, motion, transitions [core-animations](references/core-animations.md)
Headmatter Deck-wide configuration options [core-headmatter](references/core-headmatter.md)
Frontmatter Per-slide configuration options [core-frontmatter](references/core-frontmatter.md)
CLI Commands Dev, build, export, theme commands [core-cli](references/core-cli.md)
Components Built-in Vue components [core-components](references/core-components.md)
Layouts Built-in slide layouts [core-layouts](references/core-layouts.md)
Exporting PDF, PPTX, PNG export options [core-exporting](references/core-exporting.md)
Hosting Build and deploy to various platforms [core-hosting](references/core-hosting.md)
Global Context $nav, $slidev, composables API [core-global-context](references/core-global-context.md)

Feature Reference

Code & Editor

Feature Usage Reference
Line highlighting ` `ts {2,3} ` [code-line-highlighting](references/code-line-highlighting.md)
Click-based highlighting ` ``ts {1\ 2-3\ all} `` [code-line-highlighting](references/code-line-highlighting.md)
Line numbers lineNumbers: true or {lines:true} [code-line-numbers](references/code-line-numbers.md)
Scrollable code {maxHeight:'100px'} [code-max-height](references/code-max-height.md)
Code tabs ::code-group (requires comark: true) [code-groups](references/code-groups.md)
Monaco editor ` `ts {monaco} ` [editor-monaco](references/editor-monaco.md)
Run code ` `ts {monaco-run} ` [editor-monaco-run](references/editor-monaco-run.md)
Edit files <<< ./file.ts {monaco-write} [editor-monaco-write](references/editor-monaco-write.md)
Code animations ` ``md magic-move ` [code-magic-move](references/code-magic-move.md)
TypeScript types ` `ts twoslash ` [code-twoslash](references/code-twoslash.md)
Import code <<< @/snippets/file.js [code-import-snippet](references/code-import-snippet.md)

Diagrams & Math

Feature Usage Reference
Mermaid diagrams ` `mermaid ` [diagram-mermaid](references/diagram-mermaid.md)
PlantUML diagrams ` `plantuml ` [diagram-plantuml](references/diagram-plantuml.md)
LaTeX math $inline$ or $$block$$ [diagram-latex](references/diagram-latex.md)

Layout & Styling

Feature Usage Reference
Canvas size canvasWidth, aspectRatio [layout-canvas-size](references/layout-canvas-size.md)
Zoom slide zoom: 0.8 [layout-zoom](references/layout-zoom.md)
Scale elements <Transform :scale="0.5"> [layout-transform](references/layout-transform.md)
Layout slots ::right::, ::default:: [layout-slots](references/layout-slots.md)
Scoped CSS <style> in slide [style-scoped](references/style-scoped.md)
Global layers global-top.vue, global-bottom.vue [layout-global-layers](references/layout-global-layers.md)
Draggable elements v-drag, <v-drag> [layout-draggable](references/layout-draggable.md)
Icons <mdi-icon-name /> [style-icons](references/style-icons.md)

Animation & Interaction

Feature Usage Reference
Click animations v-click, <v-clicks> [core-animations](references/core-animations.md)
Rough markers v-mark.underline, v-mark.circle [animation-rough-marker](references/animation-rough-marker.md)
Drawing mode Press C or config drawings: [animation-drawing](references/animation-drawing.md)
Direction styles forward:delay-300 [style-direction](references/style-direction.md)
Note highlighting [click] in notes [animation-click-marker](references/animation-click-marker.md)

Syntax Extensions

Feature Usage Reference
Comark syntax comark: true + {style="color:red"} [syntax-comark](references/syntax-comark.md)
Block frontmatter ` `yaml instead of ---` [syntax-block-frontmatter](references/syntax-block-frontmatter.md)
Import slides src: ./other.md [syntax-importing-slides](references/syntax-importing-slides.md)
Merge frontmatter Main entry wins [syntax-frontmatter-merging](references/syntax-frontmatter-merging.md)

Presenter & Recording

Feature Usage Reference
Recording Press G for camera [presenter-recording](references/presenter-recording.md)
Timer duration: 30min, timer: countdown [presenter-timer](references/presenter-timer.md)
Remote control slidev --remote [presenter-remote](references/presenter-remote.md)
Ruby text notesAutoRuby: [presenter-notes-ruby](references/presenter-notes-ruby.md)

Export & Build

Feature Usage Reference
Export options slidev export [core-exporting](references/core-exporting.md)
Build & deploy slidev build [core-hosting](references/core-hosting.md)
Build with PDF download: true [build-pdf](references/build-pdf.md)
Cache images Automatic for remote URLs [build-remote-assets](references/build-remote-assets.md)
OG image seoMeta.ogImage or og-image.png [build-og-image](references/build-og-image.md)
SEO tags seoMeta: [build-seo-meta](references/build-seo-meta.md)

Export prerequisite: pnpm add -D playwright-chromium is required for PDF/PPTX/PNG export. If export fails with a browser error, install this dependency first.

Editor & Tools

Feature Usage Reference
Side editor Click edit icon [editor-side](references/editor-side.md)
VS Code extension Install antfu.slidev [editor-vscode](references/editor-vscode.md)
Prettier prettier-plugin-slidev [editor-prettier](references/editor-prettier.md)
Eject theme slidev theme eject [tool-eject-theme](references/tool-eject-theme.md)
MCP server (AI agents) http://localhost:<port>/__mcp or slidev mcp [tool-mcp](references/tool-mcp.md)

Lifecycle & API

Feature Usage Reference
Slide hooks onSlideEnter(), onSlideLeave() [api-slide-hooks](references/api-slide-hooks.md)
Navigation API $nav, useNav() [core-global-context](references/core-global-context.md)

Common Layouts

Layout Purpose
cover Title/cover slide
center Centered content
default Standard slide
two-cols Two columns (use ::right::)
two-cols-header Header + two columns
image / image-left / image-right Image layouts
iframe / iframe-left / iframe-right Embed URLs
quote Quotation
section Section divider
fact / statement Data/statement display
intro / end Intro/end slides

Resources