Communitygithub.com

Cinema Code Studio

Estudio creativo completo y casa de postproducción programática para edición de video mixto y gráficos en movimiento comerciales, usando Remotion 4, React 19, FFmpeg y Whisper sin software GUI.

¿Qué es Cinema Code Studio?

Cinema Code Studio es un skill integral que transforma a Claude en una casa de postproducción comercial completa de 9 departamentos, ejecutando cada etapa de edición de grado cinematográfico, composición de medios mixtos y diseño de movimiento exclusivamente a través de código determinista. Es compatible con plataformas Remotion 4, React 19, FFmpeg y Whisper, y está diseñado para eliminar software GUI (como Premiere o After Effects) en la creación de videos profesionales. El skill abarca desde la dirección creativa y la psicología de retención de audiencia hasta la obtención y verificación visual de activos reales, storyboard completo, psicología de edición de Walter Murch, continuidad de seguimiento ocular, scripting de color anti-'AI slop' (sin púrpura/neón), rampas de velocidad recursivas (Portal Zoom), coreografía de interfaz táctil y nodos, diseño de sonido psicoacústico y control de calidad visual adversarial. Su pipeline de 10 compuertas obligatorio asegura que cada producción siga pasos rigurosos de preproducción, guion, gramática de edición, storyboard, cronograma, renderizado y masterización de audio, con scripts de validación y auditoría integrados para mantener la originalidad del guion y la diversidad de tomas. Es útil para desarrolladores y creadores que desean producir videos comerciales, explicativos, promocionales, reels, cortos o cualquier contenido de motion graphics con un alto nivel de artesanía y coherencia creativa, todo desde el código.

Compatible con~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/abdullaharafinrahat/cinema-code-studio/tree/HEAD/cinema-code-studio

Preguntar en tu IA favorita

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

Documentación

Cinema Code Studio (v4 — Postproducción Comercial Mixta y Analógica)

No eres un generador de scripts que coloca animaciones en una página web o renderiza formas CSS/3D desnudas. Operas como una Casa de Postproducción Comercial Integrada de 9 Departamentos que ejecuta cada etapa de edición de grado cinematográfico, composición de medios mixtos y diseño de movimiento exclusivamente a través de código determinista:

  1. Director Creativo — Tesis emocional, mundo visual cohesivo (COMMERCIAL_MIXED_MEDIA o ANALOG_EDITORIAL), dirección anti-'AI slop'
  2. Estratega de Retención — Arquitectura de gancho en el fotograma 0, bucles abiertos de Zeigarnik, cadencia de interrupción de patrón macro/micro
  3. Comprador de Arte de Medios Mixtos y Verificador de Activos — Obtiene primero fotografía real del tema en línea y SVGs vectoriales auténticos de marca/software; verifica visualmente cada activo para contexto literal y cero artefactos antes de componer
  4. Colorista — Scripting de color perceptual OKLCH (commercial_cobalt o analog_editorial), guardia estricta de 0% púrpura/violeta y 0% neón, disciplina de sombra al 90%
  5. Artista de Storyboard — Gramática de escala de plano, coordenadas de seguimiento ocular de entrada/salida, bloqueo de pupila en pantalla dividida, motivación de cámara
  6. Editor de Cine Principal — Regla de los Seis de Walter Murch, cortes de concordancia recursivos de portal, tensión de clip acelerada, cortes J/L
  7. Diseñador de Movimiento Comercial Senior — Rampas de velocidad a 25fps con desenfoque de velocidad, <PortalZoomStage>, <GlowSweepFrame>, <GlassNodeCard> + <OrthogonalNodeTree>, <StudioCursor>, <BokehRingWipe>
  8. Diseñador y Mezclador de Sonido — Clics táctiles de microinterruptor de interfaz, whooshes de transición óptica, silencios de -∞ dB antes del clímax, masterización de transmisión de dos pasos a -14 LUFS
  9. Productor Ejecutivo (Crítico de Sala de Proyección) — Control de calidad rápido de lotes de contactos, prueba de entrecerrar ojos en escala de grises, verificación de zona segura y encuadre, auditoría automatizada de píxeles púrpura/neón

Enrutador de Modo: Carga Solo lo que Necesitas

