adriiita/vertical-video-editing-skill

edición-de-video

Usa este skill cuando tengas un guion aprobado, material de voz/cabeza parlante proporcionado y activos recopilados, y necesites convertirlos en un short vertical (9:16) terminado. Eres el editor principal, no un ensamblador de clips. El estándar es de shorts de calidad de creador (densidad Kallaway / Varun Mayya): cada compás merece atención. La salida genérica de herramientas de IA — cortes uniformes de 1s, fuentes predeterminadas, transformaciones lineales/entrecerradas, un aspecto de plantilla estándar — es un fracaso, no un entregable.

La relación de aspecto predeterminada es 9:16 (1080×1920). Los paquetes de estilo también definen el comportamiento para 16:9 y 1:1, por lo que la misma apariencia se puede reutilizar — pero el ritmo y la gramática del gancho de este skill están escritos primero para el formato corto vertical.

El flujo de trabajo innegociable (nunca saltar, nunca reordenar)

Crear index.html a mano desde cero rompe la recarga en vivo y la estructura del proyecto. Siempre:

1. npx hyperframes init edit dentro de la carpeta edit/ de tu proyecto — crea el andamio (index.html, meta.json, hyperframes.json, CLAUDE.md, package.json).
2. cd edit y modifica los archivos del proyecto generados para construir la edición real. Añade fonts/, assets/sfx/, sub-composiciones en compositions/.
3. npx hyperframes preview (de larga duración — ejecutar en segundo plano) — verifica en el navegador con recarga en vivo. Usa una herramienta del navegador para inspeccionar y capturar pantalla. Confirma el ritmo, diseño, temporización del texto y suavidad de la animación antes de renderizar.
4. npx hyperframes lint / npm run check — corrige cada error; revisa las advertencias.
5. npx hyperframes render — MP4 final.
6. Verifica: ffprobe (dimensiones 9:16, duración, códec) + ffmpeg comprobaciones puntuales de fotogramas contra una hoja de contactos. Ejecuta el script de compuerta incluido (abajo).

Usa la documentación de hyperframes (npx hyperframes docs) como referencia de API/características y las referencias en este skill para el estándar de edición. Si las herramientas de HyperFrames faltan o están rotas, detente e informa al usuario en lugar de crear manualmente una edición genérica.

Requisitos

• HyperFrames — el motor de renderizado, ejecutado mediante npx hyperframes. Este skill es el estándar de edición sobre HyperFrames; no lo reemplaza.
• Node.js (para npx y el script de verificación).
• ffmpeg / ffprobe en el PATH — para síntesis de SFX, mezcla de audio y verificación del renderizado.
• Un paquete de estilo en styles/<style>/FRAME.md (este skill incluye vibe-life como ejemplo práctico y _template como punto de partida — consulta styles/README.md).

Entradas

Trabaja desde una carpeta de proyecto. Un diseño recomendado (adáptalo al tuyo):

tu-proyecto/
├── script.md            # guion aprobado con compases/marcas de tiempo, superposiciones, indicaciones de energía — LA COLUMNA VERTEBRAL
├── voiceover/           # material de voz / cabeza parlante proporcionado (el A-roll)
├── avatar/              # material de cabeza parlante opcional
├── assets/
│   ├── manifest.json    # B-roll recopilado + mapa de activos por compás + notas de derechos
│   └── ...              # el material recopilado
└── edit/                # TU salida (creado por `npx hyperframes init edit`)

Lee (no edites) el guion, el material de voz/avatar y el manifiesto de activos. Elige el paquete de estilo que debe usar el video (styles/<style>/FRAME.md).

Salidas

Escribe todo dentro de la carpeta edit/ de tu proyecto:

• El proyecto de HyperFrames (index.html + compositions/ + fonts/ + assets/sfx/ + assets/master_audio.*).
• El MP4 final renderizado (9:16), verificado.
• edit-report.md — una nota de traspaso: decisiones de edición por compás, activos utilizados (con referencias del manifiesto), SFX/música utilizados, notas de verificación de vista previa/renderizado, y cualquier cosa que hayas marcado para revisión final. Plantilla en references/edit-report-template.md (añadida abajo).

Gramática de edición (lo que significa "profesional" aquí)

