Shrimer06/remotion-video-superpowers

Remotion Video Superpowers

Use this skill to run Remotion video production as a disciplined spec -> plan -> execution -> verification workflow. Do not jump straight into animation for non-trivial videos.

Workflow

1. Create or update a video spec before implementation.

   • Read references/writing-video-specs.md.
   • Save specs under docs/video/specs/YYYY-MM-DD-project-name.md in the project when practical.
   • Capture goals, non-goals, audience, visual direction, assets, voiceover requirements, constraints, and acceptance criteria.

2. Create or update a production plan.

   • Read references/writing-video-plans.md.
   • Save plans under docs/video/plans/YYYY-MM-DD-project-name.md in the project when practical.
   • Use checkbox tasks. Each task must list files, steps, validation, and stop conditions.

3. Complete asset sourcing before animation implementation.

   • Read references/asset-sourcing.md.
   • Collect and record product assets, brand assets, UI references, screenshots, 3D models, map/geospatial resources, service tokens/env names, audio references, licenses, attribution, local paths, and fallbacks.
   • Do not start scene animation until required assets are locally available or a fallback is explicitly recorded.

4. Execute the plan task by task.

   • Read references/remotion-scene-execution.md before editing Remotion code.
   • Read references/frontend-animation-system.md when the video contains web UI, product interface, dashboard, frontend-style motion, Three.js, Anime.js, or complex animation choreography.
   • Read references/3d-map-and-model-resources.md when the video needs maps, routes, cities, terrain, buildings, landmarks, digital twins, equipment, spacecraft, real-world 3D objects, or token-backed services such as Mapbox/Cesium ion.
   • Use useCurrentFrame() and interpolate() for seek-safe animation.
   • Avoid CSS transitions and non-deterministic runtime animation.
   • Keep scene text short; move explanation into voiceover.
   • Render stills around scene starts, peaks, and transitions before final render.

5. Handle voiceover as a first-class timeline source.

   • Read references/elevenlabs-v3-scripting.md before writing ElevenLabs v3 scripts.
   • Read references/audio-sync-and-muxing.md before importing, syncing, or muxing audio.
   • Inspect real audio duration with this skill's scripts/inspect-audio.sh.
   • Prefer stretching scene timing to fit final voiceover over cutting audio.

6. Run final QA before delivery.

   • Read references/qa-checkpoints.md.
   • Run project lint/typecheck when available.
   • Render checkpoint stills with this skill's scripts/render-checkpoints.sh or explicit npx remotion still commands.
   • Render the final MP4.
   • Mux voiceover with this skill's scripts/mux-voiceover.sh when audio reliability matters.
   • Verify duration, audio stream, and volume with ffprobe/ffmpeg.

Superpowers Rules

• Treat the spec as the source of truth. If implementation conflicts with the spec, update the spec or stop and ask.
• Treat the plan as executable. Do not mark a task complete until its verification passes.
• Stop on failed validation that affects final video quality: broken lint, unreadable text, overlapping scenes, missing audio, mismatched duration, or blank key visuals.
• For revisions, identify the affected scene and frame range first, render before/after stills, then patch only the necessary code.
• Preserve user-provided media. Copy or reference it deliberately; do not overwrite source downloads.
• Do not use screenshots as the main visual language for a promo unless the user explicitly wants a screen tour. Translate product ideas into motion metaphors and use screenshots as evidence, transitions, or brief product proof.

Reference Routing

• Need to design the video: read writing-video-specs.md.
• Need to plan implementation: read writing-video-plans.md.
• Need to gather product assets, model assets, screenshots, tokens, licenses, or references: read asset-sourcing.md.
• Need to code Remotion scenes or transitions: read remotion-scene-execution.md.
• Need to design rich frontend-style animation: read frontend-animation-system.md.
• Need maps, 3D city/terrain, routes, or external 3D models: read 3d-map-and-model-resources.md.
• Need a voiceover script, especially ElevenLabs v3: read elevenlabs-v3-scripting.md.
• Need to align MP3/WAV audio or fix "no sound": read audio-sync-and-muxing.md.
• Need to inspect final quality: read qa-checkpoints.md.

When running bundled scripts from a project directory, use the absolute path to this skill's scripts/ directory unless equivalent project-local scripts exist.