slideshowpor HeyGen

Slideshow Skill.

Un skill de Claude Code y Codex para PPT y presentaciones: presentaciones interactivas HyperFrames con fragmentos, ramificación y modo presentador.

Presentations
Diapositivas HTML

Descargar OpenDesign Ver guía de uso

heygen-com/hyperframes · skills/slideshow/SKILL.mdSKILL.md

--- name: slideshow description: Author a HyperFrames slideshow — a presentation, pitch deck, or interactive deck with discrete slides, fragment reveals, branching, hotspot navigation, and built-in presenter mode with speaker notes; also converts an existing page into a deck. Output is a navigable deck, not a rendered MP4. If the user didn't explicitly ask for a slideshow, confirm before authoring. Unclear → /hyperframes. --- ## Output — a navigable deck, not a linear MP4 ## Intent confirmation ## The two pieces ## Schema ## Slide writing rules ## Porting source pages

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

01 Qué hace

Qué hace el skill slideshow 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

Crea presentaciones HyperFrames: presentaciones, pitch decks o decks interactivos con diapositivas discretas, revelado por fragmentos, ramificación, navegación por hotspots y modo presentador integrado con notas del orador. También convierte páginas existentes en decks. El resultado es un deck navegable servido con hyperframes presentes, no un MP4 renderizado. Utiliza un bloque de script de isla JSON para declarar diapositivas y conexiones. Admite fragmentos (puntos de pausa de revelado dentro de una diapositiva), ramificación mediante hotspots hacia secuencias fuera de línea, y modo presentador con notas editables sincronizadas mediante BroadcastChannel.

Requiere confirmación antes de crear la presentación, salvo que se solicite explícitamente. Aplica reglas estrictas de redacción de diapositivas: titulares como afirmaciones en forma de oración completa, una idea por diapositiva, dimensionamiento de mercado de abajo hacia arriba, tamaño de fuente mínimo de 30pt. Busca en el catálogo en vivo antes de construir manualmente cualquier elemento visual con nombre. Al portar páginas de origen, conserva el diseño, el movimiento, las interacciones y el comportamiento de los medios originales, mientras traduce el movimiento de página en transiciones entre diapositivas.

Qué produce

Una composición HyperFrames con escenas, clips, timelines de GSAP y un manifiesto de isla JSON
Un deck navegable servido con hyperframes presentes, incluido el modo presentador con notas del orador

Ver el ejemplo de prompt ↗

Cómo funciona

01
Confirmar la intención
Si el usuario solicita explícitamente una presentación de diapositivas, proceda; de lo contrario, deténgase y explique qué significa una presentación HyperFrames (deck ejecutable, navegación, modo presentador) antes de pedir confirmación.
02
Declarar escenas con atributos de temporización
Cada diapositiva está respaldada por una escena. Declare cada una con data-composition-id, data-start, data-duration y data-label.
03
Añadir el JSON Island
Añadir exactamente un bloque de script con type application/hyperframes-slideshow+json a la composición HTML.
04
Escribir Diapositivas Siguiendo Reglas Estrictas
Los titulares deben ser afirmaciones con frase completa. Una idea más un elemento visual por diapositiva. Empiece por la conclusión. Solo dimensionamiento de mercado de abajo hacia arriba. Tamaño de fuente mínimo equivalente a 30pt.
05
Buscar en el Catálogo Antes de Crear Elementos Visuales
Para cada aspecto, efecto, gráfico o transición que necesite una diapositiva, ejecute npx hyperframes catalog --query en inglés sencillo y lea los primeros resultados antes de crear el contenido.

02 Encuentra tu caso de uso

Cuándo Usar el skill slideshow

Usa el skill slideshow en Claude Code o Codex cuando el trabajo sea PPT y decks de diapositivas de este tipo. El ajuste y límites a continuación se toman del propio archivo del skill.

Buen caso de uso

Presentaciones, pitch decks o decks interactivos con diapositivas independientes
Decks con revelado de fragmentos, ramificaciones, navegación por puntos activos y modo presentador
Convertir una página existente en un deck

Conozca los límites

Solicitudes en las que la intención de crear un slideshow no está clara — debe confirmarse antes de crear el contenido
Texto menor de 40px que el público debe leer

Qué proporcionar

URL de origen de Figma (opcional)Si el contenido o el storyboard del deck proviene de una URL de figma.com, ejecute /figma primero para la exportación de recursos, los tokens de marca y la reconstrucción del storyboard antes de construir.

03 Dentro del skill

Reglas que el Skill de slideshow da a Claude Code y Codex

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

Una Idea Más un Elemento Visual por Diapositiva
Si siente la tentación de añadir un segundo grupo de viñetas o un segundo gráfico, divida la diapositiva.
Tamaño de Fuente Mínimo Equivalente a 30pt
A 1920×1080, un titular es de 72–96px; el texto de cuerpo es de 48px. Nunca vaya por debajo de 40px para ningún texto que el público deba leer.
Solo Dimensionamiento de Mercado de Abajo Hacia Arriba
Nunca escriba un TAM de $50B sin mostrar los cálculos. Constrúyalo desde la economía unitaria hacia arriba: cuentas × ACV, o transacciones × tasa de comisión.
Buscar en el Catálogo Antes de Construir a Mano
Para cada elemento visual con nombre que necesite una diapositiva, ejecute npx hyperframes catalog --query y lea los primeros resultados antes de crear el contenido. Un bloque real es mejor que una aproximación simplificada.
No Renderizar Slideshows a MP4
Un deck se crea como varias composiciones de escena de nivel superior sin una composición raíz maestra, por lo que el render solo resuelve la primera composición y genera un MP4 truncado silenciosamente.
Los tiempos de fragmento son posiciones absolutas en la línea de tiempo de la composición
Los tiempos de fragmento usan el mismo espacio de coordenadas que data-start, no offsets relativos al inicio de la escena. Deben quedar dentro del rango start, end de la diapositiva, inclusive.
Preservar la Fidelidad de la Página de Origen al Portar
Preserve el diseño visual, el lenguaje de movimiento, el comportamiento interactivo, el comportamiento de los medios y las funciones de presentación de la página original tanto como sea práctico.

