slidev

Generate and present web-based slideshows from Markdown with Vue and Vite.

1|Updated Mar 19, 2026
One-click install
npx skills add https://github.com/Pancake-Q/claude-plugin-frontend --skill slidev-pancake-q
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: slidev
Source: https://github.com/Pancake-Q/claude-plugin-frontend/tree/main/skills/slidev
Command: npx skills add https://github.com/Pancake-Q/claude-plugin-frontend --skill slidev-pancake-q

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires slidev, markdown-it, vue, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill allows users to create professional, interactive presentations using Markdown and Vue components, streamlining the process of designing and delivering slideshows.

Core Features & Use Cases

  • Markdown and Vue Integration: Leverage Markdown syntax and Vue components to build presentations.
  • Code Highlighting and Editor: Include syntax-highlighted code snippets and an interactive Monaco editor for code demonstration.
  • Animations and Transitions: Apply click animations, motion effects, and slide transitions to engage the audience.
  • Use Case: Suppose you are preparing a technical talk. Use this Skill to create slides that showcase your code, include interactive elements, and present a coherent narrative.

Quick Start

Run the 'slidev' command to start a new project and build your presentation using Markdown files.

Frequently Asked Questions about slidev

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create web-based presentations using Markdown?

To create web-based presentations with Markdown, you define slide content and Vue components in Markdown files, which are processed via Vite to generate interactive slideshows. This approach streamlines the process of designing and delivering technical presentations without manual HTML structuring.

Can I use Vue components inside my Markdown slides?

Yes, you can embed Vue components directly inside your Markdown slides. This integration allows you to include interactive elements, apply click animations, and add motion effects to engage your audience during technical workshops or educational material presentations.

Does this slideshow generator support syntax highlighting for code snippets?

Yes, this slideshow generator supports syntax highlighting for code snippets and includes an interactive Monaco editor for code demonstration. This makes it an ideal tool for preparing technical talks where showcasing source code accurately to an audience is required.

What is the best way to build interactive technical presentations for workshops?

The best way to build interactive technical presentations is using a Markdown-based generator that supports Vue components and Vite. This combination allows you to easily weave code highlighting, interactive elements, and coherent narrative transitions into your workshop slides.

Do I need to install specific dependencies to generate web-based slideshows with Markdown?

Yes, you need to install slidev and associated plugins, along with markdown-it and vue dependencies, for full functionality. These packages provide the necessary environment to process your Markdown files and render the animated, web-based slideshows.

How do I start a new project to build presentations with Markdown and Vue?

To start a new project building presentations with Markdown and Vue, run the 'slidev' command. This initializes the project environment, allowing you to immediately begin authoring your slideshow content using Markdown files and Vue components.