Communitygithub.com

GuilhermeGongora/VideoEditor

Crea un vídeo educativo vertical (Shorts/TikTok/Reels) al estilo 3D limpio del canal Scientia, completo y listo para publicar: investiga el tema, escribe el guion, genera la narración, monta las escenas 3D con Remotion + Three.js, genera 2 miniaturas, renderiza y revisa. Úsalo cuando el usuario pida un vídeo explicando un tema (“explica la 6×1”, “haz un vídeo sobre…”) o diga “/nuevo-explicativo”.

¿Qué es VideoEditor?

Este skill automatiza la creación completa de vídeos educativos verticales (formato Shorts/TikTok/Reels) al estilo 3D limpio del canal Scientia. Está diseñado para agentes de IA como Claude Code o Codex, y funciona en entornos Node.js con Remotion, Three.js y edge-tts. El flujo comienza investigando el tema en fuentes web actuales (como Agência Brasil o Senado), luego genera un guion estructurado en JSON con 7 escenas, metáforas visuales y un gancho en forma de pregunta. Después produce la narración con la voz aprobada del canal, crea las escenas 3D mediante componentes React/Three.js, renderiza el vídeo final (MP4) y genera dos miniaturas para la publicación. Incluye la copia automática a Google Drive y la subida a GitHub para evitar conflictos. El skill sigue una referencia de calidad aprobada por el usuario y evita el estilo anterior “Ludificando” (fondo gris, muchos muñecos, duración larga). Es ideal para creadores de contenido educativo que quieran producir vídeos consistentes, sin intervención manual en medio del proceso.

Compatible con~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/GuilhermeGongora/VideoEditor/tree/HEAD/.claude/skills/novo-explicativo

Preguntar en tu IA favorita

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

Documentación

Vídeo explicativo 3D

Entrega completa, sin que el usuario lo pida: out/<slug>.mp4 (ya termina con el cierre de la marca) + thumbs/<slug>-1.png y -2.png + out/<slug>-legenda.txt (leyenda del post con fuentes y hashtags). En el PC del usuario, npm run explicar también copia todo a Google Drive (G:\Mi Unidad\Scientia\Posts\<fecha> · <slug> · <título>\: video.mp4, thumb-1/2.png, legenda.txt, fuentes.txt). Si aparece "No encontré el Drive", muéstrale al usuario los comandos de montaje que el script imprime. El usuario solo escribe el tema; no te detengas a mitad para preguntar lo que puedas decidir solo.

REFERENCIA DE CALIDAD (decisión del usuario, 16/10/2026): el vídeo del pago por proximidad. videos/aproximacion/roteiro.json + src/explicativo/videos/Aproximacao.tsx. Lee los DOS ANTES de empezar y copia la receta de references/referencia.md. Los vídeos hechos en el "estándar Ludificando" (fondo gris con estanterías, desenfoque, muchos muñecos, 80–90 s) fueron REPROBADOS — no vuelvas a ellos. Después lee references/ganchos.md (antes del guion) y references/estilo.md + references/biblioteca.md (antes de las escenas). references/ludificando.md es solo fuente de ideas, no una regla.

1. Investigar (obligatorio)

  • Todo lo que sea actual (ley, número, cargo, plazo) proviene de una búsqueda en web hecha AHORA, en 2+ fuentes confiables (Agência Brasil, Senado/Câmara, IBGE, g1, Folha…). Nada de números de memoria.
  • Anota las fuentes en fuentes dentro del guion. Si las fuentes discrepan, usa la más oficial y dilo.
  • Separa lo que es hecho de lo que es proyección/opinión ("el Dieese calcula…", "la CNI dice…").

2. Guion → videos/<slug>/roteiro.json

