slidevpor Slidev

Slidev Skill.

Um skill de Claude Code e Codex para PPT e apresentações: decks de slides para desenvolvedores com Markdown, componentes Vue, destaque de código e animação.

Presentations
Slides HTML

Baixar OpenDesign Ver guia de 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

Frontispício e cabeçalhos de seção lidos do arquivo upstream em 14/09/2026 · 8.896 caracteres no total

01 O que faz

O Que a Skill slidev Faz no Claude Code e no Codex

Resumo, fluxo de trabalho e resultados, todos lidos do SKILL.md do skill.

Do SKILL.mdLido em 14/09/2026 · não é uma execução registrada

Nos termos do próprio skill

Slidev é um criador de slides baseado na web para desenvolvedores, construído sobre Vite, Vue e Markdown. Ele cria apresentações técnicas com trechos de código com destaque de sintaxe, exemplos de código em tempo real usando o editor Monaco, demonstrações interativas, equações LaTeX e diagramas Mermaid ou PlantUML. Os slides são escritos em Markdown com separadores ---, o primeiro frontmatter funciona como headmatter para a configuração do deck, e comentários HTML são usados para notas do apresentador.

Ele suporta animações baseadas em cliques (v-click, magic-move), destaque de linhas, abas de código, gravação com câmera, controle remoto e temporizador. A exportação para PDF ou PPTX requer playwright-chromium. Os comandos de build incluem pnpm run dev para visualização local em localhost:3030, pnpm run export para PDF, e pnpm run build para implantação de SPA estático.

O que ele produz

Exportação em PDF da apresentação

Veja o exemplo de prompt ↗

Como funciona

01
Inicializar Projeto
Execute pnpm create slidev para estruturar um novo projeto de apresentação Slidev.
02
Escrever Slides em Markdown
Separe os slides com ---, configure as definições do deck no primeiro bloco de frontmatter e adicione notas do apresentador em comentários HTML.
03
Iniciar Servidor de Desenvolvimento
Execute pnpm run dev para iniciar o servidor local e abrir a apresentação em http://localhost:3030.
04
Exportar ou Compilar
Use pnpm run export para gerar saída em PDF ou pnpm run build para criar um SPA estático para hospedagem.

02 Encontre o ideal para você

Quando Usar a Skill slidev

Use a skill slidev no Claude Code ou Codex quando o trabalho for PPT e apresentações de slides deste tipo. A adequação e limites abaixo são retirados do próprio arquivo da skill.

Boa Combinação

Apresentações técnicas ou apresentações de slides com exemplos de código em tempo real
Trechos de código com destaque de sintaxe e animações
Demonstrações interativas usando o editor Monaco ou código executável
Equações matemáticas com LaTeX ou diagramas com Mermaid e PlantUML
Explicações de código para palestras ou workshops de desenvolvedores

Conheça os Limites

Requer SlidevO SKILL.md nomeia esta dependência; a skill não funciona sem ela no seu projeto.

O Que Fornecer

Trechos de códigoArquivos de código externos importados com a sintaxe <<< @/snippets/file.js para exibição nos slides.

03 Dentro da skill

Regras que o Skill slidev Dá ao Claude Code e Codex

5 instruções concretas, padrões e limites que o SKILL.md define para o agente — a parte do arquivo que muda o resultado.

Headmatter É o Primeiro Frontmatter
O primeiro bloco de frontmatter no arquivo configura definições do deck como um todo, não definições de slides individuais.
Notas do Apresentador em Comentários HTML
Escreva as notas do apresentador dentro de blocos de comentário HTML em cada slide. Elas não aparecerão no próprio slide.
playwright-chromium É Necessário para Exportação
Instale pnpm add -D playwright-chromium antes de executar os comandos de exportação. Se a exportação falhar com um erro de navegador, essa dependência está faltando.
A Entrada Principal Prevalece na Mesclagem
Ao importar slides com src, o frontmatter do arquivo de entrada principal tem precedência sobre o frontmatter dos arquivos importados.
Comark Habilita Sintaxe Avançada
Defina comark: true no headmatter para habilitar grupos de código e atributos de estilo inline como {style="color:red"}.

