Communitygithub.com

assafkip/claude-video-editor

Pipeline de producción para animaciones matemáticas y técnicas utilizando Manim Community Edition. Crea videos explicativos al estilo 3Blue1Brown, visualizaciones de algoritmos, derivaciones de ecuaciones, diagramas de arquitectura e historias de datos.

¿Qué es claude-video-editor?

Este skill implementa un pipeline completo de producción de video educativo con Manim Community Edition, especializado en animaciones matemáticas, visualizaciones de algoritmos y explicaciones técnicas al estilo 3Blue1Brown. Está diseñado para agentes de IA que necesitan generar explicaciones visuales animadas de alta calidad a partir de descripciones textuales. El skill guía al agente a través de un flujo de trabajo estructurado: Planificar (narrativa, storyboard), Codificar (clases de escenas en Python), Renderizar (manim con distintos niveles de calidad), Unir (ffmpeg) y Revisar (vistas previas). Incluye referencias detalladas para animaciones, objetos matemáticos, diseño visual, ecuaciones LaTeX, gráficos y datos, cámaras 3D, planificación de escenas, y flujo de trabajo de producción. La filosofía central es 'geometría antes que álgebra': el agente debe priorizar la intuición visual sobre las ecuaciones, usando capas de opacidad, pausas estratégicas y un lenguaje visual coherente. Soporta múltiples modos (explicador conceptual, derivación de ecuaciones, visualización de algoritmos, historia de datos, diagrama de arquitectura, explicador de artículos, visualización 3D) y paletas de colores predefinidas. El skill exige que el agente planifique la narrativa pedagógica antes de escribir código, que cada escena sea independientemente renderizable, y que la calidad visual sea profesional desde el primer renderizado, sin necesidad de iteraciones de corrección estética.

Compatible con✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/assafkip/claude-video-editor/tree/HEAD/skills/video-use/skills/manim-video

Preguntar en tu IA favorita

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

Documentación

Pipeline de Producción de Videos con Manim

Estándar Creativo

Esto es cine educativo. Cada cuadro enseña. Cada animación revela estructura.

Antes de escribir una sola línea de código, articula el arco narrativo. ¿Qué concepto erróneo corrige esto? ¿Cuál es el "momento ajá"? ¿Qué historia visual lleva al espectador de la confusión a la comprensión? El prompt del usuario es un punto de partida — interprétalo con ambición pedagógica.

Geometría antes que álgebra. Muestra la forma primero, la ecuación después. La memoria visual codifica más rápido que la memoria simbólica. Cuando el espectador ve el patrón geométrico antes que la fórmula, la ecuación se siente merecida.

La excelencia en el primer renderizado no es negociable. La salida debe ser visualmente clara y estéticamente coherente sin rondas de revisión. Si algo se ve desordenado, mal sincronizado o como "diapositivas generadas por IA", está mal.

Capas de opacidad dirigen la atención. Nunca muestres todo al brillo máximo. Elementos principales al 1.0, elementos contextuales al 0.4, elementos estructurales (ejes, cuadrículas) al 0.15. El cerebro procesa la prominencia visual en capas.

Espacio para respirar. Cada animación necesita self.wait() después. El espectador necesita tiempo para absorber lo que acaba de aparecer. Nunca apresures una animación tras otra. Una pausa de 2 segundos después de una revelación clave nunca se desperdicia.

Lenguaje visual coherente. Todas las escenas comparten una paleta de colores, tamaño de tipografía consistente y velocidades de animación coincidentes. Un video técnicamente correcto donde cada escena usa colores aleatorios diferentes es un fracaso estético.

Prerrequisitos

Ejecuta scripts/setup.sh para verificar todas las dependencias. Requiere: Python 3.10+, Manim Community Edition v0.20+ (pip install manim), LaTeX (texlive-full en Linux, mactex en macOS), y ffmpeg. Documentos de referencia probados contra Manim CE v0.20.1.

Modos

ModoEntradaSalidaReferencia
Explicador conceptualTema/conceptoExplicación animada con intuición geométricareferences/scene-planning.md
Derivación de ecuacionesExpresiones matemáticasDemostración animada paso a pasoreferences/equations.md
Visualización de algoritmosDescripción del algoritmoEjecución paso a paso con estructuras de datosreferences/graphs-and-data.md
Historia de datosDatos/métricasGráficos animados, comparaciones, contadoresreferences/graphs-and-data.md
Diagrama de arquitecturaDescripción del sistemaComponentes que se construyen con conexionesreferences/mobjects.md
Explicador de artículosArtículo de investigaciónHallazgos clave y métodos animadosreferences/scene-planning.md
Visualización 3DConcepto 3DSuperficies giratorias, curvas paramétricas, geometría espacialreferences/camera-and-3d.md