Receta del pago por proximidad: ~60 s, 7 escenas, 18–30 palabras por escena (~170–190 palabras en total), UNA idea por escena, explicación en secuencia lógica (cada escena lleva a la siguiente: "Por eso…", "Entonces…", "Si alguien…"). chip = nombre corto del capítulo en MAYÚSCULAS ("LA ENERGÍA", "MUY CERCA", "¿Y SI LO COPIAN?").

  • Gancho = número fuerte + pregunta ("Tres de cada cuatro compras… ¿Pero cómo un tarjeta sin batería puede pagar algo?"). Última escena = la información práctica que la persona se lleva (ej.: el límite sin contraseña).
  • "Los dos lados" y "cuidado/estafa" solo entran si el tema LO PIDE (polémica real, estafa real) — no son obligatorios.
  • 1.ª frase = el gancho, SIEMPRE una pregunta (regla del usuario) que la persona quiere ver respondida, con el hecho fuerte dentro o justo después. Ej.: "¿Cómo una tarjeta sin batería puede pagar?". Nada de "hola".
  • Frases cortas, como si hablaras con un amigo. Número escrito con dígitos ("75 votos").
  • pronuncia para lo que la voz pueda leer mal (siglas, "6×1", decimales "26,8").
  • Última escena: CIERRE — la información práctica final / respuesta a la pregunta del gancho. Prohibido (regla del usuario): pedir comentario, like, "guarda", "sigue", "comenta X y te mando…" — ni en el habla ni en la pantalla. Las fuentes quedan solo en la descripción del post. Después de la última frase solo viene el cierre de la marca (automático).
  • Frases de 6–14 palabras, dichas con calma (la narración es frase a frase, con pausa en cada coma y punto).
  • NO existe más cta en el guion: el cierre muestra solo la marca.
  • sons: el estándar hace solo impacto en el 1.er cuadro, swoosh/whoosh en los cambios de escena, "pop" en la tarjeta de número, "tick" en anotaciones/píldoras y una subida entrando al cierre. Sin música de fondo (la referencia no tiene; solo activa con "musica": "sfx/bed-scientia.mp3" si el usuario lo pide). Escribe 2–3 acentos en palabras clave (con moderación): "sons": {"acentos": [{"palavra": "75", "cena": "aprovado", "som": "sfx/ding.wav", "volume": 0.5}, {"palavra": "desliga", "cena": "liga", "som": "sfx/boom.wav", "volume": 0.5}, {"palavra": "relógio", "cena": "agora", "som": "sfx/riser.wav", "pico": 1.49, "volume": 0.35}]}. Sonidos listos en public/sfx/: boom (choque), ding (número/revelación), pop (chasquido), riser (suspenso, usa pico), whoosh/swoosh. La palabra es la que está escrita en fala (no la de pronuncia). Puedes cambiar cualquier sonido por el de la biblioteca del usuario (public/soundeffects/catalog.md) — musica, transicao (lista alterna), aparecer, dado, abertura, final; null lo desactiva.
  • composicao = nombre del componente (ej.: Escala6x1).
  • marca = "SCIENTIA · <tema corto>" (el canal se llama Scientia).
  • voz = { "principal": "masculina", "alternar": "nao" } — NO pongas velocidade en el guion (viene de voz.json, hoy 1.08).
  • post = leyenda de Instagram/TikTok (se convierte en out/<slug>-legenda.txt): { "gancho": "<hecho fuerte + pregunta> 📌", "pontos": [3 frases cortas, sin punto final, con números], "fuentes": ["Agência Senado", "IBGE", …solo los nombres], "hashtags": ["tema", "asunto", …hasta 5, sin #] } (#scientia se añade sola). Mismo tono del vídeo: lo que cambia para la persona, sin opinión. Un emoji como máximo.
  • thumb = portada del vídeo (ver paso 6): { "titulos": [2 opciones], "cena": "<id de la escena de fondo>", "quadro": <cuadro de la escena>, "descer": 330, "zoom": 1.45 }.

3. Narración

npm run narrar -- <slug> → public/explicativo/<slug>/narracao.wav + tempos.json (tiempo de cada palabra, proveniente de la propia voz). Voz neural de edge-tts (internet); sin internet cae en la voz local Kokoro. LA VOZ DEL CANAL queda en voz.json (motor, voces elegidas por el usuario, velocidad). Nunca elijas ni cambies voces, motor o IDs por tu cuenta — eso es gusto del usuario. En el guion, el campo voz solo define:

  • "principal": "masculina" — siempre. La voz aprobada del canal es Antonio (Microsoft), la de los vídeos 6×1 y pago por proximidad. La femenina Thalita Multilingual sonó a portugués de Portugal (vídeo de la urna) y fue descartada. Nunca uses voces "Multilingual". Solo usa femenina si el usuario lo pide.
  • "alternar": "cenas" — las escenas se turnan entre las dos voces (dúo). Estándar: "nao".
  • Si el usuario se queja de la voz: muéstrale npm run vozes (Microsoft) / npm run vozes -- eleven y npm run vozes -- usar <id> femenina|masculina.
  • Escribe el habla para el OÍDO — es lo que más cambia la entonación de la voz sintética:
    • frases cortas (6–14 palabras), comas donde se respira, nada de paréntesis o siglas sin pronuncia;
    • pregunta retórica cada 2–3 escenas ("¿Y quién ya pagó?") — la voz sube en el "?" y cobra vida;
    • contraste y giro: "Solo que…", "Pero atención:", "Y hay más:";
    • número importante solo al final de la frase ("Fueron 75 votos a 1.") o repetido ("¡Once días!");
    • evita frases largas llenas de comas y listas de 4+ elementos (la voz se vuelve monótona).
  • La narración estándar es la de la referencia: frase a frase, pausa de 0,12 s en la coma y 0,32 s en el punto, 0,45 s entre escenas, Antonio a 1.08. NO cambies a "estilo": "continuo" sin que el usuario lo pida.
  • Para probar la voz local más expresiva (Chatterbox en la GPU del usuario): npm run vozes -- comparar <slug>.

4. Escenas → src/explicativo/videos/<Nombre>.tsx

  • Copia la estructura de Escala6x1.tsx: un componente por escena, CENAS_<NOMBRE> y, al final del archivo, export const VIDEO = { id: "<Nombre>", roteiro: roteiro as Roteiro, cenas: CENAS_<NOMBRE> }; (con import roteiro from "../../../videos/<slug>/roteiro.json"). El vídeo se registra solo: NO edites Composicoes.tsx (editarlo causa conflictos en git pull).
  • Al terminar el vídeo, guárdalo en GitHub: git add videos/<slug> src/explicativo/videos/<Nombre>.tsx + commit + push (así el próximo git pull del usuario no se traba).
  • Objeto-héroe (como la terminal + tarjeta): UNO o dos objetos del tema, bien hechos y GRANDES, que aparecen en casi todas las escenas; cada escena muestra una parte/estado de ellos (campo encendiéndose, código en la pantalla, llave saliendo). Muñeco solo como secundario (0–1 por escena, nunca el centro).
  • El kit (three/Kit.tsx, ui/Kit.tsx) es opcional: usa una pieza solo cuando la escena lo pida (ej.: Hemiciclo en una votación). No llenes la escena de píldoras/reglas.
  • Para cada escena, elige UNA metáfora visual del dato (ver references/estilo.md): votos → sillas encendiéndose; horas → cubos desapareciendo; personas → muñecos (1 muñeco = X); dinero → monedas/nómina; plazo → carteles en una línea de tiempo; regla/ley → papel + lista de verificación.
  • Sincroniza con el habla: w("palabra") devuelve el cuadro en que se dice la palabra. El visual cambia EN la palabra (ej.: el número de la tarjeta cambia cuando la voz dice el número).
  • Cámara: cam(pos, look) interpolando posición inicial → final durante la escena (ease(f, 0, dur)).
  • Escenario: el Stage ya viene en modo oscuro (fondo negro, polvo) — igual a la referencia. NO uses cenario="estudio" ni acabamento (desenfoque/bloom) sin que el usuario lo pida.
  • Cámara: distancia 6–8 del objeto, mirando a y ≈ 1; acercamiento lento del 10–15% en la escena (como en Aproximacao.tsx).
  • Encaje: el objeto principal ocupa 40–70% del ancho. Nunca cuadro vacío, objeto minúsculo (línea fina) o un bloque que ocupa toda la pantalla sin referencia. Escala siempre con referencia humana (muñeco al lado) o objeto conocido.
  • Monta objetos del tema con formas simples (libro = cajas finas, cofre = caja + cilindro, celular = caja redondeada con pantalla oscura, balanza = cilindros) — el contexto concreto engancha más que bloques abstractos.
  • Contenido en la franja central de la pantalla (y ≈ 450–1250 px). Arriba = marca/chip/tarjeta; 1300+ = leyenda y botones de TikTok. Nada importante en el borde derecho (iconos de la app).
  • Anota fuentes de números en Callout (sub="FUENTE: …").

5. Revisar cuadros

npm run quadros -- <slug> → out/quadros/<slug>/grade.jpg (un cuadro del final de cada escena). MIRA la cuadrícula. Revisa: nada cortado o detrás de la leyenda; texto legible; objeto principal suficientemente grande; nada superpuesto a la tarjeta/chip; el visual coincide con la frase. Ajusta cámara/escala y repite.

6. Miniatura (portada)

Escribe 2 títulos en thumb.titulos (líneas con \n, destaque entre *asteriscos*):

  • 3 líneas, máximo ~16 caracteres por línea; la última línea es la pregunta/curiosidad destacada.
  • Uno con el hecho/número fuerte ("75 votos a 1."), otro con la pregunta que la persona tiene ("¿Cuándo cambia?").
  • Veraz: nada de prometer lo que el vídeo no muestra.
  • Fondo: la escena más bonita/legible (cena + quadro en que ya está montada). npm run thumb -- <slug> → thumbs/<slug>-1.png, -2.png. MIRA las dos antes de entregar.

7. Renderizar y entregar

npm run explicar -- <slug> → out/<slug>.mp4 + thumbs (3D renderiza sin GPU: ~6–10 min por minuto de vídeo en Codespace). Mira 3–4 cuadros del mp4 final, revisa el final del audio, y entrega con las fuentes. Muéstrale al usuario: el vídeo, las 2 thumbs (dile cuál publicarías y por qué) y pega la leyenda de out/<slug>-legenda.txt lista para copiar. Pide su opinión y registra lo que opine en notas-do-editor.md (sección "Explicativos").

Individual skills in this repo

This repo contains 4 individual skills — each has its own dedicated page.

Skills relacionados