slidevpor Slidev

Slidev Skill.

Un skill de Claude Code y Codex para PPT y presentaciones: presentaciones para desarrolladores con Markdown, componentes Vue, resaltado de código y animación.

Presentations
Diapositivas HTML

Descargar OpenDesign Ver guía 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

Front matter y encabezados de sección leídos del archivo original el 14 de septiembre de 2026 · 8896 caracteres en total

01 Qué hace

Qué hace el Skill de slidev en Claude Code y Codex

Resumen, flujo de trabajo y resultados, todo leído del SKILL.md del skill.

Del SKILL.mdLeído 2026-09-14 · no es una ejecución registrada

En los propios términos del Skill

Slidev es un creador de presentaciones basado en web para desarrolladores, construido sobre Vite, Vue y Markdown. Crea presentaciones técnicas con fragmentos de código resaltados por sintaxis, ejemplos de código en vivo mediante el editor Monaco, demos interactivas, ecuaciones LaTeX y diagramas Mermaid o PlantUML. Las diapositivas se escriben en Markdown con separadores ---, el primer frontmatter actúa como headmatter para la configuración del deck, y los comentarios HTML se usan para las notas del presentador.

Admite animaciones basadas en clics (v-click, magic-move), resaltado de líneas, pestañas de código, grabación con cámara, control remoto y temporizador. Exportar a PDF o PPTX requiere playwright-chromium. Los comandos de compilación incluyen pnpm run dev para la vista previa local en localhost:3030, pnpm run export para PDF, y pnpm run build para el despliegue de la SPA estática.

Qué produce

Exportación en PDF de la presentación

Ver el ejemplo de prompt ↗

Cómo funciona

01
Inicializar Proyecto
Ejecute pnpm create slidev para generar un nuevo proyecto de presentación Slidev.
02
Escribir Diapositivas en Markdown
Separe las diapositivas con ---, configure los ajustes del deck en el primer bloque de frontmatter y añada notas del presentador en comentarios HTML.
03
Iniciar el Servidor de Desarrollo
Ejecute pnpm run dev para iniciar el servidor local y abrir la presentación en http://localhost:3030.
04
Exportar o Compilar
Use pnpm run export para obtener un PDF o pnpm run build para crear una SPA estática para hospedaje.

02 Encuentra tu caso de uso

Cuándo usar el skill slidev

Usar el skill slidev en Claude Code o Codex cuando el trabajo sea presentaciones PPT y diapositivas de este tipo. El alcance y límites se toman del archivo propio del skill.

Buen caso de uso

Presentaciones técnicas o presentaciones con ejemplos de código en vivo
Fragmentos de código con resaltado de sintaxis y animaciones
Demos interactivas mediante el editor Monaco o código ejecutable
Ecuaciones matemáticas con LaTeX o diagramas con Mermaid y PlantUML
Recorridos de código para charlas o talleres de desarrolladores

Conozca los límites

Requiere SlidevEl SKILL.md nombra esta dependencia; el skill no funciona sin ella en tu proyecto.

Qué proporcionar

Fragmentos de códigoArchivos de código externos importados con la sintaxis <<< @/snippets/file.js para mostrarse en las diapositivas.

03 Dentro del skill

Reglas que el skill slidev le da a Claude Code y Codex

5 instrucciones concretas, valores predeterminados y límites que el SKILL.md establece para el agente: la parte del archivo que cambia el resultado.

El Headmatter Es el Primer Frontmatter
El primer bloque de frontmatter del archivo configura los ajustes de todo el deck, no los ajustes de diapositivas individuales.
Notas del Presentador en Comentarios HTML
Escriba las notas del presentador dentro de bloques de comentarios HTML en cada diapositiva. No aparecerán en la diapositiva misma.
Se Requiere playwright-chromium para Exportar
Instale pnpm add -D playwright-chromium antes de ejecutar los comandos de exportación. Si la exportación falla con un error de navegador, falta esta dependencia.
La Entrada Principal Predomina al Combinar
Al importar diapositivas con src, el frontmatter del archivo de entrada principal tiene prioridad sobre el frontmatter del archivo importado.
Comark Habilita Sintaxis Avanzada
Configure comark: true en el headmatter para habilitar grupos de código y atributos de estilo en línea como {style="color:red"}.

