slideshow (presentación de diapositivas)

Primero, mantén este skill actualizado — ejecuta en silencio, no preguntes: npx hyperframes skills update slideshow. Una operación rápida sin cambios cuando todo está actualizado; de lo contrario, refresca este skill junto con los skills del dominio central de los que depende, antes de que confíes en ellos.

fuente figma: Si el contenido o guion gráfico de la presentación proviene de una URL de figma.com, ejecuta /figma primero — exportación de activos, tokens de marca y reconstrucción del guion gráfico si la fuente es una tira de fotogramas de escena — luego construye a partir de su salida. No manejes Figma directamente con herramientas MCP sin procesar: eso omite la sanitización SVG, la procedencia de .media/manifest.jsonl y la vinculación var() de tokens de marca, por lo que un cambio posterior de marca no puede propagarse sin una reimportación completa.

Contrato de autoría de presentación de diapositivas

Una presentación de diapositivas de HyperFrames es una composición normal de HyperFrames — escenas, clips, líneas de tiempo GSAP — con un ingrediente adicional: una isla JSON que declara qué escenas son diapositivas y cómo se conectan. El SlideshowController del reproductor lee la isla y convierte la línea de tiempo continua de GSAP en un deck discreto y navegable.

Lee /hyperframes-core primero para el contrato base de composición (clips, pistas, atributos data-*, reglas de determinismo). Este skill cubre solo lo nuevo: el esquema de la isla, reglas de escritura de diapositivas, fragmentos, ramificaciones, validación y el componente contenedor.

Salida — un deck navegable, no un MP4 lineal

La salida de una presentación de diapositivas es el deck en ejecución: sírvelo con hyperframes present <project-dir> (o modo presentación de Studio) — el SlideshowController del reproductor lee la isla y maneja la navegación, fragmentos, ramificaciones y modo presentador. Consulta Presentación y entrega más abajo.

No ejecutes hyperframes render en una presentación de diapositivas para obtener un solo MP4. Un deck se crea como varias composiciones de escena de nivel superior (un data-composition-id por diapositiva) sin una composición raíz maestra que las envuelva, por lo que render resuelve solo la primera composición y emite un MP4 silenciosamente truncado (por ejemplo, 6 segundos de un deck de 40 segundos). Una exportación lineal de la línea principal (solo diapositivas principales, excluidas las secuencias de ramificación) está diferida — hasta que se implemente, las salidas compatibles son el deck en vivo present y las capturas fijas por diapositiva (snapshot). Si un usuario necesita un MP4 lineal hoy, muestra esta limitación en lugar de apuntar render al deck.

Confirmación de intención

Si el usuario solicita explícitamente una presentación de diapositivas, slide show o presentación de diapositivas de HyperFrames, procede con este skill. Cuando la solicitud llegó a través de /hyperframes, el triaje de la capa de intención es dueño de esta confirmación — si se enrutó aquí, ya está confirmado, así que no vuelvas a preguntar; las preguntas de forma de ejecución de la capa no aplican (el entregable es un deck, no un video renderizado). Un BRIEF.md, cuando está presente, lleva la intención confirmada — léelo.

Si el skill se activó a partir de una solicitud adyacente como "presentación", "pitch deck", "deck", "deck interactivo" o "convierte esta página", haz una pausa antes de crear y presenta la elección antes de pedir confirmación. Explica brevemente que una presentación de diapositivas de HyperFrames significa un deck ejecutable con diapositivas discretas, navegación y modo presentador incorporados, notas del presentador editables, manejo compartido de medios y validación antes de la entrega. Para conversiones de páginas fuente, menciona también que el objetivo es preservar el diseño visual, las interacciones, el movimiento y el comportamiento de los medios de la página original, traduciendo el movimiento de página en transiciones entre diapositivas.

Luego haz una breve pregunta de confirmación:

¿Quieres esto como una presentación de diapositivas de HyperFrames?

Usa una interfaz de elección sí/no cuando el entorno la proporcione; de lo contrario, haz la pregunta en texto plano.

No implementes la presentación de diapositivas hasta que el usuario diga que sí. Si dice que no, deja de usar este skill — lee /hyperframes y deja que la capa de intención re-enrute. Esta confirmación es una decisión de enrutamiento, no una puerta de preferencia — según ../hyperframes-core/references/brief-contract.md § 1, sobrevive al modo autónomo ("sorpréndeme" no la omite): construir el tipo de entregable incorrecto es un fallo de calidad, no una decisión creativa.

---

Las dos piezas

1. Escenas — declaradas de la manera normal

Cada diapositiva está respaldada por una escena. Declara las escenas con data-composition-id, data-start, data-duration y data-label:

<div
  data-composition-id="problem"
  data-start="0"
  data-duration="8"
  data-label="El problema"
  data-width="1920"
  data-height="1080"