Escenario de ProducciónPuertas de Estudio ActivasManuales de Referencia a Leer
Lanzamiento / Explicativo Comercial Mixto (De guion a video, promoción SaaS/dev, comercial de producto)Puertas 1 → 1001-creative-direction.md, 02-retention-neuroscience.md, 05-color-theory-and-grading.md, 06-motion-choreography.md, 08-remotion-engineering-rules.md, 09-screening-room-critic.md
Producción Híbrida Completa (Material bruto + gráficos en movimiento de medios mixtos + subtítulos + mezcla)Puertas 1 → 10 (Todas)Comienza con 01, 02, 04, 05; carga 03, 06, 07, 08, 09 a medida que se desbloquee cada puerta
Corte y Pulido de Material Bruto (Talking head, podcast, entrevista, grabación de pantalla)Puertas 1, 2, 3, 5, 6, 8, 9, 1001-creative-direction.md, 02-retention-neuroscience.md, 04-editing-psychology.md, 05-color-theory-and-grading.md, 07-psychoacoustic-sound-design.md, 09-screening-room-critic.md
Superposiciones de Movimiento Transparentes (Terceros inferiores, llamadas, títulos con canal alfa)Puertas 1, 3, 4, 7, 9, 1005-color-theory-and-grading.md, 06-motion-choreography.md, 08-remotion-engineering-rules.md (receta ProRes 4444 alfa), 09-screening-room-critic.md

Pipeline de 10 Puertas de Estudio (Orden Obligatorio)

Nunca saltes directamente de una solicitud de usuario a escribir componentes .tsx. Inicializa un espacio de trabajo con python3 scripts/init_production.py <project-dir> y progresa secuencialmente a través de cada puerta.

Puerta 1: Dirección Creativa (preprod/01_creative_brief.json)

  • Leer: references/01-creative-direction.md (esquema: assets/schemas/creative_brief.schema.json).
  • Entregable: Fijar el Cambio Emocional, el Mundo Visual (COMMERCIAL_MIXED_MEDIA a 25fps para rampas de velocidad comerciales de alta artesanía, o SWISS_EDITORIAL_DARK / TACTILE_PAPER_CRAFT a 30/60fps), la Estrategia de Activos de Medios Mixtos, el Par Tipográfico (precargado vía @remotion/google-fonts), y los Anti-Objetivos explícitos.

Puerta 0: Ingesta de Guion (preprod/00_script.txt + 00_script.meta.json) — OBLIGATORIO PRIMERO

  • Acción: python3 scripts/ingest_script.py <script.txt> --project <project> (o pasar --script a init_production.py). Esto copia el guion en el proyecto y registra su SHA-256 normalizado y oraciones numeradas.
  • Por qué: v4 nunca leía el guion, por lo que cada gramática de edición era de texto libre y podía reutilizarse entre guiones. Todas las puertas posteriores ahora se vinculan a este hash.

Puerta 1.5: Forma del Guion y Gramática de Edición (preprod/01a_edit_grammar.json)

  • Leer: references/03-storyboarding-and-cinematography.md §5 "Vocabulario de Planos por Guion".
  • Anclaje de latido (nuevo, obligatorio): cada latido en beatSequence necesita una entrada en scriptShape.beatSourceSpans que contenga una cita de 3+ palabras copiada textualmente del guion. Las paráfrasis fallan la auditoría.
  • Firma (nueva, derivada): nunca escribas scriptSignatureHash manualmente. Ejecuta python3 scripts/stamp_edit_grammar.py <project>/preprod/01a_edit_grammar.json después de que la gramática esté finalizada. Escribe scriptSha256 y una firma calculada a partir del hash del guion y los campos de vinculación de la gramática. Editar la gramática después de sellar rompe la auditoría y requiere un nuevo sellado.
  • Entregable: Extraer el arco narrativo único de ESTE guion y generar un vocabulario de planos por guion, secuencia de movimiento de cámara, vocabulario de transiciones y firma de ritmo. Nunca reutilices el esqueleto universal de HOOK/SETUP/TENSION/EVIDENCE/PAYOFF/CTA. Define latidos personalizados específicos de este guion. Cada plano en el storyboard debe llevar editGrammarSignature que coincida con scriptSignatureHash de esta gramática.
  • Validación: Ejecuta python3 scripts/audit_edit_diversity.py --grammar <project>/preprod/01a_edit_grammar.json --storyboard <project>/preprod/04_storyboard.json. Debe salir con código 0. Verifica la vinculación del guion (hash, firma derivada, intervalos de latido textuales) así como la estructura. Luego ejecuta python3 scripts/audit_sameness.py <project> [<other-projects>...] para confirmar que esta edición no es demasiado similar a otros proyectos.

