slidevdi Slidev

Slidev Skill.

Uno skill per Claude Code e Codex dedicato a PPT e presentazioni: presentazioni per sviluppatori con Markdown, componenti Vue, evidenziazione del codice e animazioni.

Presentations
Slide HTML

Scarica OpenDesign Guida all'uso

slidevjs/slidev · skills/slidev/SKILL.mdSKILL.md

--- name: slidev description: 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. --- ## When to Use ## Quick Start ## Basic Syntax ## Common Layouts

Front matter e intestazioni di sezione letti dal file upstream il 14 settembre 2026 · 8.896 caratteri in totale

01 Cosa fa

Cosa fa lo Skill slidev in Claude Code e Codex

Sintesi, workflow e output, tutto letto dal SKILL.md della skill.

Dal SKILL.mdLetto il 14-09-2026 · non è un'esecuzione registrata

Nelle parole della skill

Slidev è uno strumento web per creare presentazioni per sviluppatori, basato su Vite, Vue e Markdown. Crea presentazioni tecniche con snippet di codice con syntax highlighting, esempi di codice live tramite l'editor Monaco, demo interattive, equazioni LaTeX e diagrammi Mermaid o PlantUML. Le slide sono scritte in Markdown con separatori ---, il primo frontmatter come headmatter per la configurazione del deck, e commenti HTML per le note del relatore.

Supporta animazioni basate su click (v-click, magic-move), evidenziazione delle righe, tab di codice, registrazione con webcam, controllo remoto e timer. L'esportazione in PDF o PPTX richiede playwright-chromium. I comandi di build includono pnpm run dev per l'anteprima locale su localhost:3030, pnpm run export per il PDF e pnpm run build per il deployment come SPA statica.

Che cosa produce

Esportazione PDF della presentazione

Vedi l'esempio di prompt ↗

Come funziona

01
Inizializzare il Progetto
Esegua pnpm create slidev per creare la struttura di un nuovo progetto di presentazione Slidev.
02
Scrivere le Slide in Markdown
Separi le slide con ---, configuri le impostazioni del deck nel primo blocco frontmatter e aggiunga le note del relatore nei commenti HTML.
03
Avviare il Server di Sviluppo
Esegua pnpm run dev per avviare il server locale e aprire la presentazione su http://localhost:3030.
04
Esportare o Compilare
Usi pnpm run export per l'output PDF oppure pnpm run build per creare una SPA statica da pubblicare.

02 Trova la tua applicazione

Quando usare la Skill slidev

Usa la skill slidev in Claude Code o Codex quando il lavoro riguarda presentazioni PPT e slide deck di questo tipo. Idoneità e limiti seguenti sono presi dal file della skill stessa.

Buona applicazione

Presentazioni tecniche o slideshow con esempi di codice dal vivo
Frammenti di codice con evidenziazione della sintassi e animazioni
Demo interattive tramite l'editor Monaco o codice eseguibile
Equazioni matematiche con LaTeX o diagrammi con Mermaid e PlantUML
Percorsi guidati nel codice per talk o workshop per sviluppatori

Conosci i limiti

Richiede SlidevIl file SKILL.md indica questa dipendenza; la skill non funziona senza di essa nel tuo progetto.

Cosa fornire

Snippet di codiceFile di codice esterni importati con la sintassi <<< @/snippets/file.js per la visualizzazione nelle slide.

03 Dentro la skill

Regole che lo skill slidev fornisce a Claude Code e Codex

5 istruzioni concrete, valori predefiniti e limiti che SKILL.md imposta per l'agente — la parte del file che cambia il risultato.

L'Headmatter È il Primo Frontmatter
Il primo blocco frontmatter nel file configura le impostazioni a livello di deck, non le impostazioni delle singole slide.
Note del Relatore nei Commenti HTML
Scriva le note del relatore all'interno di blocchi di commento HTML in ciascuna slide. Non appariranno sulla slide stessa.
playwright-chromium Richiesto per l'Esportazione
Installi pnpm add -D playwright-chromium prima di eseguire i comandi di esportazione. Se l'esportazione fallisce con un errore relativo al browser, significa che questa dipendenza manca.
L'Entry Principale Prevale nella Fusione
Quando si importano slide con src, il frontmatter del file di entry principale ha la precedenza sul frontmatter dei file importati.
Comark Abilita una Sintassi Avanzata
Impostare comark: true nell'headmatter per abilitare i code group e gli attributi di stile inline come {style="color:red"}.

04 Mettila al lavoro

