القائمة
Two-Phase animation timing model for Remotion scenes. Teaches agents beat placement rules, visualReadyMs registry, and duration-content density. Read before directing or creating scenes.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
| name | scene-timing-guide |
| description | Two-Phase animation timing model for Remotion scenes. Teaches agents beat placement rules, visualReadyMs registry, and duration-content density. Read before directing or creating scenes. |
Every scene in this platform uses a Two-Phase animation model. You do NOT need to set animation timing — the platform handles it automatically.
Core layout appears immediately when the scene starts:
The viewer instantly sees WHAT this scene is about.
Supporting elements appear as the voice mentions them:
| Field | Generate? | Notes |
|---|---|---|
beats[] | YES | Creative sync points — one beat per narrative point |
tailHoldMs | OPTIONAL | Only if scene needs extra hold (CTA, brand). Default 350ms is fine |
transitionMs | OPTIONAL | Cross-fade duration between scenes (0-1500ms) |
leadInMs | NO — DEPRECATED | Auto-calculated from scene registry. Do not set. |
audioStartMs | NO — DEPRECATED | Auto-calculated from scene registry. Do not set. |
You decide WHAT to show and WHAT to say. The platform decides WHEN to sync them.
Audio automatically starts when the scene's visuals are ready. You don't need to calculate or guess millisecond values.
startMs must be >= the scene's visualReadyMs (typically 100-150ms)id, startMs, narration (what voice says), visual (what appears)For scenes with countable items (bullet-slide, icon-grid, benefits):
| Scene Type | visualReadyMs | Phase 1 Elements |
|---|---|---|
| intro | 100ms | Title, lockup, background |
| terminal | 150ms | Window chrome, status bar |
| callout | 100ms | Card frame, icon, title |
| outro | 100ms | Title, brand, CTA |
| bullet-slide | 100ms | Title, subtitle, accent line |
| icon-grid | 100ms | Title, grid layout frame |
| split-screen | 100ms | Title, columns, separator |
| code-block | 150ms | Card chrome, title, filename |
| flow-diagram | 150ms | Title, node outlines |
| comparison-table | 100ms | Title, column headers, frame |
| stat-reveal | 100ms | Label, container |
| file-explorer | 150ms | File tree sidebar |
| quote | 100ms | Quote marks, card background |
| block-diagram | 150ms | Title, block outlines |
| All others | 100-150ms | Title + structural frame |
| Unregistered | 200ms | Default fallback |
Dead air = voice playing while the screen has no visible content. This is FORBIDDEN.
The platform prevents this automatically by delaying audio start until visualReadyMs. But you must also avoid placing beats before visualReadyMs.
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.