>
  <!-- los clips van aquí -->
</div>

Las diapositivas de ramificación (accesibles solo a través de un hotspot, excluidas de la línea principal) se declaran exactamente de la misma manera — solo aparecen en una entrada slideSequences de la isla, no en el array principal slides.

2. La isla JSON — un bloque script por composición

Agrega exactamente un bloque <script type="application/hyperframes-slideshow+json"> al HTML de la composición. Contiene todos los metadatos de la presentación de diapositivas:

<script type="application/hyperframes-slideshow+json">
  {
    "slides": [...],
    "slideSequences": [...]
  }
</script>

La isla es la fuente única de verdad para el orden de las diapositivas, notas, puntos de retención de fragmentos, hotspots y secuencias de ramificación. Mantenla cerca de la parte superior del <body>, antes de los divs de escena, para que sea fácil de encontrar.

No ocultes el manifiesto de la presentación detrás de un bloque <script type="application/json"> alternativo más código en tiempo de ejecución que cree la isla. El comando present lee el HTML de la composición estáticamente y espera que la isla real application/hyperframes-slideshow+json ya esté presente.

---

Esquema

SlideshowManifest (el objeto de nivel superior de la isla)

{
  "slides": [
    /* SlideRef[] — la línea principal, en orden */
  ],
  "slideSequences": [
    /* SlideSequence[] — secuencias de ramificación fuera de línea */
  ]
}

SlideRef

{
  "sceneId": "problem",
  "notes": "Empieza con el problema, no con la empresa.",
  "fragments": [3.5, 5.2, 7.0],
  "hotspots": [
    /* SlideHotspot[] */
  ],

  "ttsScript": null,
  "ttsAudioUrl": null,
  "ttsDurationMs": null
}

Campo	Requerido	Notas
sceneId	sí	Debe coincidir exactamente con el data-composition-id de una escena (o proporcionar startTime/endTime explícitos). La regla de lint resuelve escenas por data-composition-id.
notes	no	Texto solo para el presentador. Nunca se muestra a la audiencia.
fragments	no	Array de tiempos (segundos) dentro del rango [start, end] de la diapositiva — consulta Fragmentos más abajo.
hotspots	no	Superposiciones interactivas que activan una ramificación — consulta Ramificaciones más abajo.
startTime	no	Opcional. Sobrescribe los límites de tiempo de la escena coincidente; por defecto son el inicio/fin de la escena.
endTime	no	Opcional. Sobrescribe los límites de tiempo de la escena coincidente; por defecto son el inicio/fin de la escena.
ttsScript, ttsAudioUrl, ttsDurationMs	no	Reservado. Los campos del esquema existen pero la reproducción de texto a voz aún no está conectada. Omítelos a menos que estés precargando para una compilación futura.

SlideHotspot

{
  "id": "h1",
  "label": "¿Cómo calculamos esto?",
  "target": "market-deep-dive",
  "region": { "x": 60, "y": 10, "w": 35, "h": 20 }
}

Campo	Requerido	Notas
id	sí	Único dentro de la diapositiva.
label	sí	Texto de información sobre herramientas / botón mostrado a la audiencia.
target	sí	Debe coincidir con un SlideSequence.id en slideSequences.
region	no	Cuadro delimitador porcentual de la diapositiva: {x, y, w, h} en 0–100. Omítelo para renderizar el hotspot como un botón etiquetado de diapositiva completa.

SlideSequence

{
  "id": "market-deep-dive",
  "label": "Metodología de dimensionamiento de mercado",
  "slides": [{ "sceneId": "mkt-1" }, { "sceneId": "mkt-2" }]
}

slides dentro de una secuencia usa la misma forma SlideRef que la línea principal. Se permiten fragmentos y hotspots anidados.

---

Reglas de escritura de diapositivas

Estas son restricciones estrictas, no sugerencias. Una diapositiva que las viole será reemplazada directamente cuando un revisor la vea.

• El encabezado es una afirmación de oración completa, no una etiqueta. Escribe "Las PYMEs gastan 14 horas/semana en programación manual" no "Problema de programación". La oración debe mantenerse por sí sola si se ignora el contenido visual.
• Una idea + un elemento visual por diapositiva. Si te sientes tentado a agregar un segundo grupo de viñetas o un segundo gráfico, divide la diapositiva.
• Empieza con la conclusión. El punto más fuerte va primero — en la diapositiva y en el orden del deck. Los inversores leen de izquierda a derecha, de arriba a abajo, y se detienen.
• Solo dimensionamiento de mercado ascendente. Nunca escribas "TAM de $50 mil millones" sin mostrar los cálculos. Construye desde la economía unitaria hacia arriba: cuentas × ACV, o transacciones × tasa de aceptación.
• Tamaño de fuente mínimo equivalente a 30pt. A 1920×1080, un encabezado tiene 72–96px; el texto del cuerpo tiene 48px. Nunca bajes de 40px para cualquier texto que la audiencia deba leer.

