Communitygithub.com

m2promario-afk/hyperframes-M2PRO

Convierte texto arbitrario (artículos, notas, temas, resúmenes) en un video explicativo sin rostro: no hay sitio web ni grabación que capturar, los elementos visuales se inventan por escena (tipografía, gráficos abstractos, diagramas, visualización de datos).

¿Qué es hyperframes-M2PRO?

Este skill transforma cualquier texto en un video explicativo animado y sin rostro, ideal para explicar conceptos, desglosar temas, crear tutoriales o listicles. A diferencia de un video promocional de producto, aquí no se captura ningún sitio web ni activo real: cada escena se construye desde cero con tipografía, gráficos abstractos, diagramas y visualizaciones de datos. Está diseñado para HyperFrames y orquesta todo el pipeline: desde la configuración del proyecto y el diseño del sistema hasta la generación de storyboard, guion, audio y la renderización final. Soporta múltiples voces (HeyGen, Kokoro), música de fondo y efectos de sonido, y ofrece un flujo de trabajo colaborativo o autónomo con pasos verificables y compuertas de revisión. Es el skill correcto cuando se quiere explicar un tema a partir de texto, sin producto ni sitio web que capturar; en caso de duda, deriva a `/hyperframes` para elegir la ruta adecuada.

Compatible con~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/m2promario-afk/hyperframes-M2PRO/tree/HEAD/skills/faceless-explainer

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación

Instalación del plugin: Antes de ejecutar comandos de configuración o actualización, sigue las reglas de instalación del plugin cuando este skill esté dentro de un plugin de HyperFrames. Las instalaciones independientes siguen las instrucciones de actualización que aparecen a continuación.

Primero, mantén este skill actualizado — confirma con el usuario antes de ejecutar: npx hyperframes skills update faceless-explainer. Es una operación rápida sin cambios si todo está al día; de lo contrario, actualiza este skill junto con los skills del dominio central de los que depende, antes de que confíes en ellos.

media-use: Antes de obtener audio/imágenes/logos, ejecuta /media-use para resolver BGM/SFX/imágenes del catálogo de HeyGen y los logotipos de marca de sus fuentes oficiales. Ejecuta --adopt primero para registrar los activos existentes. Consulta el skill /media-use. Cuando la aplicación anfitriona proporcione sus propias herramientas de música o efectos de sonido, úsalas para la música y los efectos.

Explicador Sin Rostro para HyperFrames

Usa este skill para convertir un cuerpo de texto en un video explicativo: elige un sistema de diseño, planifica una historia didáctica y constrúyela fotograma a fotograma en HyperFrames. Sin rostro significa que cada elemento visual se inventa aguas abajo — no hay paso de captura ni inventario de activos reales.

La puerta de entrada es /hyperframes. Tú eres el orquestador. Ejecuta cada paso, verifica su compuerta y solo entonces continúa. Este skill es para explicar un tema a partir de texto, sin producto ni sitio web que capturar. Cualquier otra intención, un simple "haz un video" o cualquier incertidumbre → lee /hyperframes primero — la capa de intención posee cada decisión de ruta, y una creación nueva que llegue aquí sin BRIEF.md pasa por ella de todos modos (regla inicial de Configuración).

Eres el orquestador. Trabaja en videos/<proyecto>/. Ejecuta los pasos en orden y pasa cada compuerta antes de continuar. Los pasos con compuerta de usuario son el Paso 0, el Paso 3 y el Paso 6. Lee ../hyperframes/references/brief-contract.md antes del Paso 0 — define los tipos de compuerta y cómo el flujo/storyboard de BRIEF.md derivan el modo que gobierna las compuertas de los Pasos 3/4/6. Haz tú mismo cada paso, excepto el Paso 5, donde despachas un sub-agente por fotograma. No pongas reglas de diseño o movimiento aquí; esas viven en el sub-agente frame-worker, en ../hyperframes-animation/rules/ local de este skill + ../hyperframes-animation/blueprints/, y hyperframes-creative.

Flujo de trabajo: Paso 0 configuración → hyperframes.json; Paso 1 resumen → capture/extracted/; Paso 2 sistema de diseño → frame.md; Paso 3 storyboard/guion → STORYBOARD.md y SCRIPT.md; Paso 3.1 audio → audio_meta.json; Paso 4 diseño visual → STORYBOARD.md enriquecido; Paso 5 fotogramas → compositions/frames/NN-*.html e index.html; Paso 6 renderización final → renders/video.mp4.