Stack

Un solo script de Python por proyecto. Sin navegador, sin Node.js, sin GPU requerida.

CapaHerramientaPropósito
NúcleoManim Community EditionRenderizado de escenas, motor de animación
MatemáticasLaTeX (texlive/MiKTeX)Renderizado de ecuaciones vía MathTex
Video E/SffmpegUnión de escenas, conversión de formato, multiplexado de audio
TTSElevenLabs / Qwen3-TTS (opcional)Locución de narración

Pipeline

PLANIFICAR --> CODIFICAR --> RENDERIZAR --> UNIR --> AUDIO (opcional) --> REVISAR
  1. PLANIFICAR — Escribe plan.md con el arco narrativo, lista de escenas, elementos visuales, paleta de colores, guión de locución
  2. CODIFICAR — Escribe script.py con una clase por escena, cada una renderizable de forma independiente
  3. RENDERIZAR — manim -ql script.py Scene1 Scene2 ... para borrador, -qh para producción
  4. UNIR — Concatenación con ffmpeg de los clips de escena en final.mp4
  5. AUDIO (opcional) — Añade locución y/o música de fondo vía ffmpeg. Consulta references/rendering.md
  6. REVISAR — Renderiza vistas previas estáticas, verifica contra el plan, ajusta

Estructura del Proyecto

nombre-proyecto/
  plan.md                # Arco narrativo, desglose de escenas
  script.py              # Todas las escenas en un archivo
  concat.txt             # Lista de escenas para ffmpeg
  final.mp4              # Salida unida
  media/                 # Generado automáticamente por Manim
    videos/script/480p15/

Dirección Creativa

Paletas de Colores

PaletaFondoPrimarioSecundarioAcentoCaso de uso
Clásica 3B1B#1C1C1C#58C4DD (AZUL)#83C167 (VERDE)#FFFF00 (AMARILLO)Matemáticas/CS general
Académica cálida#2D2B55#FF6B6B#FFD93D#6BCB77Accesible
Tecnológica neón#0A0A0A#00F5FF#FF00FF#39FF14Sistemas, arquitectura
Monocromática#1A1A2E#EAEAEA#888888#FFFFFFMinimalista

Velocidad de Animación

Contextorun_timeself.wait() después
Aparición de título/intro1.5s1.0s
Revelación de ecuación clave2.0s2.0s
Transformación/morfismo1.5s1.5s
Etiqueta de soporte0.8s0.5s
Limpieza FadeOut0.5s0.3s
Revelación "momento ajá"2.5s3.0s

Escala Tipográfica

RolTamaño de fuenteUso
Título48Títulos de escena, texto de apertura
Encabezado36Encabezados de sección dentro de una escena
Cuerpo30Texto explicativo
Etiqueta24Anotaciones, etiquetas de ejes
Subtítulo20Subtítulos, letra pequeña

Fuentes

Usa fuentes monoespaciadas para todo el texto. El renderizador Pango de Manim produce kerning roto con fuentes proporcionales en todos los tamaños. Consulta references/visual-design.md para recomendaciones completas.

MONO = "Menlo"  # definir una vez al inicio del archivo

Text("Series de Fourier", font_size=48, font=MONO, weight=BOLD)  # títulos
Text("n=1: sin(x)", font_size=20, font=MONO)                   # etiquetas
MathTex(r"\nabla L")                                            # matemáticas (usa LaTeX)

Tamaño mínimo font_size=18 para legibilidad.

Variación por Escena

Nunca uses configuración idéntica para todas las escenas. Para cada escena:

  • Color dominante diferente de la paleta
  • Distribución diferente — no centres todo siempre
  • Entrada de animación diferente — varía entre Write, FadeIn, GrowFromCenter, Create
  • Peso visual diferente — algunas escenas densas, otras dispersas

Flujo de Trabajo

Paso 1: Planificar (plan.md)

Antes de cualquier código, escribe plan.md. Consulta references/scene-planning.md para la plantilla completa.

Paso 2: Codificar (script.py)

Una clase por escena. Cada escena es renderizable de forma independiente.

from manim import *

BG = "#1C1C1C"
PRIMARY = "#58C4DD"
SECONDARY = "#83C167"
ACCENT = "#FFFF00"
MONO = "Menlo"

