slidev

slidevjs/slidev · Agent Skill

Crea diapositive per gli sviluppatori con Slidev, utilizzando Markdown, componenti Vue, evidenziazione del codice e animazioni.

Vai all'installazione ↓

Panoramica

Autore	slidevjsOrganizzazione
Repository	slidevjs/slidev ↗
Cartella dello skill	`slidev`
Stelle	49.230
Fork	2248
File inclusi	55
Licenza	MIT
Aggiornato	23 ottobre 2026
Link	Sorgente dello skill ↗ · Repository ↗

Verifica Mozgi

Cosa abbiamo trovato nei file dello skill. I dettagli con l’abbonamento.

Sicurezza

rischio basso · nessun rischio evidente — il report completo mostra i dettagli

Compatibilità

solo istruzioni — funziona con la maggior parte degli agenti

Skill simili

72 skill simili trovati

Inoltre con l’abbonamento

Installazione

Uno skill è una cartella con un file SKILL.md. Scegli il tuo agente ed esegui i comandi in un terminale (macOS, Linux o Git Bash su Windows) dalla radice del progetto.

Incolla il prompt in Claude, Codex o un altro assistente: controllerà lo skill e lo installerà.

Install the “slidev” skill from mozgi.io (https://mozgi.io/skills/antfu-slidev/) for me.

1. Download the archive: https://mozgi.io/skills/antfu-slidev/download
   If it fails, take the skill folder from the source: https://github.com/slidevjs/slidev/tree/main/skills/slidev
2. Read SKILL.md and the other files. Check the skill is safe: no hidden commands, no sending data elsewhere, no scripts doing something other than described. If anything looks suspicious, stop and tell me.
3. Put the “slidev” folder into your agent's skills folder: .claude/skills/ for Claude Code, .agents/skills/ for Codex, .cursor/skills/ for Cursor, .gemini/skills/ for Gemini CLI. Inside the project if we are in one, otherwise in the home folder (~/.claude/skills/ etc.).
4. Make sure <skills folder>/slidev/SKILL.md exists.
5. Briefly tell me what this skill does and offer to try it on my task.

If you cannot do a step yourself, tell me what to click or type.

git clone --depth 1 --branch main https://github.com/slidevjs/slidev.git /tmp/slidev
mkdir -p .claude/skills
cp -r /tmp/slidev/skills/slidev .claude/skills/slidev

Riavvia Claude Code: lo skill compare nell'elenco; per richiamarlo a mano usa /slidev. Per tutti i progetti: ~/.claude/skills.

git clone --depth 1 --branch main https://github.com/slidevjs/slidev.git /tmp/slidev
mkdir -p .agents/skills
cp -r /tmp/slidev/skills/slidev .agents/skills/slidev

Codex cerca gli skill in .agents/skills dalla cartella corrente fino alla radice del repo; richiamalo con /skills o $slidev. Per tutti i progetti: ~/.agents/skills.

git clone --depth 1 --branch main https://github.com/slidevjs/slidev.git /tmp/slidev
mkdir -p .cursor/skills
cp -r /tmp/slidev/skills/slidev .cursor/skills/slidev

Cursor carica lo skill all'avvio; richiamalo con “/” nella chat Agent. Cursor legge anche .claude/skills e .agents/skills. Per tutti i progetti: ~/.cursor/skills.

git clone --depth 1 --branch main https://github.com/slidevjs/slidev.git /tmp/slidev
mkdir -p .gemini/skills
cp -r /tmp/slidev/skills/slidev .gemini/skills/slidev

Gemini CLI propone di attivare lo skill quando il compito corrisponde: tu confermi. Per tutti i progetti: ~/.gemini/skills.

File dello skill

55 file Scarica ZIP

Leggi SKILL.md e i file correlati prima di installare. Clicca un file per l'anteprima.

Contenuto di SKILL.md

Testo originale dell'autore · sola lettura

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 ↗ |

| Animations | v-click, v-clicks, motion, transitions | core-animations ↗ |

| Headmatter | Deck-wide configuration options | core-headmatter ↗ |

| Frontmatter | Per-slide configuration options | core-frontmatter ↗ |

| CLI Commands | Dev, build, export, theme commands | core-cli ↗ |

| Components | Built-in Vue components | core-components ↗ |

| Layouts | Built-in slide layouts | core-layouts ↗ |

| Exporting | PDF, PPTX, PNG export options | core-exporting ↗ |

| Hosting | Build and deploy to various platforms | core-hosting ↗ |

| Global Context | $nav, $slidev, composables API | core-global-context ↗ |

Feature Reference

Code & Editor

| Feature | Usage | Reference |

|---------|-------|-----------|

| Line highlighting | ` `ts {2,3} ` | code-line-highlighting ↗ |

| Click-based highlighting | ` `ts {1\|2-3\|all} ` | code-line-highlighting ↗ |

| Line numbers | lineNumbers: true or {lines:true} | code-line-numbers ↗ |

| Scrollable code | {maxHeight:'100px'} | code-max-height ↗ |

| Code tabs | ::code-group (requires comark: 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-move ` | code-magic-move ↗ |

| TypeScript types | ` `ts twoslash ` | code-twoslash ↗ |

| Import code | <<< @/snippets/file.js | code-import-snippet ↗ |

Diagrams & Math

| Feature | Usage | Reference |

|---------|-------|-----------|

| Mermaid diagrams | ` `mermaid ` | diagram-mermaid ↗ |

| PlantUML diagrams | ` `plantuml ` | diagram-plantuml ↗ |

| LaTeX math | $inline$ or $$block$$ | diagram-latex ↗ |

Layout & Styling

| Feature | Usage | Reference |

|---------|-------|-----------|

| Canvas size | canvasWidth, aspectRatio | layout-canvas-size ↗ |

| Zoom slide | zoom: 0.8 | layout-zoom ↗ |

| Scale elements | <Transform :scale="0.5"> | layout-transform ↗ |

| Layout slots | ::right::, ::default:: | layout-slots ↗ |

| Scoped CSS | <style> in slide | style-scoped ↗ |

| Global layers | global-top.vue, global-bottom.vue | layout-global-layers ↗ |

| Draggable elements | v-drag, <v-drag> | layout-draggable ↗ |

| Icons | <mdi-icon-name /> | style-icons ↗ |

Animation & Interaction

| Feature | Usage | Reference |

|---------|-------|-----------|

| Click animations | v-click, <v-clicks> | core-animations ↗ |

| Rough markers | v-mark.underline, v-mark.circle | animation-rough-marker ↗ |

| Drawing mode | Press C or config drawings: | animation-drawing ↗ |

| Direction styles | forward:delay-300 | style-direction ↗ |

| Note highlighting | [click] in notes | animation-click-marker ↗ |

Syntax Extensions

| Feature | Usage | Reference |

|---------|-------|-----------|

| Comark syntax | comark: true + {style="color:red"} | syntax-comark ↗ |

| Block frontmatter | ` `yaml instead of ---` | syntax-block-frontmatter ↗ |

| Import slides | src: ./other.md | syntax-importing-slides ↗ |

| Merge frontmatter | Main entry wins | syntax-frontmatter-merging ↗ |

Presenter & Recording

| Feature | Usage | Reference |

|---------|-------|-----------|

| Recording | Press G for camera | presenter-recording ↗ |

| Timer | duration: 30min, timer: countdown | presenter-timer ↗ |

| Remote control | slidev --remote | presenter-remote ↗ |

| Ruby text | notesAutoRuby: | presenter-notes-ruby ↗ |

Export & Build

| Feature | Usage | Reference |

|---------|-------|-----------|

| Export options | slidev export | core-exporting ↗ |

| Build & deploy | slidev build | core-hosting ↗ |

| Build with PDF | download: true | build-pdf ↗ |

| Cache images | Automatic for remote URLs | build-remote-assets ↗ |

| OG image | seoMeta.ogImage or og-image.png | build-og-image ↗ |

| SEO tags | seoMeta: | build-seo-meta ↗ |

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 ↗ |

| VS Code extension | Install antfu.slidev | editor-vscode ↗ |

| Prettier | prettier-plugin-slidev | editor-prettier ↗ |

| Eject theme | slidev theme eject | tool-eject-theme ↗ |

| MCP server (AI agents) | http://localhost:<port>/__mcp or slidev mcp | tool-mcp ↗ |

Lifecycle & API

| Feature | Usage | Reference |

|---------|-------|-----------|

| Slide hooks | onSlideEnter(), onSlideLeave() | api-slide-hooks ↗ |

| Navigation API | $nav, useNav() | core-global-context ↗ |

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

Documentation: https://sli.dev
Theme Gallery: https://sli.dev/resources/theme-gallery
Showcases: https://sli.dev/resources/showcases

Domande frequenti

Che cosa fa lo skill slidev?

Crea diapositive per gli sviluppatori con Slidev, utilizzando Markdown, componenti Vue, evidenziazione del codice e animazioni.

Come si installa slidev?

Apri il blocco “Installazione” in questa pagina e scegli il tuo agente — Claude Code, Codex, Cursor o Gemini CLI — per i comandi pronti che copiano la cartella dello skill nel posto giusto. Oppure copia il prompt dalla scheda “Con l'assistente” e lascia che sia l'assistente a controllare e installare lo skill.

Con quali modelli AI funziona slidev?

Gli skill sono semplici istruzioni in Markdown (formato Agent Skills), quindi slidev funziona con qualsiasi agente che legge SKILL.md: Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode e altri. Il modello carica le istruzioni solo quando il compito corrisponde alla descrizione dello skill.

slidev è gratuito?

Lo skill è pubblicato apertamente da slidevjs con licenza MIT. Lo skill in sé non costa nulla: paghi solo il tuo fornitore AI per i token usati.

È sicuro installare gli skill?

Uno skill è un insieme di istruzioni che il tuo agente seguirà: leggi SKILL.md e i file correlati prima di installarlo. Gli script nella cartella dello skill vengono eseguiti solo se li esegue l'agente: controlla cosa fa e non concedere permessi superflui.

In cosa differisce uno skill da un server MCP o da un plugin?

Un server MCP o un plugin danno al modello nuovi strumenti: codice che viene eseguito e restituisce un risultato. Uno skill fornisce conoscenza e metodo: come affrontare il compito, quali passi seguire e com'è un buon risultato. Non servono server né chiavi API.

Skill correlati

Tutti gli skill →

remotion-video-creation Fornisce 29 regole per la creazione di video in React utilizzando Remotion, coprendo 3D, animazione, audio e didascalie. affaan-m258k

videodb Elabora video e audio: acquisisce, indicizza, cerca, modifica, transcodifica, genera media e crea avvisi. affaan-m258k

ui-demo Crea video demo professionali dell'interfaccia utente per applicazioni web utilizzando Playwright, inclusi cursore e ritmo naturale. affaan-m258k

taste Crea una direzione creativa per video musicali e montaggi brevi in stile angelcore, cloud-trance, hyperpop, sincronizzando le immagini con la musica. affaan-m258k

fal-ai-media Genera immagini, video e audio utilizzando i modelli fal.ai, inclusi text-to-image, text-to-video e text-to-speech. affaan-m258k

tasteforge-video Crea e gestisce flussi di lavoro per video, immagini e asset 3D, inclusa l'analisi dello stile, la validazione e l'esportazione della timeline. affaan-m258k