Paso 0: Configuración

Objetivo: Entrar con un resumen confirmado, crear el proyecto HyperFrames y hacer que el resumen sea duradero.

El resumen es confirmado por la capa de intención, no por preguntas hechas aquí. Regla inicial, en orden: (1) BRIEF.md existe → léelo y no preguntes nada — el resumen está resuelto, y su flujo/storyboard derivan el modo (contrato del resumen § 1). (2) No hay BRIEF.md pero el proyecto existe (hyperframes.json / STORYBOARD.md en disco) → reanuda desde el frontmatter del storyboard y las preferencias registradas; nunca vuelvas a interrogar un proyecto a medio construir. (3) Ni lo uno ni lo otro — una solicitud de creación nueva que llegó aquí directamente → lee /hyperframes y ejecuta su capa de intención (references/intent-interview.md): verifica recetas y valores predeterminados recordados, realiza las preguntas de esta ruta (../hyperframes/references/routes/faceless-explainer.md) y devuelve el resumen bloqueado. Las solicitudes de edición omiten todo esto — ve a hacer la edición.

Inicializa solo si falta hyperframes.json. Nombra <proyecto> a partir del tema en kebab-case, por ejemplo compound-interest-explained; nunca uses el nombre del espacio de trabajo ni una marca de tiempo.

npx hyperframes init "videos/<proyecto>" --non-interactive --example=blank --skill=faceless-explainer — init verifica los skills instalados contra los últimos en GitHub y actualiza el conjunto global si alguno está desactualizado.

Después de init, que <PROJECT_ROOT> sea videos/<proyecto> y ejecuta cada comando de ruta relativa con ese directorio como su directorio de trabajo. En los comandos a continuación, . significa <PROJECT_ROOT>; nunca escribas .media, capture o archivos de salida en el directorio de la llamada.

Escribe BRIEF.md inmediatamente después de init (nunca antes — init rechaza un directorio no vacío): el resumen bloqueado de la capa de intención, con la forma según ../hyperframes/references/brief-format.md. Resuelve <MEDIA_DIR> como el directorio del skill /media-use instalado. Luego registra cada respuesta respaldada por preferencias con node <MEDIA_DIR>/scripts/prefs.mjs record --hyperframes . (brief-format.md nombra el subconjunto). Si la capa de intención adoptó una receta, ejecuta node <MEDIA_DIR>/scripts/recipe.mjs use --hyperframes . --name <nombre>; copia su frame.md en el proyecto (el Paso 2 se omite entonces) y devuelve los esqueletos desde los que se redactan los borradores del Paso 3. Una receta completa respuestas, no aprobaciones; las compuertas de revisión aún se ejecutan.

Muestra el estado de inicio de sesión antes de continuar más allá de la Configuración — ejecuta npx hyperframes auth status y transmite su salida textualmente. Informa si la voz/BGM usarán HeyGen o motores locales y, cuando no haya sesión iniciada, cómo iniciarla. Aplica una rama:

  • Colaborativo: espera a que el usuario inicie sesión o elija explícitamente offline / go.
  • Autónomo: indica el estado y continúa con los motores locales disponibles.

No omitas silenciosamente una capacidad requerida cuando no exista un proveedor fuera de línea; señala el bloqueo. No incluyas esta decisión en otra pregunta ni escribas claves en un .env por repositorio. Propiedad de la autenticación y alternativas fuera de línea: /media-use references/setup-providers.md § Proveedores.

Compuerta: hyperframes.json y BRIEF.md existen; las respuestas respaldadas por preferencias fueron registradas (contrato del resumen § 2); se mostró el estado de inicio de sesión (con sesión iniciada, o continuando fuera de línea).


Paso 1: Resumen (sin captura)

Objetivo: Incorporar el texto del usuario al proyecto como fuente de información. No hay captura de sitio web ni activos reales — esto es un explicador sin rostro.

Guarda la entrada completa del usuario textualmente, luego crea el paquete de captura sintético a mano:

  • capture/extracted/visible-text.txt — el artículo / notas / tema / resumen completo, textualmente. Esta es la fuente de información, no una plantilla de historia (el Paso 3 la reforma).
  • capture/extracted/tokens.json — { "title": "", "description": "", "colors": [], "fonts": [] }. Rellena title/description del resumen. Deja colors/fonts vacíos a menos que el usuario haya dado explícitamente colores o fuentes de marca — entonces agrégalos (el preset de diseño proporciona una paleta completa de todos modos).