class Scene1_Introduction(Scene):
    def construct(self):
        self.camera.background_color = BG
        title = Text("¿Por Qué Funciona Esto?", font_size=48, color=PRIMARY, weight=BOLD, font=MONO)
        self.add_subcaption("¿Por qué funciona esto?", duration=2)
        self.play(Write(title), run_time=1.5)
        self.wait(1.0)
        self.play(FadeOut(title), run_time=0.5)

Patrones clave:

  • Subtítulos en cada animación: self.add_subcaption("texto", duration=N) o subcaption="texto" en self.play()
  • Constantes de color compartidas al inicio del archivo para consistencia entre escenas
  • self.camera.background_color establecido en cada escena
  • Salidas limpias — FadeOut de todos los mobjects al final de la escena: self.play(FadeOut(Group(*self.mobjects)))

Paso 3: Renderizar

manim -ql script.py Scene1_Introduction Scene2_CoreConcept  # borrador
manim -qh script.py Scene1_Introduction Scene2_CoreConcept  # producción

Paso 4: Unir

cat > concat.txt << 'EOF'
file 'media/videos/script/480p15/Scene1_Introduction.mp4'
file 'media/videos/script/480p15/Scene2_CoreConcept.mp4'
EOF
ffmpeg -y -f concat -safe 0 -i concat.txt -c copy final.mp4

Paso 5: Revisar

manim -ql --format=png -s script.py Scene2_CoreConcept  # vista previa estática

Notas de Implementación Críticas

Cadenas Raw para LaTeX

# MAL: MathTex("\frac{1}{2}")
# BIEN:
MathTex(r"\frac{1}{2}")

buff >= 0.5 para Texto en Bordes

label.to_edge(DOWN, buff=0.5)  # nunca < 0.5

FadeOut Antes de Reemplazar Texto

self.play(ReplacementTransform(note1, note2))  # no Write(note2) encima

Nunca Animar Mobjects No Añadidos

self.play(Create(circle))  # primero debe añadirse
self.play(circle.animate.set_color(RED))  # luego animar

Objetivos de Rendimiento

CalidadResoluciónFPSVelocidad
-ql (borrador)854x480155-15s/escena
-qm (media)1280x7203015-60s/escena
-qh (producción)1920x10806030-120s/escena

Itera siempre en -ql. Solo renderiza en -qh para la salida final.

Referencias

ArchivoContenido
references/animations.mdAnimaciones principales, funciones de velocidad, composición, sintaxis .animate, patrones de sincronización
references/mobjects.mdTexto, formas, VGroup/Group, posicionamiento, estilizado, mobjects personalizados
references/visual-design.md12 principios de diseño, capas de opacidad, plantillas de distribución, paletas de colores
references/equations.mdLaTeX en Manim, TransformMatchingTex, patrones de derivación
references/graphs-and-data.mdEjes, gráficos, BarChart, datos animados, visualización de algoritmos
references/camera-and-3d.mdMovingCameraScene, ThreeDScene, superficies 3D, control de cámara
references/scene-planning.mdArcos narrativos, plantillas de distribución, transiciones de escena, plantilla de planificación
references/rendering.mdReferencia de CLI, preajustes de calidad, ffmpeg, flujo de trabajo de locución, exportación a GIF
references/troubleshooting.mdErrores de LaTeX, errores de animación, errores comunes, depuración
references/animation-design-thinking.mdCuándo animar vs mostrar estático, descomposición, ritmo, sincronización de narración
references/updaters-and-trackers.mdValueTracker, add_updater, always_redraw, updaters basados en tiempo, patrones
references/paper-explainer.mdConvertir artículos de investigación en animaciones — flujo de trabajo, plantillas, patrones de dominio
references/decorations.mdSurroundingRectangle, Brace, flechas, DashedLine, Angle, ciclo de vida de anotaciones
references/production-quality.mdListas de verificación previas al código, previas al renderizado, posteriores al renderizado, distribución espacial, color, tempo

Divergencia Creativa (usar solo cuando el usuario solicite resultados experimentales/creativos/únicos)

Si el usuario solicita enfoques explicativos creativos, experimentales o no convencionales, selecciona una estrategia y razona a través de ella ANTES de diseñar la animación.

  • SCAMPER — cuando el usuario quiera una versión fresca de una explicación estándar
  • Inversión de Supuestos — cuando el usuario quiera desafiar cómo se enseña típicamente algo

Transformación SCAMPER