04 Ponlo a trabajar

Instalar slidev en Claude Code o Codex

Un comando npx skills add, luego una primera tarea en tu agente y una lista de verificación para el resultado.

Añadir slidev a Claude Code, Codex o tu agente

Ejecútelo en su proyecto; el instalador pregunta a qué agente añadirlo.

Terminal

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

Formulario genérico de la CLI de skills para skills/slidev/SKILL.md; el repositorio puede documentar su propia ruta.

Dale a la skill una primera tarea de PPT y presentaciones

Redactado en los términos del propio skill; sustituya las partes entre corchetes por su 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.

Fuente: redactado a partir del SKILL.md en los términos del propio skill.

Revisa el primer resultado

Lo que el propio SKILL.md indica que debe ser un resultado correcto:

Después de ejecutar pnpm run dev, confirme que las diapositivas cargan en http://localhost:3030
Después de ejecutar pnpm run export, verifique que el PDF de salida existe en el directorio raíz del proyecto
Si la exportación falla con un error del navegador, instale primero la dependencia playwright-chromium
Pruebe las animaciones basadas en clic avanzando por las diapositivas para asegurarse de que los elementos v-click aparecen en secuencia

En OpenDesign importe slidev desde su enlace SKILL.md: Plugins → Add → Skill → Import from link, luego selecciónelo en la barra superior.

Descargar OpenDesign Leer la guía de inicio rápido

05 Código abierto, rastreable

Fuente, Licencia y Verificación

De dónde provienen los datos de esta página y cuándo se verificaron por última vez.

Author: Slidev
Repository: github.com/slidevjs/slidev Rama main
Archivo de skill: skills/slidev/SKILL.md Checksum de contenido registrado en verificación; commit a8d8ff7
License: MIT De LICENSE.
Estrellas del repositorio: 48,658 Captura de GitHub tomada el 14 sep 2026 para el repositorio completo slidevjs/slidev. No es una calificación ni un recuento de uso de slidev.
Verificado por OpenDesign: 14/09/2026 Se verificaron el archivo fuente, la ruta, el texto de licencia y el recuento de estrellas. No incluido en OpenDesign principal (verificado el 28/08/2026); no se ha registrado una ejecución en vivo en esta página.

Dentro del SKILL.md

Cuándo UsarloEnumera casos de uso: presentaciones técnicas, fragmentos de código, demostraciones interactivas, ecuaciones, diagramas, grabación, formatos de exportación
Inicio RápidoComandos para crear un proyecto, iniciar el servidor de desarrollo, compilar una SPA y exportar a PDF
Sintaxis BásicaSeparador de diapositivas, configuración del headmatter, notas del presentador en comentarios HTML
Referencias PrincipalesTabla de temas principales: sintaxis, animaciones, frontmatter, CLI, componentes, layouts, exportación, hospedaje, contexto global
Referencia de FuncionesTablas completas que cubren resaltado de código, editor Monaco, diagramas, matemáticas, layouts, estilos, animaciones, extensiones de sintaxis, herramientas de presentador, opciones de exportación
Layouts ComunesLayouts integrados: cover, center, two-cols, variantes de imagen, variantes de iframe, quote, section, fact, intro, end
RecursosEnlaces a la documentación, galería de temas y muestras

La descripción propia del Skill

"Crea y presenta mazos de diapositivas basados en web para desarrolladores usando Slidev con Markdown, componentes Vue, resaltado de código, animaciones y funciones interactivas. Úsalo al construir presentaciones técnicas, charlas de conferencia, recorridos de código, materiales de enseñanza o mazos para desarrolladores."

Descripción del front-matter de SKILL.md. El archivo completo tiene aproximadamente 8,896 caracteres. Lee el archivo completo en GitHub.

Slidev

Ejecuta slidev en una tarea real de PPT y mazos de diapositivas.

Descargue OpenDesign, importe slidev desde su enlace SKILL.md, pegue la instrucción anterior y lea el plan antes del resultado.

Descargar OpenDesign Ver todas las skills