| name | remotion |
| description | Create editable AI video projects with Remotion and React, then preview and render them to MP4. Use for vertical short videos, product demos, story-driven animations, HUD/tech visuals, feed ads, tutorial videos, subtitles, voiceover, sound effects, and code-based video iteration. |
| version | 1.0.0 |
| author | Ekko |
| license | MIT |
| platforms | ["linux","macos","windows"] |
| metadata | {"hermes":{"source":"skills-sh/google-labs-code/stitch-skills/remotion","tags":["remotion","react-video","ai-video","mp4","animation","short-video"]}} |
| prerequisites | {"commands":["node","npx"]} |
Remotion
Use this skill when the user wants Hermes to turn a short video idea into an editable, renderable React video project with Remotion.
Remotion is different from prompt-only AI video tools: it produces a code project. That means the agent can repeatedly edit subtitles, timing, characters, scenes, voiceover, sound effects, and visual rhythm, then render a new MP4.
Good fits include vertical short videos, product demos, story-driven animations, HUD/tech-style videos, feed ad creatives, tutorial explainers, caption-heavy clips, and reusable video templates.
Setup
If the upstream Remotion skill is not installed, install it first:
hermes skills install skills-sh/google-labs-code/stitch-skills/remotion
For a new Remotion project, scaffold from an empty folder:
npx create-video@latest --yes --blank --no-tailwind my-video
Replace my-video with a short project name based on the user's brief.
Workflow
- Turn the request into a concise production brief: purpose, audience, duration, aspect ratio, style, scenes, text, narration, music, sound effects, and output path.
- Use practical defaults when the user does not specify them: 1080x1920 for vertical short video, 1920x1080 for horizontal video, 30 fps, MP4 output, and a duration that fits the requested platform.
- Create or reuse a Remotion project.
- Build the video as React components and Remotion compositions. Keep scene data, captions, colors, timing, and copy easy to edit.
- Use Remotion primitives for timing and media:
Composition, Sequence, AbsoluteFill, Audio, Video, Img, useCurrentFrame, useVideoConfig, interpolate, and spring.
- Preview in Remotion Studio while iterating:
npx remotion studio
- For non-trivial layouts, render at least one still frame to catch layout, color, and timing issues:
npx remotion still <composition-id> --scale=0.25 --frame=30
- Render the final MP4:
npx remotion render <composition-id> out/final.mp4
Implementation Guidelines
- Prefer code that is easy to revise over one-off generated visuals.