Cada elemento a continuación es un control de calidad, no una sugerencia.

El lenguaje visual de la casa es la apariencia editorial — consulta "apariencia-editorial" a continuación. Los fotogramas son páginas diseñadas, no video con texto superpuesto: titulares editoriales mixtos serif-itálica/sans-serif pesada, fondos de papel escénico y rejilla oscura intersticial, la división apilada (B-roll arriba / cabeza parlante abajo) como diseño predeterminado de A-roll/B-roll, superposiciones de barra de resalte con énfasis de color en palabras clave, subtítulos de costura y píldoras de nombre, tarjetas de titular y pilas de tarjetas de IU. Construye cada short a partir de esos diez patrones, temáticos según el paquete de estilo.

• Gancho diseñado (primeros 1–3s): superposiciones de texto en la parte superior, una interrupción de patrón, luego un movimiento hacia adentro del fotograma (por ejemplo, un panel dividido que crece hasta 9:16 completo). Nunca abras con una cabeza parlante estática.
• Estructura A-roll / B-roll: El A-roll (cabeza parlante / VO) es la columna vertebral; el B-roll (clips, capturas de pantalla, gráficos en movimiento) lo cubre y lo puntúa. Corta el B-roll sobre el audio del A-roll, no en silencio.
• Granularidad de cortes: cortes tan rápidos como 0.2s cuando la energía del guion lo exija; nunca cortes metronómicos de 1s. El ritmo sigue el guion.
• Diseños de pantalla dividida: composiciones lado a lado y apiladas, con transiciones deliberadas hacia y desde el fotograma completo. La división apilada con un subtítulo de costura es la caballo de batalla — la cobertura de B-roll a fotograma completo es la excepción.
• Encuadre seguro para rostros: cada vez que una persona está dentro de un panel o recorte, sesga el recorte con object-position para que el rostro quede centrado en el área visible del panel, los ojos en el tercio superior — el valor predeterminado 50% 50% casi siempre es incorrecto para fuentes de cabeza parlante y corta la cabeza. Los movimientos de cámara en un panel con una persona deben mantener el rostro dentro del encuadre durante todo el movimiento. Un rostro descentrado o recortado es un fallo de compuerta. Consulta "apariencia-editorial" §4 "Encuadre seguro para rostros".
• Movimiento de cámara suavizado: zoom y paneos de izquierda a derecha, siempre suavizados, nunca lineales, nunca entrecerrados. Consulta "movimientos-de-cámara" para el contrato anti-jitter.
• Texto cinético / subtítulos: entradas animadas, énfasis en palabras clave (una palabra de acento), superposiciones de subtítulos sincronizadas con la voz.
• Gráficos en movimiento temáticos: tarjetas numéricas, tarjetas de especificación/JSON, llamadas de recuadro delimitador, divisiones de póster, construcciones de gráficos — diseñados sobre el tema del estilo, no genéricos.
• Animación de logotipo / marca denominativa: marcas de marca/producto animadas donde el guion las nombra.
• SFX: silbidos, clics, ascensores, impactos superpuestos en cortes y golpes gráficos — sutiles, mezclados por debajo de la voz. Consulta "sfx-y-audio".
• Estética cohesiva: un tema de color, tipografía consistente, curvas suavizadas, sin elementos de apariencia predeterminada, sin saltos. Todo del paquete de estilo FRAME.md.

Tematización de estilo (obligatorio, antes de diseñar cualquier cosa)

Deriva la identidad visual del paquete de estilo primero — colores, tipo, personalidad del movimiento y lenguaje gráfico provienen de styles/<style>/FRAME.md. Estilo diferente → apariencia diferente. Consulta "tematización-de-estilo" a continuación para convertir FRAME.md en una especificación de diseño frame.md concreta (tokens de paleta, @font-face para fuentes locales, personalidad del movimiento → opciones de suavizado/corte). El ejemplo incluido vibe-life usa una paleta crema/tinta/durazno/mantequilla; Space Grotesk + Instrument Serif italic + JetBrains Mono; movimiento de corte de papel (cortes duros enmascarados por SFX, no fundidos); una palabra de acento serif-itálica por fotograma en una píldora; sombras de tinta planas y duras. Tu propio estilo llena los mismos roles con sus propios tokens.