Si el usuario pegó un guion o quiere que se mantenga su redacción, guárdalo textualmente como user_script.txt; VO_MODE (textual o reestructurado) proviene de BRIEF.md — la capa de intención lo pregunta cuando llega un guion. Pregunta una vez aquí solo si el resumen carece de ello, y almacena la respuesta para el Paso 3.

No ejecutes npx hyperframes capture (no hay URL). No crees asset-descriptions.md ni poblar capture/assets/ — los elementos visuales sin rostro se inventan en los Pasos 4-5, no se capturan. La única excepción: si el usuario proporcionó una imagen real, colócala bajo public/<nombrebase> y anótala para el Paso 3.

Compuerta: capture/extracted/visible-text.txt y capture/extracted/tokens.json existen; puedes enunciar el tema y la audiencia del explicador en una frase clara.


Paso 2: Sistema de Diseño

Objetivo: Elegir un preset de fotograma enviado; un script lo convierte en el frame.md de este video + la máscara de subtítulos.

Cuando BRIEF.md nombre un style_preset — el usuario lo eligió visualmente de las muestras en la capa de intención — úsalo; la decisión es tuya solo cuando el resumen está en silencio. Luego tomas la única decisión — qué preset: lee ../hyperframes-creative/references/design-spec.md y explora ../hyperframes-creative/frame-presets/; elige el preset cuyo aspecto se adapte mejor al tema, tono y audiencia. Luego ejecuta:

node <SKILL_DIR>/scripts/build-frame.mjs --preset <nombre> --hyperframes .

El script hace el resto de forma determinista: copia el FRAME.md del preset → frame.md y lo remezcla sobre cualquier token de marca en capture/extracted/tokens.json (colores de marca mapeados a las claves de color del preset por rol; las fuentes de visualización y cuerpo del preset reemplazadas por las de la marca), copia la máscara de subtítulos del preset a .hyperframes/caption-skin.html, y se autovalidada (sale 1 en un mapeo roto). Procede tan pronto como salga 0 — sin edición manual de la especificación.

Un explicador sin rostro generalmente no tiene colores/fuentes de marca (tokens.json colors/fonts vacío) → el script mantiene la paleta propia del preset, un diseño completo y entregable. Solo cuando el usuario nombró colores/fuentes de marca, agrégalos a tokens.json antes de ejecutar, y solo ajusta frame.md a mano después si un mapeo realmente lo necesita.

Compuerta: build-frame.mjs salió 0 — frame.md existe de un preset nombrado, y (cuando el preset incluye uno) .hyperframes/caption-skin.html existe como fuente de la máscara de subtítulos; el preset elegido fue registrado como preferencia (--key style_preset --workflow <este flujo>, contrato del resumen § 2).


Paso 3: Storyboard y Guion

Objetivo: Convertir el texto en un plan didáctico aprobado fotograma a fotograma.

Lee ../hyperframes-creative/references/story-spine.md (lenguaje de gancho, valor antes de evidencia, storyboard como propuesta, elementos visuales trazables a la fuente), references/story-design.md, ../hyperframes-animation/blueprints-index.md, ../hyperframes/references/storyboard-format.md y ../hyperframes/references/script-format.md. Úsalos para escribir STORYBOARD.md y, cuando se necesite narración, SCRIPT.md. Establece la duration: del frontmatter a partir del length del resumen — una expectativa aproximada; el ensamblaje informa dónde cae el corte en relación con ella.

Usa story-design.md para la estructura del explicador (concepto / cómo se hace / listicle / historia), estrategia de gancho, técnicas de claridad, ritmos emocionales, el mapeo de enumeración de tipos y VO_MODE. La secuencia del video proviene del diseño narrativo, no del orden de párrafos del texto de entrada — reordena, fusiona, omite, comprime. Como guía suave, consulta el menú rol→blueprint en ../hyperframes-animation/blueprints-index.md: para cada ritmo, escribe la voz en off en la forma que implica su blueprint candidato y etiqueta ese candidato con la blueprint: id cuando encaje. La verdad didáctica aún decide qué ritmos existen — nunca fuerces un ritmo para que encaje en un blueprint, y nunca inventes un ritmo solo porque hay una forma probada disponible. Los elementos visuales sin rostro se inventan aguas abajo, por lo que los fotogramas no llevan un inventario de activos: deja asset_candidates vacío a menos que el usuario haya proporcionado una imagen real en public/<nombrebase>. Usa los campos exactos requeridos de las referencias de storyboard y guion.