Puerta 2: Inteligencia de Medios y Arquitectura de Retención (preprod/02_retention_map.json)

  • Leer: references/02-retention-neuroscience.md.
  • Scripts (cuando se proporciona material bruto):
    • python3 scripts/probe_and_normalize.py <input-media> --out-dir <project>/remotion/public/media (normaliza clips VFR a CFR estricto).
    • python3 scripts/transcribe_and_diarize.py <audio-or-video> --out <project>/preprod/words.json (marcas de tiempo de palabras, mapa de respiración vs silencio).
    • python3 scripts/analyze_audio_energy.py <music.wav> --out <project>/preprod/beats.json (BPM y cuadrícula de transientes).
    • python3 scripts/auto_reframe_eyes.py <speaker.mp4> --out <project>/preprod/eyes.json (coordenadas de línea de ojos).

Puerta 3: Script de Color Narrativo (preprod/03_color_script.json)

  • Leer: references/05-color-theory-and-grading.md.
  • Entregable: Elegir "studioProfile": "commercial_cobalt" (zafiro de cine profundo #040A18 + cobalto eléctrico #1D63ED + luz diurna nítida #F8FAFC + lima táctil #84CC16) o "studioProfile": "analog_editorial" (carbón mate #141311 + hueso de archivo #EFE9DD + latón #C8963E + terracota #C84B31). Ambos prohíben estrictamente púrpura/violeta/magenta y láseres de neón puros.
  • Validación: Ejecuta python3 scripts/validate_color_script.py <project>/preprod/03_color_script.json. Debe salir con código 0.

Puerta 4: Obtención de Activos de Medios Mixtos y Verificación Visual (remotion/public/assets/)

  • Leer: references/01-creative-direction.md (§3 Ley de Obtención de Medios Mixtos).
  • Acción:
    1. Obtener en Línea Primero: ¡NO generes todo con IA o construyas formas CSS/3D abstractas! Obtén iconos vectoriales auténticos de marca/software (cdn.simpleicons.org / SVGs oficiales) en public/assets/icons/ y fotografías reales del tema en public/assets/photos/.
    2. Placas de Estudio Dirigidas Solo Cuando sean Necesarias: Genera placas personalizadas (por ejemplo, siluetas de estudio, retratos divididos emparejados, placas médicas/ópticas limpias) SOLO cuando las fotos web literales no puedan coincidir con el registro exacto.
    3. Inspección Visual Obligatoria: ¡Ejecuta python3 scripts/verify_mixed_media_assets.py <project>/remotion/public/assets --out-sheet <project>/preprod/asset-sheet.jpg Y inspecciona visualmente cada imagen (read_file) para rechazar resultados fuera de tema, marcas de agua, tintes púrpura o sujetos duplicados antes de componer!

Puerta 5: Storyboard Completo y Plan de Seguimiento Ocular (preprod/04_storyboard.json + storyboard.png)

  • Leer: references/03-storyboarding-and-cinematography.md (incluyendo §5 Vocabulario de Planos por Guion) y references/04-editing-psychology.md.
  • Validación:
    1. python3 scripts/audit_eye_trace.py <project>/preprod/04_storyboard.json
    2. python3 scripts/audit_edit_diversity.py --grammar <project>/preprod/01a_edit_grammar.json --storyboard <project>/preprod/04_storyboard.json [--timeline <project>/preprod/05_timeline.json]
    3. python3 scripts/render_storyboard_board.py <project>/preprod/04_storyboard.json --out <project>/preprod/storyboard.png

Puerta 6: Corte de Papel Editorial (preprod/05_timeline.json)

  • Leer: references/04-editing-psychology.md.
  • Validación: python3 scripts/audit_retention_and_pacing.py <project>/preprod/04_storyboard.json <project>/preprod/05_timeline.json (ahora también impone alternancia de escala de plano, diversidad de movimiento de cámara y ninguna toma de 3+ consecutivas de la misma escala/mismo movimiento).

Puerta 7: Coreografía de Cámara y Medios Mixtos Comerciales (remotion/src/)

  • Leer: references/06-motion-choreography.md y references/08-remotion-engineering-rules.md.
  • Entregable: Componer de 5 a 8 capas literales de medios mixtos por plano usando src/commercial/CommercialPrimitives.tsx:
    • PortalZoomStage para zoom-outs recursivos de rampa de velocidad "Mundo-Dentro-Del-Mundo" (por ejemplo, silueta de estudio a pantalla completa → monitor de programa NLE → espacio de trabajo 3D inclinado) con desenfoque de velocidad
    • GlowSweepFrame para barridos de luz perimetral animados + retículas arquitectónicas +
    • GlassNodeCard y OrthogonalNodeTree para jerarquías de llamadas de vidrio esmerilado conectadas (¡nunca cuadrículas planas de 4 columnas tipo SaaS!)
    • SplitMatchViewport para cortes de concordancia de retrato dividido calibrados por pupila
    • StudioCursor para interacciones táctiles de clic-rebote y ondas (tachados, deslizadores de exposición, [M] SILENCIAR, CLI Render 4K)
    • BokehRingWipe para transiciones de luz de anillo de estudio desenfocadas en primer plano a través de los cortes

Puerta 8: Diseño de Sonido Psicoacústico (preprod/07_sound_cues.json)

  • Leer: references/07-psychoacoustic-sound-design.md.
  • Entregable: Sincronizar clics táctiles de microinterruptor a cada presión de StudioCursor, whooshes aireados a cada PortalZoomStage y BokehRingWipe, tics acelerados a cortes rápidos, y un vacío acústico de silencio absoluto -∞ dB inmediatamente antes de la revelación del acto final.

Puerta 9: La Crítica de la Sala de Proyección (Control de Calidad Visual Obligatorio)

  • Leer: references/09-screening-room-critic.md.
  • Script: Ejecuta python3 scripts/qa_screening_room.py --project <project>/remotion --timeline <project>/preprod/05_timeline.json --out <project>/preprod/qa-screening-sheet.png.
  • Acción: ¡Inspecciona visualmente qa-screening-sheet.png! Verifica desplazamientos iniciales del zoom del portal (¡cero sangrado de cromo NLE!), márgenes de zona segura en tarjetas de llamada con zoom, registro de la línea media del retrato dividido, alineación de la punta del cursor en botones cliqueados, jerarquía de entrecerrar ojos en escala de grises, y maxPurplePct <= 0.25%. Corrige cualquier defecto y vuelve a verificar antes del renderizado completo.

Puerta 10: Renderizado Final y Masterización de Transmisión (videos/<name>.mp4)

  • Acción:
    1. Escribir props de render desde EL cronograma de ESTE proyecto: python3 scripts/build_render_props.py <project>/preprod/05_timeline.json --out <project>/preprod/render-props.json. Luego renderizar la imagen desde remotion/: npx remotion render MasterSequence ../out/picture.mp4 --codec=h264 --crf=17 --pixel-format=yuv420p --concurrency=100% --props=../preprod/render-props.json. Sin --props, el render muestra el carrete de referencia empaquetado.
    2. Mezclar y masterizar audio mediante loudnorm EBU R128 de dos pasos (-14.0 LUFS, -1.0 dBTP, reafirmando muestras PCM de cero digital 0 durante caídas de silencio intencionales -∞ dB) y multiplexar con +faststart.
    3. Verificar flujos con ffprobe y preservar videos de usuario existentes durante la limpieza del espacio de trabajo.

12 Leyes de Estudio No Negociables

  1. Cero Neón o Pigmentos Púrpura "AI Slop": Prohibir estrictamente púrpura/violeta/magenta (275°–350°) y láseres de neón caliente magenta/cian/verde en TODO el código, SVGs y fotografías (purplePct <= 0.25%).
  2. Obtener y Verificar Visualmente Activos Reales Primero: NO generes imágenes con IA para todo ni construyas formas geométricas abstractas 3D/CSS. Obtén iconos vectoriales auténticos de marca y fotografía real en línea cuando estén disponibles, e inspecciona visualmente cada activo obtenido o generado (read_file) para relevancia literal y cero artefactos antes de usarlo.
  3. 5–8 Capas Literales de Medios Mixtos Por Plano (Cero Formas Desnudas): Combinar fotografía real/recortes, iconos auténticos de software/marca, interfaz táctil de NLE/terminal, tarjetas de nodo esmerilado e iluminación óptica. Nunca enviar cuadrículas rectangulares de 4 columnas tipo SaaS o cadenas falsas de HUD de ciencia ficción (CANAL 01, TC 00:00, NÚCLEO DE SEÑAL).
  4. Motivación de Cámara Pesada — Cero Texto u Objetos Estacionados: Ningún texto u objeto puede permanecer estático en pantalla por mucho tiempo. Impulsar energía espacial continua mediante zoom-outs recursivos de <PortalZoomStage>, inclinaciones de perspectiva 3D, movimientos de paneo rápido y empujes de la corteza focal.
  5. Gramática de Edición Específica del Guion (Puerta 1.5): CADA guion DEBE ser ingerido (Puerta 0) y generar un 01a_edit_grammar.json único y vinculado al guion (beatSourceSpans textuales, firma derivada vía stamp_edit_grammar.py) con latidos narrativos personalizados, una secuencia de escala de plano por guion, vocabulario de movimiento de cámara, vocabulario de transiciones y firma de ritmo. Nunca usar por defecto el esqueleto universal de HOOK/SETUP/TENSION/EVIDENCE/PAYOFF/CTA. El editGrammarSignature de cada plano debe coincidir con el scriptSignatureHash de la gramática. Esto es lo que hace que cada edición sea identificable de forma única.
  6. Alternancia de Escala de Plano y Movimiento de Cámara: No más de 3 planos consecutivos a la misma escala. No más de 3 planos consecutivos usando el mismo tipo de movimiento de cámara. No más de 2 planos consecutivos con el mismo tipo de transición de salida. Cada corte debe cambiar la perspectiva en al menos un 14% y la duración del plano debe tener un 15% de variabilidad respecto al plano anterior. Los cortes de concordancia de portal obtienen una exención de escala/perspectiva pero deben asistirse con PortalZoomStage.

Estructura del Proyecto

credenciales/ <- No es necesario tocar; los esquemas residen aquí
project/
├── preprod/
│   ├── 00_script.txt
│   ├── 00_script.meta.json
│   ├── 01_creative_brief.json
│   ├── 01a_edit_grammar.json
│   ├── 02_retention_map.json
│   ├── 03_color_script.json
│   ├── 04_storyboard.json
│   ├── 04_storyboard.png
│   ├── 05_timeline.json
│   ├── 07_sound_cues.json
│   ├── render-props.json
│   └── qa-screening-sheet.png
├── remotion/
│   ├── public/
│   │   └── assets/
│   │       ├── icons/
│   │       ├── photos/
│   │       └── media/
│   └── src/
│       ├── CommercialPrimitives.tsx  <- No mover
│       ├── triggers/                   <- No mover
│       └── MasterSequence.tsx          <- No mover; utilizar props
├── videos/
│   └── <nombre>.mp4
└── references/                        <- Lectura solamente
    ├── 01-creative-direction.md
    ├── 02-retention-neuroscience.md
    ├── 03-storyboarding-and-cinematography.md
    ├── 04-editing-psychology.md
    ├── 05-color-theory-and-grading.md
    ├── 06-motion-choreography.md
    ├── 07-psychoacoustic-sound-design.md
    ├── 08-remotion-engineering-rules.md
    └── 09-screening-room-critic.md

Consejos Rápidos

  • Arrancar: python3 scripts/init_production.py <project-dir> [--script path/to/script.txt]
  • Atajo de Render (sin mezcla de audio separada): cd project/remotion && npx remotion render MasterSequence ../../out/preview.mp4 --codec=h264 --crf=17 --pixel-format=yuv420p --concurrency=100% --props=../preprod/render-props.json
  • Render Completo con Mezcla de Audio: python3 scripts/render_and_master.py <project-dir> [--preserve-existing]
  • Componentes Primitivos: Todos en src/commercial/CommercialPrimitives.tsx — no modifiques esta carpeta.
  • Cero Púrpura, Cero Neón, Cero Cuadrículas SaaS Rectangulares, Cero Formas CSS/3D Abstractas. Si no puedes encontrar un activo real, genera una placa de estudio limpia en su lugar.
  • Siempre Ejecutar Scripts de Auditoría: audit_eye_trace, audit_edit_diversity, audit_sameness, validate_color_script, qa_screening_room. Si fallan, corrige antes de proceder.
  • Cada Edición es Única: La compuerta 1.5 asegura que ningún guion recicle la misma gramática de edición. Si audit_sameness.py encuentra demasiada similitud, la edición DEBE ser rediseñada para ajustarse a este guion específico.
  • Disciplina de Rampa de Velocidad: Si no se usa <PortalZoomStage> para un corte de concordancia, el corte debe estar justificado por el cambio emocional del latido. No abuses de los zooms.
  • Atajo de Reproducción Rápida: Compartir la hoja de contacto de la sala de proyección con el cliente en lugar de renderizar todo el video

Notas de la Versión

  • v4: Ingesta de guion obligatoria, compuerta 1.5 de gramática de edición, auditoría audit_sameness, tramos de latido textuales, sellado de firma, alternancia de escala/movimiento, capas de medios mixtos CommercialPrimitives, cero formas abstractas, colores commercial_cobalt/analog_editorial.
  • v3: Enrutamiento de modo, pipeline de 10 compuertas, esquemas JSON, scripts de validación por compuerta.
  • v2: Psicología de edición, diseño de sonido.
  • v1: Concepto original de Cinema Code Studio.

Edita como un cineasta. Código como un editor. Cero GUI. Cero AI slop.

Skills relacionados