presentación de diapositivas

Primero, mantén esta skill actualizada — confirma con el usuario antes de ejecutar: npx hyperframes skills update slideshow. Una operación rápida sin cambios cuando todo está actualizado; de lo contrario, actualiza esta skill junto con las skills del dominio central de las que depende, antes de confiar en ellas.

fuente figma: Si el contenido de la presentación o el storyboard provienen de una URL de figma.com, ejecuta /figma primero (exporta recursos, tokens de marca y reconstruye el storyboard si la fuente es una tira de fotogramas de escena), luego construye a partir de su salida. No manejes Figma directamente a través de herramientas MCP en bruto: eso omite la sanitización de SVG, la procedencia de .media/manifest.jsonl y la vinculación de var() de los 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 de 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 una presentación discreta y navegable.

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

Salida: una presentación navegable, no un MP4 lineal

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

No ejecutes hyperframes render en una presentación de diapositivas para generar un solo MP4. Una presentación se crea con 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 una presentación 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 esté disponible, las salidas admitidas son la presentación en vivo present e imágenes fijas por diapositiva snapshot. Si un usuario necesita un MP4 lineal hoy, menciona esta limitación en lugar de ejecutar render en la presentación.

Confirmación de intención

Si el usuario pide explícitamente una presentación de diapositivas, slide show o presentación de diapositivas de HyperFrames, procede con esta skill. Cuando la solicitud llegó a través de /hyperframes, el triaje de la capa de intención es el propietario de esta confirmación — si se ha enrutado 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 una presentación, no un video renderizado). Un BRIEF.md, cuando está presente, contiene la intención confirmada — léelo.

Si la skill se activó a partir de una solicitud adyacente como "presentación", "pitch deck", "deck", "presentación interactiva" o "convertir esta página", haz una pausa antes de crear y plantea la elección antes de pedir confirmación. Explica brevemente que una presentación de diapositivas de HyperFrames significa una presentación ejecutable con diapositivas discretas, navegación integrada y modo presentador, notas del orador editables, manejo compartido de medios y validación antes de la entrega. Para conversiones de páginas de origen, también menciona que el objetivo es preservar el diseño visual, las interacciones, el movimiento y el comportamiento multimedia de la página original, mientras se traduce el movimiento de la página en transiciones de diapositiva a diapositiva.

Luego haz una pregunta de confirmación breve:

¿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 esta skill — lee /hyperframes y deja que la capa de intención redirija. Esta confirmación es una decisión de enrutamiento, no una puerta de preferencia — según ../hyperframes/references/brief-contract.md § 1, sobrevive al modo autónomo ("sorpréndeme" no lo 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 en la isla, no en el array principal slides.

2. La isla JSON — un bloque de 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 única fuente 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 crea 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 la isla de nivel superior)

{
  "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 dolor, 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 desencadenan una ramificación — consulta Ramificación más abajo.
startTime	no	Opcional. Sobrescribe los límites de tiempo de la escena coincidente; por defecto usa el inicio/fin de la escena.
endTime	no	Opcional. Sobrescribe los límites de tiempo de la escena coincidente; por defecto usa el inicio/fin de la escena.
ttsScript, ttsAudioUrl, ttsDurationMs	no	Reservado. Los campos del esquema existen, pero la reproducción de TTS 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 que se muestra a la audiencia.
target	sí	Debe coincidir con un SlideSequence.id en slideSequences.
region	no	Cuadro delimitador en porcentaje de la diapositiva: {x, y, w, h} en 0–100. Omítelo para representar el hotspot como un botón etiquetado de diapositiva completa.

SlideSequence

{
  "id": "market-deep-dive",
  "label": "Metodología de dimensionamiento del 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 titular es una afirmación con oración completa, no una etiqueta. Escribe "Las pymes dedican 14 horas/semana a la programación manual", no "Problema de programación". La oración debe ser autónoma si se ignora el elemento visual.
• Una idea + un visual por diapositiva. Si te sientes tentado a agregar un segundo conjunto de viñetas o un segundo gráfico, divide la diapositiva.
• Empieza con el punto clave. El punto más fuerte va primero — en la diapositiva y en el orden de la presentación. Los inversores leen de izquierda a derecha, de arriba a abajo, y se detienen.
• Solo dimensionamiento de mercado ascendente. Nunca escribas "$50B TAM" sin mostrar las matemáticas. Construye a partir de la economía unitaria: cuentas × ACV, o transacciones × tasa de toma.
• Tamaño de fuente mínimo equivalente a 30pt. A 1920×1080, un titular es de 72–96px; el cuerpo del texto es de 48px. Nunca uses menos de 40px para cualquier texto que la audiencia deba leer.
• Busca en el catálogo en vivo antes de construir manualmente cualquier elemento visual con nombre. Para cada aspecto visual, efecto, gráfico, tratamiento o transición que necesite una diapositiva — "líneas de barrido CRT", "glitch", "carrera de gráficos de barras", "barrido de brillo", "ventana de terminal" — ejecuta npx hyperframes catalog --query "<el elemento visual, en inglés simple>" --json y lee los mejores resultados antes de crear los clips de la diapositiva. La búsqueda no necesita nada instalado: ni proyecto, ni add previo, ni cuenta. Clasifica todo el registro alojado (~400 bloques y componentes) desde cualquier directorio. npx hyperframes add <nombre> coloca el código fuente del bloque en la presentación, donde lo personalizas en su lugar. Esto aplica con especial fuerza al portar una página de origen: un bloque real supera a la aproximación simplificada que las reglas de portabilidad a continuación prohíben.

Portabilidad de páginas de origen

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 pida explícitamente un rediseño.

• Preserva el diseño visual, el lenguaje de movimiento, el comportamiento interactivo, el comportamiento multimedia y las capacidades de presentación de la página original con la mayor precisión práctica. Cuando el sistema de presentación de diapositivas admita el modo presentador, incluye notas del orador utilizando el comportamiento compartido de notas editables en lugar de una implementación específica de la presentación.
• Porta los elementos visuales mecánicos del DOM/CSS/JS de origen con la mayor precisión práctica: reproductores personalizados, visualizadores de lienzo, líneas de tiempo, cabezas de reproducción, stems, círculos en expansión, 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 marco multimedia personalizado, visualizador de lienzo, forma de onda, cuadrícula de ritmo o cabeza de reproducción. Conecta los eventos multimedia 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, además de data-has-audio="true" cuando se deba conservar 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 toda la presentación. No dejes preload="none" en los medios; usa metadata o auto.
• Resuelve los tokens de fuente de origen antes de la validación. Si conservas fuentes de origen personalizadas, agrega reglas @font-face para los archivos de fuente locales/capturados. Si usas alternativas del sistema, reemplaza las 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 fuentes.
• Audita la fuente en busca de movimiento de página atípico, especialmente el comportamiento impulsado por scroll, rueda, toque, estado de hash, redimensionamiento o un bucle requestAnimationFrame. Trata los viewports fijos con capas "world" traducidas/escaladas, paralaje, paneles fijos, desplazadores horizontales, líneas de tiempo controladas por scroll, ajuste de secciones y cámaras de zoom a elementos como comportamiento de origen. El scroll suele ser el desencadenante de transición de la fuente, por lo que 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 en la línea de tiempo, fragmentos o un enganche de reproductor/arnés reutilizable. Los envoltorios independientes que saltan a puntos de retención de diapositivas aún necesitan un enganche 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 la 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 de diapositiva a diapositiva continuo: evita paradas de ruta intermedias que inviertan la dirección x/y o el zoom.

---

[truncado para traducción]