Slidev Presentation Tool

Slidev is a presentation tool designed specifically for developers. Key capabilities include:

• Markdown-based: Write content using Markdown syntax.
• Developer-centric: Built-in code highlighting, live coding, and support for LaTeX math equations.
• Interactive: Seamlessly embed Vue components and use UnoCSS for on-demand styling.
• Visual Tools: Support for drawing/annotations, Mermaid diagrams, and Iconify icons.
• Presenter Features: Presenter mode (remote control), built-in recording with camera view, and export options (PDF, PNG, PPTX).
• Extensible: Powered by Vite, allowing the use of Vite plugins, Vue components, and any npm packages.

Slidev uses a convention-over-configuration approach to minimize setup. While all directories are optional, following these patterns allows you to extend Slidev functionality intuitively without manual registration.

Conventional Directory Structure

your-slidev/
  ├── components/       # custom components
  ├── layouts/          # custom layouts
  ├── public/           # static assets
  ├── setup/            # custom setup / hooks
  ├── snippets/         # code snippets
  ├── styles/           # custom style
  ├── index.html        # injections to index.html
  ├── slides.md         # the main slides entry
  └── vite.config.ts    # extending vite config

Slidev is a Markdown-based, web-based presentation tool designed specifically for developers. It allows you to focus on content using an extended Markdown format while leveraging web technologies for high interactivity.

Key Mental Models:

• Markdown-First: Organize slides in a single plain text file, making them compatible with Git and any text editor.
• Progressive Enhancement: Start with simple Markdown and add complexity (Vue components, themes, addons) only when needed.
• Web-Powered: Since it is built on Vite, you can use anything available in a web app (WebGL, API requests, iframes) directly within your slides.
• Developer-Centric: Features first-class support for code snippets via Shiki, live coding with Monaco Editor, and interactive Vue components.

The Slidev skill equips Claude Code with domain-specific knowledge required to generate and manipulate Slidev presentations, including:

• Core Syntax: Markdown syntax, slide separators (---), and frontmatter.
• Animations: Click animations, transitions, and motion effects.
• Code Features: Line highlighting, Monaco editor integration, code groups, and magic-move.
• Diagrams: Support for Mermaid, PlantUML, and LaTeX math.
• Layouts: Built-in layouts, slots, and global layers.
• Presenter Mode: Recording, timers, and remote access.
• Exporting: Capabilities for PDF, PPTX, PNG, and SPA hosting.

To create smooth transitions between different states of a code block, wrap multiple code blocks within a magic-move container using four backticks (md magic-move). Slidev will animate the changes in code structure and content between the blocks.

```ts {*|2|*}
// step 1
const author = reactive({ ... })
```

```ts {*|1-2|3-4|3-4,8}
// step 2
export default { ... }
```

Slidev is highly expressive due to its integration with modern web frameworks:

• Vue Components: You can write and use Vue components directly in your slides to create interactive elements that you can manipulate during a presentation.
• UnoCSS: Slidev comes with UnoCSS out of the box, allowing you to style your slides using atomic CSS.
• Vite-based HMR: Changes made in your editor are updated in the browser instantly via Vite's Hot Module Replacement (HMR).

Slidev processes your presentation file (e.g., slides.md) in three distinct stages:

1. Preparsing: The file is split into individual slides using the --- separator, while also considering frontmatter blocks.
2. Markdown Parsing: Each individual slide is parsed using an external markdown library.
3. Source Resolution: Slidev resolves the special src: .... frontmatter property, which allows you to include content from other .md files.

Note: If you need to customize the markdown parser used in step 2, you must configure the Vite internal plugins.

When you run slidev theme eject, the following changes occur in your project:

1. File Extraction: The theme files are copied from node_modules into a new ./theme/ directory in your project root.
2. Configuration Update: The theme field in your project's frontmatter is automatically updated to point to the local path: theme: ./theme.

Note: If you are creating a derivative theme, it is recommended to credit the original theme and its author.

Slidev uses YAML blocks delimited by --- to configure the presentation and individual slides.

• Headmatter: The very first YAML block in your entry Markdown file (e.g., slides.md). It configures the entire slide deck (e.g., theme, title).
• Frontmatter: YAML blocks placed at the beginning of individual slides. These configure settings specific to that slide (e.g., layout, background, class).

Note: You can also use an external file as a slide by using the src key in the frontmatter.

---
theme: seriph
title: Welcome to Slidev
---

# Slide 1

---

layout: center
background: /background-1.png
class: text-white
---

# Slide 2

---

src: ./pages/4.md
---

# Slide 3