Después de redactar, ejecuta la pasada de plan del bucle de revisión — ../hyperframes/references/review-loop.md § 1: presenta el plan como una propuesta y haz las dos preguntas — aprobar o cambiar, y bocetos primero (recomendado) o saltar. La retroalimentación llega como respuesta de chat; itera hasta que sea aprobado. Esta es una compuerta de punto de control (contrato del resumen § 1): en modo autónomo no hay nada que preguntar — publica el mismo resumen como aviso y continúa; los bocetos se integran en la compilación, y la vista previa final con su única pregunta llega en el Paso 6.

Compuerta: STORYBOARD.md existe, cada fotograma tiene los campos narrativos requeridos, SCRIPT.md existe cuando se necesita narración, y el usuario aprobó el plan fotograma a fotograma (autónomo: el resumen fue publicado como aviso).


Paso 3.1: Audio

Objetivo: Generar narración, tiempos de palabras, música y metadatos de audio a partir del guion aprobado.

Inicia el audio después de la aprobación del Paso 3. Ejecútalo en segundo plano, luego continúa al Paso 4. (El estado de inicio de sesión ya se mostró en el Paso 0; el motor retrocede automáticamente).

Elige la voz de narración a partir de la solicitud del usuario antes de invocar. Si la solicitud nombró una voz, género o tono, elige un id de voz que coincida y pásalo con --voice <id>. El valor predeterminado de la tubería es Marcia (femenino) en HeyGen / am_michael en Kokoro — así que una solicitud como "una voz masculina" se ignora silenciosamente a menos que pases la bandera. Los ids de voz son específicos del proveedor; resuelve contra cualquier proveedor que haya seleccionado el estado de inicio de sesión del Paso 0: HeyGen (con sesión iniciada) a través de node <MEDIA_DIR>/audio/scripts/heygen-tts.mjs --list (o GET /v3/voices?engine=starfish); Kokoro (fuera de línea) a través de la tabla de voces en <MEDIA_DIR>/audio/references/tts.md (prefijos am_/bm_ masculino, af_/bf_ femenino). Cuando el usuario no expresó preferencia, recurre a la voz recordada (contrato del resumen § 2) antes del valor predeterminado de la tubería, y di cuál usaste; omite --voice solo cuando ninguno nombra una. Cuando el usuario eligió explícitamente una voz en esta ejecución, regístrala (prefs.mjs record --key voice).

node <SKILL_DIR>/scripts/audio.mjs --script ./SCRIPT.md --storyboard ./STORYBOARD.md --hyperframes . --out ./audio_meta.json --voice <id-de-voz> &

El script de audio maneja la narración, los tiempos de palabras, la búsqueda de BGM de la biblioteca de música de HeyGen y los metadatos de sincronización. El estado de ánimo de BGM proviene del campo music: del storyboard. Esto usa la API de Audio de HeyGen para la recuperación, no para la generación, y la misma credencial ~/.heygen que TTS. Para detalles del proveedor, lee ../media-use/audio/references/tts.md. Cuando las herramientas propias de la aplicación anfitriona proporcionen la música o un efecto de sonido, coloca el archivo bajo assets/ y listalo en el archivo audio_meta.json marcado "source": "host": música como bgm { "path": "assets/…", "source": "host" } con music: none en el storyboard; un sonido como una entrada sfx { "frame": <n>, "file": "assets/…", "offset_s": 0, "duration_s": <su duración>, "source": "host" }. Cada pasada de audio mantiene estos; un fotograma con un sonido del anfitrión no obtiene una señal buscada.

Si no hay narración y no hay SCRIPT.md, salta la generación de voz. BGM aún puede ejecutarse si el storyboard tiene un estado de ánimo musical.

El marcador canónico de silencio total (compartido entre los flujos de trabajo que reutilizan este modelo de audio): music: none en el bloque YAML superior de STORYBOARD.md, sin SCRIPT.md, y sin señales sfx: ni audio del anfitrión. Esa combinación marca el proyecto como silencioso.

Skills relacionados