Primero, mantén esta skill actualizada — ejecútala silenciosamente, no preguntes:
npx hyperframes skills update slideshow. Una operación rápida sin efectos si todo está actualizado; de lo contrario, refresca esta skill junto con las skills del dominio central de las que depende antes de que confíes en ellas.
Fuente figma: Si el contenido o guion gráfico del deck proviene de una URL de figma.com, ejecuta
/figmaprimero — 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 uses las herramientas MCP directamente con Figma: eso omite la sanitización de SVG, la procedencia de.media/manifest.jsonly la vinculación devar()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 presentaciones de diapositivas
Una presentación de diapositivas HyperFrames es una composición HyperFrames normal — 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 GSAP continua en un deck discreto y navegable.
Lee /hyperframes-core primero para el contrato de composición base (clips, pistas, atributos data-*, reglas de determinismo). Esta skill cubre solo lo nuevo: el esquema de la isla, reglas de escritura de diapositivas, fragmentos, ramificación, validación y el componente envolvente.
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 el modo presentación de Studio) — el SlideshowController del reproductor lee la isla y gestiona la navegación, fragmentos, ramificación y modo presentador. Consulta Presentación y entrega más abajo.
No uses hyperframes render para convertir una presentación de diapositivas en un único MP4. Un deck se crea como varias composiciones de escena de alto nivel (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 llegue, las salidas compatibles son el deck present en vivo y las imágenes fijas snapshot por diapositiva. 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 HyperFrames, continúa con esta skill. Cuando la solicitud llegó a través de /hyperframes, el triaje de la capa de intención gestiona 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 la skill se activó por una solicitud afín como "presentación", "pitch deck", "deck", "deck interactivo" o "convertir esta página", haz una pausa antes de crear y enmarca la elección antes de pedir confirmación. Explica brevemente que una presentación de diapositivas HyperFrames significa un deck ejecutable con diapositivas discretas, navegación integrada y modo presentador, notas del orador editables, manejo de medios compartido y validación antes de la entrega. Para conversiones de páginas fuente, también menciona que el objetivo es preservar el diseño visual original de la página, las interacciones, el movimiento y el comportamiento de los medios mientras se traduce el movimiento de la página en transiciones de diapositiva a diapositiva.
Luego haz una breve pregunta de confirmación:
¿Quieres esto como una presentación HyperFrames?
Usa una interfaz de opción sí/no cuando el entorno la proporcione; de lo contrario, haz la pregunta en texto plano.
No implementes la presentación 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 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 partes
1. Escenas — declaradas de la manera normal
Cada diapositiva respalda 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 (alcanzables 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 arreglo 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:
<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 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 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 | Arreglo 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 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 TTS aún no está conectada. Omítelos a menos que estés prepoblando 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 representar el hotspot como un botón etiquetado de diapositiva completa en su lugar. |
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
Son restricciones estrictas, no sugerencias. Una diapositiva que las viole será reemplazada directamente cuando un revisor la vea.
- El titular es una afirmació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 comprensible por sí sola incluso si se ignora el elemento 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 $50B" sin mostrar los cálculos. Construye desde la economía unitaria hacia arriba: cuentas × ACV, o transacciones × tasa de descuento.
- 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 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 los 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 original de la página, el lenguaje de movimiento, el comportamiento interactivo, el comportamiento multimedia y las capacidades de presentación lo más fielmente posible. Cuando el sistema de presentaciones admita el modo presentador, incluye notas del orador usando el comportamiento compartido de notas editables en lugar de una implementación específica del deck.
- Porta los elementos visuales mecánicos del DOM/CSS/JS fuente tan exactamente como sea práctico: reproductores personalizados, visualizadores de lienzo, líneas de tiempo, cabezales 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 cromo multimedia personalizado, visualizador de lienzo, forma de onda, cuadrícula de ritmo o cabezal de reproducción. Conecta los eventos multimedia de la fuente (play,pause,timeupdate,seeking,seeked,ended,ratechange,volumechange) y deriva el estado visual demedia.currentTime; no ejecutes un temporizador separado que pueda desviarse de la reproducción real. - Cada
<video>o<audio>copiado consrcdebe tener atributos de temporización de HyperFrames antes del lint:data-startydata-duration, másdata-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 dejespreload="none"en los medios; usametadataoauto. - Resuelve los tokens de fuente de la fuente antes de la validación. Si preservas fuentes fuente personalizadas, agrega reglas
@font-facepara archivos de fuente locales/capturados. Si usas alternativas del sistema, reemplaza declaraciones tokenizadas comofont-family: var(--f-body)con pilas concretas seguras para renderizar comosystem-ui, sans-serifoui-monospace, monospace; no dejesvar(...)como valor de font-family. - Audita la fuente en busca de movimientos de página atípicos, especialmente comportamiento impulsado por desplazamiento, rueda, táctil, estado hash, redimensionamiento o un bucle requestAnimationFrame. Trata los viewports fijos con capas "mundiales” traducidas/escaladas, paralaje, paneles fijos, desplazadores horizontales, líneas de tiempo limpiadas por desplazamiento, ajuste de secciones y cámaras de zoom a elemento como comportamiento de la fuente. El desplazamiento es a menudo el desencadenante de transición de la fuente, así que preserva la transición extrayendo sus paradas de progreso, easing y estados de cámara/enfoque, luego reubica ese movimiento en la navegación de la presentación a través de posiciones de 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; calcular transformaciones de cámara por diapositiva no es suficiente. 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 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) oobject-fit: containdentro de un marco estable. Usaobject-fit: coversolo cuando la fuente lo haya hecho, o para miniaturas intencionalmente decorativas/de 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.