eyaprak/skills

HyperFrames Studio

Generas una de las tres salidas de HyperFrames: un hook horizontal (intro), un shorts vertical o una slidedeck 16:9. Las tres comparten el mismo motor, las fuentes, la fórmula de derivación de marca y los ajustes de render; solo cambian la relación de aspecto, si hay subtítulos y el encuadre. Primero determina el modo, luego copia y edita la plantilla correspondiente del paquete. Sin composición desde cero.

Todo el motor está en references/engine.md; las diferencias por modo están en references/{hook,shorts,slidedeck}.md; la transcripción y el re-codificado están en references/transcription.md. Las plantillas iniciales están en assets/templates/<mode>/ y vienen listas para usar con una paleta neutra índigo (--brand:#6366f1); luego se colorean con el color del usuario.

Paso 0 — Determina el modo (P0, gana la primera coincidencia)

1. Modo explícito en la solicitud/argumentos — mod:hook|shorts|slidedeck o una expresión clara (intro/hook → hook; shorts/vertical/reels → shorts; slidedeck/presentación/slide → slidedeck). Bloquéalo.
2. Nombre de la carpeta — si la carpeta de trabajo/destino termina en -hook / -shorts / -slidedeck, ese es el modo.
3. Intención de aspecto — "entrada horizontal" → hook; "vertical" → shorts; "presentación/deck" → slidedeck.
4. Si no es ninguno pregunta con AskUserQuestion: "¿Qué vamos a generar? Hook (horizontal 16:9 intro) / Shorts (vertical 9:16) / Slidedeck (16:9 presentación)".

Una vez que el modo está claro, lee el archivo references/<mode>.md correspondiente y sigue sus pasos.

Reglas permanentes — integradas en cada ejecución, no preguntes, no te saltes

1. Fuentes auto-hospedadas — Manrope + JetBrains Mono, 4 fonts/*.woff2 locales, con unicode-range para turco. Nunca uses fuentes CDN/integradas (se perderían los glifos turcos). Cada plantilla las incluye junto con OFL.txt; copia fonts/ junto con la composición.
2. Solo assets/ local — nunca uses ../assets o rutas hacia directorios superiores (la vista previa/render no puede acceder a directorios superiores, los medios quedarían vacíos).
3. Tema oscuro + un solo color de marca — fondo casi negro, texto casi blanco; cada acento se deriva de --brand (engine.md §4).
4. La transcripción la proporciona el usuario — en hook/shorts la transcripción es entrada del usuario. Si no se pegó junto con la solicitud y no hay un transcript.txt en la propia carpeta de este proyecto, detente y pídelo al usuario — antes de montar la composición, antes de pasar a AskUserQuestion. No asumas que una transcripción encontrada en otra carpeta/proyecto pertenece a este clip (aunque tenga el mismo nombre) ni ejecutes transcribe por tu cuenta. Si el usuario dice explícitamente "extráelo", sigue transcription.md. Detalle: transcription.md §Obtener la transcripción.
5. Re-codifica primero los clips RAW — node scripts/reencode.mjs <clip>.mp4 (keyframes densos); utiliza el archivo -src.mp4 re-codificado como referencia, no el archivo original (transcription.md).
6. Línea de tiempo determinista — gsap.timeline({paused:true}), window.__timelines["main"]=tl, posiciones en segundos literales; sin Math.random/Date.now/repeat:-1/setTimeout (engine.md §8, §11).
7. Sin vista de patrocinador — sin logotipo fijo en esquina; la marca es una animación temporizada (o, opcionalmente, un topmark centrado).
8. Render solo para hook + shorts — la entrega de estos dos modos es un MP4; ajustes predefinidos (por defecto, se pueden sobrescribir): 1080p · 60fps · 16 Mbps · calidad alta, fijado [email protected]. Slidedeck NO se renderiza y no se pregunta por render — la entrega del deck es presentation/presentation.html (excepción si el usuario pide explícitamente un video; regla: slidedeck.md).
9. Cubre la fuente completa — data-duration = duración real del clip/contenido; en hook/shorts verifica después del render con ffprobe, en deck confirma la duración mediante aritmética N × diapositiva.

Paso 1 — Pregunta las elecciones reales una sola vez (AskUserQuestion, en español)

Resuelve todas las preguntas que se puedan deducir de los argumentos o de la detección del Paso 0. Luego, en una sola llamada a AskUserQuestion, combina las preguntas comunes con las 2–3 preguntas específicas de ese modo (para reducir los viajes de ida y vuelta). La Opción 1 es siempre el valor sugerido/detectado. Si no queda ninguna pregunta, omite la llamada e indica los valores resueltos en un preámbulo de una línea en español.

Preguntas comunes (en todos los modos):

• Color (encabezado "Color") — Opción 1 = hex detectado "(recomendado)" si existe; si no, valor neutro por defecto. 2–3 paletas de ejemplo neutras + Otro = hex personalizado. El tema permanece Oscuro.
• Origen de la plantilla (encabezado "Plantilla") — "Usar la plantilla {modo} inicial del paquete (recomendado)" · si se detecta en el espacio de trabajo, "Clonar mi proyecto anterior -{modo}".

Las preguntas específicas del modo se agregan desde el archivo references/<mode>.md correspondiente (hook: Demo/Logotipos/Cierre · shorts: Marca/Cierre/Miniatura · slidedeck: Diapositivas/Ritmo).

Nunca preguntes: en modo slidedeck, "¿quiero renderizar / generar MP4 / qué salidas generar?". El deck es una presentación HTML; presentation/presentation.html se genera siempre y no se contempla render.

Pregunta siempre: si no hay transcripción en hook/shorts (regla permanente 4). Esta es una solicitud directa anterior a AskUserQuestion — "¿Puedes compartir la transcripción de este clip en formato [MM.SS - MM.SS]?" — porque sin transcripción los {in,out} de los subtítulos, HOOK_END/CLOSE y los límites de las escenas serían inventados.

Paso 2 — Configura (handoff)

1. Copia la carpeta assets/templates/<mode>/ al proyecto de destino (index.html, fonts/, hyperframes.json, meta.json, package.json, assets/; en deck también presentation/ — siempre, sin preguntar). Actualiza el nombre en meta.json/package.json.
2. Siguiendo los pasos de construcción de references/<mode>.md, procesa index.html: conecta los medios, ajusta data-duration a la duración real, aplica la paleta, completa las escenas/subtítulos/diapositivas con el contenido.
3. Verifica: npx --yes [email protected] lint → inspect (en deck también validate) → preview. Extrae fotogramas en los beats clave y haz QA visual (presta atención a las trampas en engine.md §11: posición literal, sin etiqueta de medio en comentarios, WCAG falso positivo, composición raíz única).
4. Entrega — según el modo:
   • hook / shorts → render --quality high --fps 60 --video-bitrate 16M --output "renders/<nombre>.mp4", luego confirma la duración con ffprobe -v error -show_entries format=duration -of default=nw=1:nk=1 renders/<nombre>.mp4; verifica un fotograma intermedio y el flujo de audio. Informa la ruta de salida y la duración directamente.
   • slidedeck → NO hay render. Entrega presentation/presentation.html, proporciona la tabla de dos líneas de salida de slidedeck.md y explica por qué index.html no se abre con doble clic. No hagas ni sugieras render.

Notas de primer uso

• Se requiere Node.js + npx y ffmpeg en el PATH. La cadena de herramientas de HyperFrames se descarga bajo demanda con npx.
• hyperframes transcribe descarga el modelo whisper en el primer uso (grande, tarda minutos); para turco usa medium/large-v3, no .en (transcription.md).
• Las fuentes están bajo licencia SIL OFL 1.1 (fonts/OFL.txt); el skill code está bajo MIT.
• Para detalles internos del motor/CLI/GSAP, difiere a la skill base hyperframes — no los repitas aquí.