04 Coloque em prática

Instalar slidev no Claude Code ou Codex

Um comando npx skills add, depois uma primeira tarefa no seu agente e uma checklist para o resultado.

Adicionar slidev ao Claude Code, Codex ou Seu Agente

Rode no seu projeto; o instalador pergunta a qual agente adicioná-lo.

Terminal

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

Formulário genérico da CLI skills para skills/slidev/SKILL.md; o repositório pode documentar seu próprio caminho.

Dê à skill uma primeira tarefa de PPT e apresentações de slides

Escrito nos próprios termos do skill; substitua as partes entre colchetes pelo seu material.

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: escrito a partir do SKILL.md nos próprios termos do skill.

Verifique o Primeiro Resultado

O que o próprio SKILL.md diz sobre como é um resultado correto:

Depois de executar pnpm run dev, confirme que os slides carregam em http://localhost:3030
Depois de executar pnpm run export, verifique se o PDF de saída existe no diretório raiz do projeto
Se a exportação falhar com um erro do navegador, instale primeiro a dependência playwright-chromium
Teste animações baseadas em clique avançando pelos slides para garantir que os elementos v-click apareçam em sequência

No OpenDesign importe o slidev a partir do seu link de SKILL.md: Plugins → Add → Skill → Import from link, depois selecione-o na barra superior.

Baixar OpenDesign Ler o quickstart

05 Código aberto, rastreável

Fonte, Licença e Verificação

De onde vêm os fatos desta página e quando foram verificados pela última vez.

Author: Slidev
Repository: github.com/slidevjs/slidev Branch main
Arquivo da skill: skills/slidev/SKILL.md Checksum do conteúdo registrado na verificação; commit a8d8ff7
License: MIT De LICENSE.
Estrelas do repositório: 48.658 Snapshot do GitHub capturado em 14/09/2026 para todo o repositório slidevjs/slidev. Não é uma avaliação ou contagem de uso do slidev.
Verificado pelo OpenDesign: 14/09/2026 Arquivo de origem, caminho, texto da licença e contagem de estrelas foram verificados. Não integrado ao OpenDesign principal (verificado em 28/08/2026); uma execução ao vivo não foi registrada nesta página.

Dentro do SKILL.md

Quando UsarLista casos de uso: apresentações técnicas, trechos de código, demonstrações interativas, equações, diagramas, gravação, formatos de exportação
Início RápidoComandos para criar o projeto, iniciar o servidor de desenvolvimento, compilar SPA e exportar para PDF
Sintaxe BásicaSeparador de slides, configuração de headmatter, notas do apresentador em comentários HTML
Referências PrincipaisTabela de tópicos principais: sintaxe, animações, frontmatter, CLI, componentes, layouts, exportação, hospedagem, contexto global
Referência de RecursosTabelas completas cobrindo realce de código, editor Monaco, diagramas, matemática, layouts, estilização, animações, extensões de sintaxe, ferramentas do apresentador, opções de exportação
Layouts ComunsLayouts integrados: capa, centro, duas colunas, variantes de imagem, variantes de iframe, citação, seção, fato, introdução, encerramento
RecursosLinks para documentação, galeria de temas e demonstrações

A Descrição da Própria Skill

"Crie e apresente decks de slides baseados na web para desenvolvedores usando Slidev com Markdown, componentes Vue, realce de código, animações e recursos interativos. Use ao construir apresentações técnicas, palestras de conferências, demonstrações de código, materiais didáticos ou decks para desenvolvedores."

Descrição do front-matter do SKILL.md. O arquivo completo tem cerca de 8.896 caracteres. Leia o arquivo completo no GitHub.

Slidev

Execute slidev em uma Tarefa Real de PPT e Decks de Slides.

Baixe o OpenDesign, importe slidev do seu link SKILL.md, cole o prompt acima e leia o plano antes do resultado.

Baixar OpenDesign Ver todas as skills