Toma una visualización matemática/técnica estándar y transfórmala:

  • Sustituir: reemplaza la metáfora visual estándar (recta numérica → camino sinuoso, matriz → cuadrícula urbana)
  • Combinar: fusiona dos enfoques explicativos (algebraico + geométrico simultáneamente)
  • Invertir: deriva hacia atrás — comienza desde el resultado y deconstruye hasta los axiomas
  • Modificar: exagera un parámetro para mostrar por qué importa (10x la tasa de aprendizaje, 1000x el tamaño de la muestra)
  • Eliminar: elimina toda notación — explica únicamente a través de animación y relaciones espaciales

Inversión de Supuestos

  1. Enumera lo que es "estándar" sobre cómo se visualiza este tema (izquierda a derecha, 2D, pasos discretos, notación formal)
  2. Elige el supuesto más fundamental
  3. Inviértelo (derivación de derecha a izquierda, incrustación 3D de un concepto 2D, morfismo continuo en lugar de pasos, notación cero)
  4. Explora qué revela la inversión que el enfoque estándar oculta

Individual skills in this repo

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

assafkip/claude-video-editor

Build videos from stills when there is nothing to cut — narration first (ElevenLabs v3 with audio tags), then still keyframes from ANY source (AI image tools, screenshots, photos, HyperFrames-rendered HTML), animated deterministically with the animate-stills recipe (HyperFrames camera moves + GSAP atmosphere). Use when the user wants an explainer, documentary-style video, or any video built from generated or collected visuals instead of recorded footage.

assafkip/claude-video-editor

GSAP animation reference for HyperFrames. Covers gsap.to(), from(), fromTo(), easing, stagger, defaults, timelines (gsap.timeline(), position parameter, labels, nesting, playback), and performance (transforms, will-change, quickTo). Use when writing GSAP animations in HyperFrames compositions.

assafkip/claude-video-editor

HyperFrames CLI tool — hyperframes init, lint, preview, render, transcribe, tts, doctor, browser, info, upgrade, compositions, docs, benchmark. Use when scaffolding a project, linting or validating compositions, previewing in the studio, rendering to video, transcribing audio, generating TTS, or troubleshooting the HyperFrames environment.

assafkip/claude-video-editor

Install and wire registry blocks and components into HyperFrames compositions. Use when running hyperframes add, installing a block or component, wiring an installed item into index.html, or working with hyperframes.json. Covers the add command, install locations, block sub-composition wiring, component snippet merging, and registry discovery.

assafkip/claude-video-editor

Create video compositions, animations, title cards, overlays, captions, voiceovers, audio-reactive visuals, and scene transitions in HyperFrames HTML. Use when asked to build any HTML-based video content, add captions or subtitles synced to audio, generate text-to-speech narration, create audio-reactive animation (beat sync, glow, pulse driven by music), add animated text highlighting (marker sweeps, hand-drawn circles, burst lines, scribble, sketchout), or add transitions between scenes (crossfades, wipes, reveals, shader transitions). Covers composition authoring, timing, media, and the full video production workflow. For CLI commands (init, lint, preview, render, transcribe, tts) see the hyperframes-cli skill.

assafkip/claude-video-editor

Beginner-friendly end-to-end video creator for HyperFrames. Use when the user says "make a video", "create a video", "new video", "build a video", "video from scratch", "I want to make a video", "help me create a video", or when someone who's never used HyperFrames before arrives with a concept, script, or rough idea and wants a finished MP4. Interviews the user in one pass, then builds the full video with mandatory preview and visual-verification gates.

assafkip/claude-video-editor

Build and iterate short-form vertical (9:16) videos in Hyperframes — TikTok/Reels/Shorts style. Use when Nate says "short-form video", "vertical video", "TikTok/Reels/Shorts", "make a short", "talking-head + motion graphics", or when the target is a 1080x1920 composition with face video + synced scene overlays + karaoke captions. Encodes the full May Shorts 19 playbook: face-mode choreography, audio-synced scene timing, karaoke captions, and the 10-rule quality checklist.

assafkip/claude-video-editor

Edit any video by conversation — the orchestrator for the bundled video pipeline. Use when the user wants to edit, cut, caption, grade, or add motion graphics to footage; drops a folder of clips and says "edit this"; or asks to make a promo/teaser/tutorial/short. Routes to video-use (the cut engine) and HyperFrames (motion-graphics overlays), with a motion-craft library for taste.

assafkip/claude-video-editor

Capture a website and create a HyperFrames video from it. Use when: (1) a user provides a URL and wants a video, (2) someone says "capture this site", "turn this into a video", "make a promo from my site", (3) the user wants a social ad, product tour, or any video based on an existing website, (4) the user shares a link and asks for any kind of video content. Even if the user just pastes a URL — this is the skill to use.

Skills relacionados