Installa slidev in Claude Code o Codex

Un comando npx skills add, poi un primo task nel tuo agente e una checklist per il risultato.

Aggiungi slidev a Claude Code, Codex o al tuo agente

Eseguitelo nel Suo progetto; l'installer chiede a quale agente aggiungerlo.

Terminal

npx skills add https://github.com/slidevjs/slidev --skill slidev

Forma generica del CLI skills per skills/slidev/SKILL.md; il repository può documentare un proprio percorso.

Assegna allo skill un primo compito PPT e presentazioni

Redatto nei termini propri della skill; sostituisca le parti tra parentesi con il suo materiale.

Starter prompt

Create a technical presentation for a React workshop with three sections: component lifecycle, hooks deep-dive, and performance optimization. Include live Monaco editor demos showing useState and useEffect patterns, syntax-highlighted TypeScript code with click-based line reveals for the reconciliation algorithm explanation, a Mermaid diagram of the component tree, and a two-column layout comparing class components and functional components. Add presenter notes with timing estimates for each section and configure a 45-minute countdown timer.

Fonte: redatto a partire dal SKILL.md, nei termini propri della skill.

Verifica il primo risultato

Ciò che il SKILL.md stesso indica come risultato corretto:

Dopo aver eseguito pnpm run dev, verificare che le slide si carichino su http://localhost:3030
Dopo aver eseguito pnpm run export, verificare che il PDF di output esista nella directory principale del progetto
Se l'esportazione fallisce con un errore del browser, installare prima la dipendenza playwright-chromium
Testare le animazioni basate su click avanzando tra le slide per assicurarsi che gli elementi v-click appaiano in sequenza

In OpenDesign importare slidev dal suo link SKILL.md: Plugins → Add → Skill → Import from link, quindi selezionarlo nella barra superiore.

Scarica OpenDesign Leggi il quickstart

05 Open source, tracciabile

Sorgente, licenza e verifica

Da dove provengono i dati di questa pagina e quando sono stati verificati l'ultima volta.

Author: Slidev
Repository: github.com/slidevjs/slidev Branch main
File della skill: skills/slidev/SKILL.md Checksum del contenuto registrato alla verifica; commit a8d8ff7
License: MIT Da LICENSE.
Stelle del repository: 48.658 Snapshot GitHub acquisita il 14/09/2026 per l'intero repository slidevjs/slidev. Non è un conteggio di utilizzo o una valutazione per slidev.
Verificato da OpenDesign: 14/09/2026 File sorgente, percorso, testo della licenza e conteggio delle stelle sono stati verificati. Non inclusa in OpenDesign main (verificato il 28/08/2026); un'esecuzione live non è stata registrata in questa pagina.

All'interno di SKILL.md

Quando UsarloElenca i casi d'uso: presentazioni tecniche, snippet di codice, demo interattive, equazioni, diagrammi, registrazione, formati di esportazione
Avvio RapidoComandi per creare il progetto, avviare il server di sviluppo, compilare la SPA ed esportare in PDF
Sintassi BaseSeparatore delle slide, configurazione dell'headmatter, note del presentatore in commenti HTML
Riferimenti PrincipaliTabella degli argomenti principali: sintassi, animazioni, frontmatter, CLI, componenti, layout, esportazione, hosting, contesto globale
Riferimento FunzionalitàTabelle complete su evidenziazione del codice, editor Monaco, diagrammi, matematica, layout, stile, animazioni, estensioni di sintassi, strumenti per il presentatore, opzioni di esportazione
Layout ComuniLayout integrati: cover, center, two-cols, varianti immagine, varianti iframe, quote, section, fact, intro, end
RisorseLink alla documentazione, alla galleria dei temi e alle vetrine

Descrizione della skill

"Crea e presenta presentazioni basate sul web per sviluppatori usando Slidev con Markdown, componenti Vue, evidenziazione del codice, animazioni e funzionalità interattive. Da usare per presentazioni tecniche, talk per conferenze, walkthrough di codice, materiali didattici o deck per sviluppatori."

Descrizione front-matter da SKILL.md. Il file completo è di circa 8.896 caratteri. Leggi il file completo su GitHub.

Slidev

Esegui slidev su un compito reale di PPT e slide deck.

Scarica OpenDesign, importa slidev dal suo link SKILL.md, incolla il prompt sopra e leggi il piano prima del risultato.

Scarica OpenDesign Esplora tutte le skill

Terminale

npx skills add https://github.com/slidevjs/slidev --skill slidev