04 Ponlo a trabajar

Instalar slideshow 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.

Agregar slideshow 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/heygen-com/hyperframes --skill slideshow

Forma genérica de la CLI de skills para skills/slideshow/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

Build a HyperFrames slideshow for a Series A pitch deck. Start with a hook slide showing SMBs lose $40B/year to manual scheduling. Add a problem slide with three pain points that reveal as fragments: no-shows cost 23% of revenue, manual reminders take 4h/week per staff, and rescheduling friction drives 40% churn. Include a hotspot on the $40B figure that branches to a market-sizing slide showing the bottom-up math: 2.3M SMBs × $17k ACV. End with a solution slide: [product name] automates scheduling for service SMBs, cutting no-shows by 80% in 90 days. Include speaker notes for each slide.

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:

Corrija el archivo y vuelva a ejecutar hasta que lint reporte 0 error(es) y la validación no reporte errores en tiempo de ejecución
Verifique que cada slide.sceneId resuelva a una escena existente por data-composition-id
Verifique que cada hotspot.target referencie un id de slideSequence definido
Verifique que los tiempos de fragmento queden dentro del rango start, end de cada diapositiva

En OpenDesign importe slideshow desde su enlace de SKILL.md: Plugins → Add → Skill → Import from link, y 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: HeyGen
Repository: github.com/heygen-com/hyperframes Rama main
Archivo de skill: skills/slideshow/SKILL.md Checksum de contenido registrado en la verificación; commit 558c11b
License: Apache-2.0 De LICENSE.
Estrellas del repositorio: 49.761 Instantánea de GitHub tomada el 14-09-2026 para todo el repositorio heygen-com/hyperframes, que contiene 9 skills en este catálogo. No es una calificación o recuento de uso para slideshow.
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

Contrato de autoría de slideshowUn slideshow de HyperFrames es una composición normal más una isla JSON que declara diapositivas y conexiones
Salida: un mazo navegable, no un MP4 linealSirva con hyperframes presente; no renderice a MP4, ya que se trunca a la primera composición
Confirmación de intenciónConfirme antes de crear el contenido a menos que el usuario haya pedido explícitamente un slideshow; la intención enrutada ya está preconfirmada
Las dos piezasEscenas declaradas con data-composition-id y timing; isla JSON con los arrays slides y slideSequences
EsquemaDefiniciones de campos y requisitos de SlideshowManifest, SlideRef, SlideHotspot y SlideSequence
Reglas de redacción de diapositivasTitulares como oraciones completas, una idea por diapositiva, dimensionamiento de abajo hacia arriba, mínimo de 30pt, primero busque en el catálogo
Portar páginas de origenPreserve el diseño, el movimiento, las interacciones y los medios originales; traduzca el movimiento de la página a transiciones de diapositivas; conecte los eventos de medios
Fragmentos: puntos de retención de revelado dentro de una diapositivaTiempos absolutos de la línea de tiempo dentro del rango de la diapositiva; el controlador busca cada fragmento al presionar Next; no hay reproducción entre ellos
Ramificación: hotspots y secuencias de diapositivasLas diapositivas de rama se excluyen de la línea principal; al hacer clic en un hotspot se empuja la pila de navegación; volver regresa al padre
Ejemplo resuelto: mazo de 3 diapositivas con fragmentos y una ramaEsqueleto HTML completo con escenas, isla JSON, línea de tiempo GSAP y una secuencia de rama
Componente envolventeEnvuelva en hyperframes-slideshow; proporciona navegación, teclado, táctil, hotspots; Present abre una pestaña de audiencia; silencio global
Ejecución de un slideshow independiente (provisional)Las demostraciones independientes requieren soluciones alternativas hasta que se lance la vista previa alojada en el motor; consulte references/standalone-harness.md

La descripción propia del Skill

"Cree una presentación de diapositivas HyperFrames: una presentación, pitch deck o presentación interactiva con diapositivas discretas, revelaciones por fragmentos, ramificación, navegación por puntos activos y modo de presentador integrado con notas del orador; también convierte una página existente en presentación. El resultado es una presentación navegable, no un MP4 renderizado. Si el usuario no solicitó explícitamente una presentación de diapositivas, confirme antes de crearla. Si no está claro → /hyperframes."

Descripción del front-matter de SKILL.md. El archivo completo tiene alrededor de 33.631 caracteres. Lee el archivo completo en GitHub.

06 Antes de instalar

Preguntas Sobre el Skill slideshow

Las respuestas provienen del SKILL.md tal como se leyó el 2026-09-14, no de una ejecución registrada.

¿Qué son los fragmentos y cómo funcionan?

Un fragmento es un tiempo absoluto de la línea de tiempo de la composición, en segundos, dentro del rango start, end de una diapositiva, donde el controlador mantiene un estado de revelado.

El reproductor entra en una diapositiva fragmentada en fragments[0], y luego busca cada fragmento subsiguiente al presionar Next. Después del último fragmento, Next avanza a la siguiente diapositiva. La navegación está impulsada por búsqueda (seek), no por reproducción.

Slideshow

Ejecutar slideshow en una tarea de presentaciones PPT y diapositivas real.

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

Descargar OpenDesign Ver todas las skills