Reglas estrictas de HyperFrames (si las incumples, el renderizado se rompe)

1. Cada elemento temporizado necesita data-start, data-duration, data-track-index y class="clip" (el framework controla la visibilidad mediante clip).
2. Nunca animes el elemento .clip en sí mismo — el framework es dueño de su visibilidad/transformación. Anima un envoltorio hijo (por ejemplo, .cam, .inner).
3. Las líneas de tiempo deben ser gsap.timeline({ paused: true }) y estar registradas en window.__timelines["main"] (el id coincide con data-composition-id).
4. Solo determinista — sin Math.random(), sin Date.now(), sin búsquedas en red, sin repeat: -1. Los renderizados se muestrean por fotograma y deben ser reproducibles.
5. 9:16 = 1080×1920. Establece #root { container-type: size; } para que cqw/cqh se resuelvan contra el fotograma (1cqw = 10.8px). Tamaño de tipo/gráficos en cqw/cqh, no en vw/vh.
6. Los clips adyacentes de la misma pista no deben tocarse — la precisión de punto flotante hace que 3.2 + 0.35 = 3.5500000000000003, lo que se superpone con un clip que comienza en 3.55 y provoca overlapping_clips_same_track. Deja un espacio o usa duraciones como 0.34. (Adoptado de los problemas de lint de hyperframes-helper).
7. Audio: los videos están en muted con un elemento <audio> separado. Prefiere una pista de audio maestro premezclada (VO + SFX mezclados mediante ffmpeg adelay+amix) sobre muchos elementos <audio> — múltiples pistas causan eco/desincronización. Ponla en un data-track-index alto y dedicado.
8. Densidad: timeline_track_too_dense (muchos elementos temporizados en una pista) es informativo para un piloto corto pero real a escala — divide las escenas en sub-composiciones (data-composition-src="compositions/file.html") para ediciones de larga duración de producción.

Flujo de trabajo

1. Lee el guion como la columna vertebral. Construye un mapa de compases: cada compás/marca de tiempo → A-roll (segmento de VO/avatar) + necesidad de B-roll/MG + superposición en pantalla + corte/cámara/transición prevista + energía. La energía del guion dicta el ritmo; no impongas un ritmo uniforme.
2. Tematiza desde el paquete de estilo. Lee styles/<style>/FRAME.md. Produce la especificación de diseño concreta: tokens de paleta, declaraciones locales @font-face, personalidad del movimiento, lenguaje gráfico. (Consulta "tematización-de-estilo").
3. Reconcilia la cobertura de activos. Cruza referencias con tu manifiesto de activos: qué compases están cubiertos por el material recopilado, cuáles son build-in-editor (tuyos para construir como gráficos en movimiento), cuáles son intercambios alternate. Nunca pongas marcadores de posición/medios sin licencia en un renderizado final — marca las brechas en el informe.
4. npx hyperframes init edit. Anda primero. Luego añade fonts/ (subconjuntos woff2 locales), assets/sfx/, compositions/.
5. Construye la edición compás por compás en index.html (y sub-composiciones para mayor longitud). Aplica la gramática de edición: gancho diseñado, cobertura A-roll/B-roll, cortes no metronómicos, pantallas divididas, movimientos de cámara suavizados, texto cinético, MGs temáticos, animación de logotipo. Anima envoltorios hijos, nunca el .clip.
6. Redacta SFX + audio maestro. Sintetiza SFX libres de derechos con ffmpeg (anoisesrc/aevalsrc/sine) o usa activos autorizados; mezcla VO + SFX en una pista maestra. (Consulta "sfx-y-audio").
7. Previsualiza e inspecciona. npx hyperframes preview en segundo plano; abre en el navegador; captura pantalla de los compases clave; confirma ritmo, diseño, temporización del texto y suavidad del movimiento. Corrige antes de renderizar.
8. Lintea. npm run check / npx hyperframes lint --verbose. Corrige todos los errores; revisa las advertencias (nota los falsos positivos conocidos — por ejemplo, advertencias de contraste WCAG muestreadas en marcas de tiempo donde una tarjeta de alto contraste está oculta).
9. Renderiza. npx hyperframes render → MP4.
10. Verifica con el script de compuerta. Ejecuta node scripts/verify-render.mjs <ruta-al-mp4> — comprueba 9:16, duración esperada, h264/yuv420p, audio presente. Luego ffmpeg comprobaciones puntuales de fotogramas en una hoja de contactos y revisión visual contra la vista previa.
11. Escribe edit-report.md y establece el estado (hecho / en_revisión / bloqueado). Adjunta el MP4 + la hoja de contactos.

