Menu
Genera vídeos educativos de Codex features usando Remotion. Invoca con /remotion-tutorial-generator "instrucción" [--voiceover] [--no-demo]
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Criterios de calidad para sesiones de auto-mejora — cómo convertir drafts AFP en PRs revisables, cuándo renderizar evidencia y cuándo abstenerse.
Best practices for Remotion - Video creation in React
Drive a full end-to-end test of the video generation platform through the browser. Use this skill whenever testing the Docker Compose stack, verifying a video generation flow, checking the chat UI, debugging pipeline stage transitions, or validating that a fix actually works in the running app. Also use after deploying changes to any of the 3 services (agent, render-service, web) to catch regressions. Even if the user just says "test it" or "does it work?" in the context of the video platform, this is the right skill.
Validate and render a Remotion video from a config.json to MP4. Use this skill when the user wants to render a video, test a config, preview a render, check if a config is valid, or re-render after changes. Trigger on phrases like "render", "renderiza", "genera el video", "prueba el config", or any mention of running the render pipeline locally (not through Docker — that's the agent pipeline). Also use when the user names a specific content slug and wants to see the output.
Identidad visual y editorial de Linea Directa para generacion de videos. Colores, mascota PhoneMascot, tono de marca, tipografia y defaults de composicion. Usala al generar escaletas, escribir copy o tomar decisiones creativas.
Referencia tecnica de Gemini TTS — voces disponibles, audio tags, formato multi-speaker, framework de prompting y limitaciones. Consulta al planificar voiceover o generar audio.
| name | remotion-tutorial-generator |
| description | Genera vídeos educativos de Codex features usando Remotion. Invoca con /remotion-tutorial-generator "instrucción" [--voiceover] [--no-demo] |
Genera un vídeo MP4 educativo sobre una feature de Codex con terminal simulada.
El usuario te pasa una instrucción en lenguaje natural. Puede incluir:
/remotion-tutorial-generator "explica /compact"/remotion-tutorial-generator "https://docs.anthropic.com/..." "explica esta feature"--voiceover (activa TTS, preferiblemente ElevenLabs), --no-demo (omite el subagente de demostración)https?://, es una URL de referencia; el resto es el tema.compact-command.tutorials/[slug]/ y tutorials/[slug]/assets/.Lanza en paralelo:
Lee también .Codex/skills/remotion-best-practices/ para entender qué tipos de escenas y efectos puedes usar en el template.
Lanza un subagente con esta instrucción exacta:
"Eres un agente de demostración. Documenta el uso real de esta feature de Codex: [tema]. Responde SOLO con este formato: COMANDOS EXACTOS: [lista de comandos, uno por línea] OUTPUT REAL: [output literal que produce la herramienta, tal como aparece en la terminal] CASOS DE USO: [2-3 situaciones donde es útil] ERRORES COMUNES: [1-2 errores típicos del usuario] NOTAS: [cualquier comportamiento inesperado o matiz importante]"
Usa la respuesta estructurada del subagente como fuente de verdad para los comandos y outputs del tutorial.
Con toda la información recopilada (research + demo), diseña el contenido del tutorial:
intro (3-5s): título llamativo que explique qué va a aprender el usuarioterminal (6-15s): demostración real del comando con líneas de tipo command, output, Codexcallout (3-5s): explicación del "por qué" o "cuándo usar" en lenguaje naturaloutro (4-8s): resumen con bullets accionablesDecide la estructura, tema visual (default o linea-directa), tipos de escena y contenido narrativo. Este paso genera el contenido creativo pero NO escribe el config.json todavía.
Además, define un brief editorial mínimo:
Antes de generar el config.json, presenta la escaleta completa al usuario para su aprobación.
Genera un bloque de texto con este formato y preséntalo usando AskUserQuestion:
## Script: [título del tutorial]
**Escena 1 — intro ([duración]s)**
Título: "[título]"
Subtítulo: "[subtítulo]"
**Escena 2 — terminal ([duración]s)**
> [command] texto del comando
[output] texto del output
[Codex] respuesta de Codex
(líneas en blanco como separadores)
**Escena 3 — callout ([duración]s)**
"[texto del callout]"
Posición: [top/bottom/right]
**Escena 4 — outro ([duración]s)**
Título: "[título]"
• Bullet 1
• Bullet 2
• Bullet 3
Duración total: ~[total]s
Debajo de cada escena añade también:
Y para intro / outro añade explícitamente:
Usa AskUserQuestion con dos opciones:
El bucle no tiene límite de iteraciones. Repite hasta que el usuario apruebe.
Con la escaleta aprobada, escribe un draft en tutorials/[slug]/config.json.
El JSON debe ser válido según el schema en src/compositions/ClaudeCodeTutorial/schema.ts.
Incluye ya:
briefvoiceoverdurationInSecondsNo des por terminado el vídeo en este punto.
themeUsa siempre "theme": "linea-directa" salvo que el usuario pida explícitamente otro tema.
"linea-directa" (por defecto): fondo blanco, acentos rojos #CC3333, PhoneMascot SVG (teléfono con ruedas). La terminal siempre usa fondo oscuro."default": fondo oscuro, acentos verdes (estilo GitHub dark). Solo si el usuario lo pide.La escena terminal simula la interfaz real de Codex CLI:
Tipos de línea:
kind: "command" → lo que escribe el usuario, efecto máquina de escribir humano (~0.75 chars/frame)kind: "output" → respuesta del sistema con borde izquierdo (aparece instantánea)kind: "claude" → respuesta de Claude/Codex con streaming mucho más rápido (~3.2 chars/frame) y menos gap entre líneaskind: "blank" → separador visual entre grupos de líneasdelayAfterMs para pausas dramáticas (ej: 800ms antes de que aparezca el output)voiceover con ElevenLabs:voiceover.provider: "elevenlabs" cuando el usuario quiera una voz más cuidada.voiceover.scenes[n].text o en el string legacy.<break time="0.35s" /> dentro del texto si la voz lo necesita.voiceover.elevenlabs y se pueden sobrescribir por escena en voiceover.scenes[n].elevenlabs.Campos útiles soportados:
modelIdoutputFormatlanguageCodeseedenableLoggingapplyTextNormalizationvoiceSettings.stabilityvoiceSettings.similarityBoostvoiceSettings.stylevoiceSettings.useSpeakerBoostvoiceSettings.speedpronunciationDictionariespreviousTextnextTextGuía rápida:
stability más bajo = lectura más expresivasimilarityBoost más alto = más fidelidad al timbre de la vozstyle más alto = más dramatización si el modelo lo soportaspeed ajusta el ritmo sin reescribir el copy, pero no sustituye un buen guionpreviousText y nextText ayudan a dar continuidad entre clips vecinosapplyTextNormalization te deja controlar cuánto normaliza números y abreviaturasNo inventes un campo prompt separado para la locución. Si necesitas un tono concreto, escríbelo en el guion y usa los controles anteriores.
src/compositions/ClaudeCodeTutorial/scenes/custom/[NombreComponente].tsxsrc/compositions/ClaudeCodeTutorial/customSceneRegistry.ts"type": "custom", "componentId": "nombre-componente"useCurrentFrame(). Nunca CSS transitions.schema.ts (import type { IntroSceneProps } from "../schema") — no uses Extract<...>useThemeTokens() para todos los colores y estilos — nunca compruebes el nombre del tema con useTheme() / isLDuseSlideIn() de hooks/useSlideIn.ts<MascotWatermark animation="..." /> — se auto-oculta en tema defaulttokens.monoFontFamily (no cargues JetBrains Mono por separado)Invoca la skill remotion-director sobre el draft generado.
La skill debe:
timing y beatsSi el usuario quiere saltársela, debe ser explícito. Si se omite, avisa claramente antes del render.
Ejecuta:
npx tsx scripts/render.ts tutorials/[slug]/config.json
Si falla con error de browser/Chromium:
npx remotion browser ensure
npx tsx scripts/render.ts tutorials/[slug]/config.json
Informa al usuario:
tutorials/[slug]/output.mp4useCurrentFrame() via spring() o interpolate().config.json es el source of truth. Si el usuario quiere ajustes, edita el JSON y re-renderiza.tutorials/[slug]/output.mp4 (gitignored). Los config.json sí se commitean.