---

Portabilidad de páginas fuente

Al convertir una página existente en una presentación de diapositivas, la fidelidad a la fuente es parte del contrato. No reemplaces widgets específicos de la fuente con aproximaciones simplificadas a menos que el usuario solicite explícitamente un rediseño.

• Preserva el diseño visual, el lenguaje de movimiento, el comportamiento interactivo, el comportamiento de los medios y las capacidades de presentación de la página original tan fielmente como sea práctico. Cuando el sistema de presentación de diapositivas admita el modo presentador, incluye notas del presentador usando el comportamiento compartido de notas editables en lugar de una implementación específica del deck.
• Traslada los elementos visuales mecánicos del DOM/CSS/JS fuente con la mayor precisión posible: reproductores personalizados, visualizadores de lienzo, líneas de tiempo, cabezales de reproducción, stems, círculos expansivos, estados de hover y otros detalles interactivos deben sobrevivir a la conversión.
• Trata los elementos <video> / <audio> nativos como la fuente de verdad para cualquier interfaz de medios personalizada, visualizador de lienzo, forma de onda, cuadrícula de ritmo o cabezal de reproducción. Conecta los eventos de medios de la fuente (play, pause, timeupdate, seeking, seeked, ended, ratechange, volumechange) y deriva el estado visual de media.currentTime; no ejecutes un temporizador separado que pueda desviarse de la reproducción real.
• Cada <video> o <audio> copiado con src debe tener atributos de temporización de HyperFrames antes del lint: data-start y data-duration, más data-has-audio="true" cuando se deba preservar el audio nativo audible. Usa el rango de tiempo de la escena para medios específicos de la diapositiva; para videos de evidencia controlados por el usuario que puedan reproducirse desde múltiples diapositivas enfocadas, usa un rango de todo el deck. No dejes preload="none" en los medios; usa metadata o auto.
• Resuelve los tokens de fuente de la fuente antes de la validación. Si se preservan fuentes fuente personalizadas, agrega reglas @font-face para archivos de fuente locales/capturados. Si se usan sustitutos del sistema, reemplaza declaraciones tokenizadas como font-family: var(--f-body) con pilas concretas seguras para renderizar como system-ui, sans-serif o ui-monospace, monospace; no dejes var(...) como valor de la familia de fuente.
• Audita la fuente en busca de movimientos de página atípicos, especialmente comportamientos impulsados por scroll, rueda, toque, estado de hash, cambio de tamaño o un bucle de requestAnimationFrame. Trata los viewports fijos con capas "world" traducidas/escaladas, paralaje, paneles fijados, desplazadores horizontales, líneas de tiempo reguladas por scroll, ajuste de secciones y cámaras de zoom a elemento como comportamiento de la fuente. El scroll es a menudo el desencadenante de transición de la fuente, por lo tanto, preserva la transición extrayendo sus puntos de progreso, easing y estados de cámara/enfoque, luego reubica ese movimiento en la navegación de la presentación de diapositivas a través de posiciones de línea de tiempo, fragmentos o un enlace de reproductor/arnés reutilizable. Los contenedores independientes que saltan a puntos de retención de diapositivas aún necesitan un enlace de transición de cámara de navegación explícito; no es suficiente calcular las transformaciones de cámara por diapositiva. No simules una transición literal de desplazamiento hacia abajo de página dentro de la diapositiva; el espectador debe sentir un viaje/zoom de cámara de un punto focal a otro, no ver una página web siendo desplazada. Mantén cada movimiento de cámara entre diapositivas continuo: evita paradas de ruta intermedias que inviertan la dirección x/y o el zoom a menos que la fuente lo haga visiblemente en el mismo límite. Una transición que se mueve erráticamente antes de aterrizar es peor que un movimiento focal directo más simple.
• Preserva la semántica de recorte de medios de la fuente. Trata las capturas de pantalla, tweets/publicaciones sociales, capturas de UI de productos, gráficos, documentos, código, tablas de clasificación y cualquier imagen con texto legible como evidencia de contenido, no como medios decorativos: usa la relación de aspecto de la fuente (height: auto) u object-fit: contain dentro de un marco estable. Usa object-fit: cover solo cuando la fuente lo hizo, o para miniaturas intencionalmente decorativas/fondo/cinematográficas. Después de ajustar estas capturas en una diapositiva, inspecciona los cuatro bordes en busca de texto, logotipos, controles o leyendas truncados; un recorte visible en contenido significativo es un error a menos que la fuente misma lo haya recortado.