Ejecuta la compuerta de verificación (el script se envía en scripts/verify-render.mjs junto a este archivo):

node scripts/verify-render.mjs ruta/a/edit/<archivo>.mp4

Opcionalmente, comprueba especificaciones exactas:

node scripts/verify-render.mjs <archivo>.mp4 --duration 12 --tolerance 0.5

Activos faltantes

Si un compás necesita un activo que tu assets/ no tiene:

1. Verifica primero en el manifiesto las filas alternate o build-in-editor — los compases de gráficos en movimiento personalizados son tuyos para construir, no un bloqueo.
2. Si realmente falta y se puede obtener rápidamente de manera lícita y directa, obténgelo tú mismo y registra la procedencia en edit-report.md.
3. De lo contrario, enumera el compás/marca de tiempo exacto, la necesidad del activo y la acción de edición prevista en el informe, pide al usuario que lo proporcione y continúa con los compases que puedas terminar. Nunca renderices un marcador de posición que no puedas licenciar.

Verificación (obligatoria antes de la entrega)

• Capturas de pantalla de la vista previa: fotogramas representativos capturados de la vista previa en vivo, que confirmen el diseño/temporización/movimiento.
• ffprobe: dimensiones exactamente 9:16 (1080×1920), duración esperada (±tolerancia), h264 / yuv420p, flujo de audio presente. El script de compuerta lo aplica.
• Comprobaciones puntuales de fotogramas: ffmpeg extrae fotogramas a lo largo de la línea de tiempo en una hoja de contactos; confirma que cada técnica requerida se renderiza en el estilo y coincide con la vista previa.
• Comprobación de rostros: en cada captura de pantalla de vista previa y fotograma de hoja de contactos que contenga una persona, el rostro completo es visible y está centrado en su panel (no recortado por una costura, subtítulo, borde o movimiento de cámara). Falla la compuerta y reencuadra si no es así.
• Derechos: ningún medio sin licencia/marcador de posición en el renderizado; cualquier cosa que necesite una verificación de licencia final se señala en el informe.
• Registro de cambios de diseño: cualquier desviación de la especificación de estilo o los patrones de apariencia editorial (nuevo diseño, colores/tipo cambiados, movimiento modificado) debe registrarse en edit-report.md bajo "Decisiones de diseño", con el motivo. Los cambios visuales están bien; los cambios visuales silenciosos no.

Créditos y procedencia

Este skill investigó la documentación de hyperframes, github.com/robonuggets/hyperframes-helper, y fotogramas de referencia de shorts de calidad de creador, y luego fue más allá. Consulta "procedencia-estándar" a continuación para el desglose. Resumen:

• Adoptado de hyperframes-helper / HyperFrames: modelo HTML como fuente de verdad; atributos de temporización data-* + class="clip"; líneas de tiempo en pausa en window.__timelines; suavizados GSAP power2/power3.out; estilo de subtítulos con brillo blanco; énfasis SVG subrayado; la lista de problemas de lint (precisión de superposición flotante, solo determinista, video silenciado más audio, etc.).
• Añadido aquí: un sistema completo de movimiento de cámara suavizado con un contrato explícito anti-jitter; gramática de formato corto 9:16 (ganchos diseñados, cortes no metronómicos por debajo de 0.2s, transiciones de dividido a fotograma completo); un pipeline de tematización de estilo de FRAME.md → especificación de diseño concreta; síntesis de SFX libres de derechos + disciplina de pista maestra única premezclada; y una compuerta de verificación de renderizado (afirmaciones ffprobe + comprobaciones puntuales de hoja de contactos).

---

Apéndice — Biblioteca de Referencia (en línea)

La fuente de creación mantiene estos como archivos separados en references/; están incluidos aquí para que el skill sea un único archivo SKILL autónomo.

…

[truncado para traducción]