agentleFS
Sign inStart free
GPTtangGPTtang/skill-atlas/skills/document/slidev/SKILL.md

slidev

Skill4 starsChanged 7 months agoMITView on GitHub

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

Create a free account to mount
Files
SKILL.md

Slidev - Presentation Slides for Developers

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

When to Use

  • Technical presentations 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

Quick Start

pnpm create slidev    # Create project
pnpm run dev          # Start dev server
pnpm run export       # Export to PDF

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

TopicDescriptionReference
Markdown SyntaxSlide separators, frontmatter, notes, code blockscore-syntax
Animationsv-click, v-clicks, motion, transitionscore-animations
HeadmatterDeck-wide configuration optionscore-headmatter
FrontmatterPer-slide configuration optionscore-frontmatter
CLI CommandsDev, build, export, theme commandscore-cli
ComponentsBuilt-in Vue componentscore-components
LayoutsBuilt-in slide layoutscore-layouts
ExportingPDF, PPTX, PNG export optionscore-exporting
HostingBuild and deploy to various platformscore-hosting
Global Context$nav, $slidev, composables APIcore-global-context

Feature Reference

Code & Editor

FeatureUsageReference
Line highlighting```ts {2,3}code-line-highlighting
Click-based highlighting```ts {1|2-3|all}code-line-highlighting
Line numberslineNumbers: true or {lines:true}code-line-numbers
Scrollable code{maxHeight:'100px'}code-max-height
Code tabs::code-group (requires mdc: true)code-groups
Monaco editor```ts {monaco}editor-monaco
Run code```ts {monaco-run}editor-monaco-run
Edit files<<< ./file.ts {monaco-write}editor-monaco-write
Code animations````md magic-movecode-magic-move
TypeScript types```ts twoslashcode-twoslash
Import code<<< @/snippets/file.jscode-import-snippet

Diagrams & Math

FeatureUsageReference
Mermaid diagrams```mermaiddiagram-mermaid
PlantUML diagrams```plantumldiagram-plantuml
LaTeX math$inline$ or $$block$$diagram-latex

Layout & Styling

FeatureUsageReference
Canvas sizecanvasWidth, aspectRatiolayout-canvas-size
Zoom slidezoom: 0.8layout-zoom
Scale elements<Transform :scale="0.5">layout-transform
Layout slots::right::, ::default::layout-slots
Scoped CSS<style> in slidestyle-scoped
Global layersglobal-top.vue, global-bottom.vuelayout-global-layers
Draggable elementsv-drag, <v-drag>layout-draggable
Icons<mdi-icon-name />style-icons

Animation & Interaction

FeatureUsageReference
Click animationsv-click, <v-clicks>core-animations
Rough markersv-mark.underline, v-mark.circleanimation-rough-marker
Drawing modePress C or config drawings:animation-drawing
Direction stylesforward:delay-300style-direction
Note highlighting[click] in notesanimation-click-marker

Syntax Extensions

FeatureUsageReference
MDC syntaxmdc: true + {style="color:red"}syntax-mdc
Block frontmatter```yaml instead of ---syntax-block-frontmatter
Import slidessrc: ./other.mdsyntax-importing-slides
Merge frontmatterMain entry winssyntax-frontmatter-merging

Presenter & Recording

FeatureUsageReference
RecordingPress G for camerapresenter-recording
Timerduration: 30min, timer: countdownpresenter-timer
Remote controlslidev --remotepresenter-remote
Ruby textnotesAutoRuby:presenter-notes-ruby

Export & Build

FeatureUsageReference
Export optionsslidev exportcore-exporting
Build & deployslidev buildcore-hosting
Build with PDFdownload: truebuild-pdf
Cache imagesAutomatic for remote URLsbuild-remote-assets
OG imageseoMeta.ogImage or og-image.pngbuild-og-image
SEO tagsseoMeta:build-seo-meta

Editor & Tools

FeatureUsageReference
Side editorClick edit iconeditor-side
VS Code extensionInstall antfu.slideveditor-vscode
Prettierprettier-plugin-slideveditor-prettier
Eject themeslidev theme ejecttool-eject-theme

Lifecycle & API

FeatureUsageReference
Slide hooksonSlideEnter(), onSlideLeave()api-slide-hooks
Navigation API$nav, useNav()core-global-context

Common Layouts

LayoutPurpose
coverTitle/cover slide
centerCentered content
defaultStandard slide
two-colsTwo columns (use ::right::)
two-cols-headerHeader + two columns
image / image-left / image-rightImage layouts
iframe / iframe-left / iframe-rightEmbed URLs
quoteQuotation
sectionSection divider
fact / statementData/statement display
intro / endIntro/end slides

Resources

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

Reviews can't be read right now.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free