melgarafael/growthos/remotion-video

Name: remotion-video
Author: melgarafael

Claude Code and agent skill by melgarafael/growthos

Trust tier 3

community

Source check pending

Checking that the SKILL.md file is still in the repository.

Remotion video composition knowledge — 6 template specs, storyboard-to-composition mapping, frame calculations, animation catalog, transition types, platform rules, retention triggers, and anti-patterns for video production

Install

npx vskill@latest install melgarafael/growthos/remotion-video

SKILL.md

Remotion Video Skill

Specialized knowledge base for mapping creative video concepts to Remotion compositions. Covers template selection, storyboard-to-composition translation, timing and pacing rules, animation and transition catalogs, platform-specific constraints, brand integration, retention psychology, and anti-patterns. This skill is consumed by the video-producer agent and integrates with the copywriting, video-production, and platform-mastery skills.

Trigger Conditions

Use this skill when the user asks to:

Create a video, reel, short, or explainer
Produce an animated carousel from existing slide content
Map a storyboard to a Remotion composition
Select the right video template for a given topic
Calculate frame timing for video scenes
Choose animations or transitions for video content
Optimize video pacing for retention
Convert carousel slides into animated video format
Render a video using Remotion
Review or improve an existing video storyboard

Template Registry

Six composition templates are available, each with specific constraints and scene flow patterns.

1. ReelTips

Property	Value
Aspect Ratio	9:16 (1080x1920)
FPS	30
Duration Range	15-60 seconds (450-1800 frames)
Scene Flow	hook(3s) > points(5s each) > CTA(4s)
Background	Dark gradient with accent color from brand
Default Animations	fade-in + scale-in for hook, alternating slide-left/right for points, bounce for CTA
Best For	Quick tips, lists, how-tos, hacks

Props Schema:

typescript

{
  template: "ReelTips",
  fps: 30,
  width: 1080,
  height: 1920,
  brand: BrandProps,
  scenes: SceneProps[],  // types: hook, point, cta
  showProgressBar: boolean,
  showWatermark: boolean
}

2. ReelBeforeAfter

Property	Value
Aspect Ratio	9:16 (1080x1920)
FPS	30
Duration Range	15-30 seconds (450-900 frames)
Scene Flow	hook(3s) > comparisons(6s each) > reveal(4s) > CTA(3s)
Background	Split dark/light for before/after contrast
Default Animations	wipe transitions for comparisons, slide for reveal
Best For	Transformations, comparisons, results, upgrades

Props Schema:

typescript

{
  template: "ReelBeforeAfter",
  fps: 30,
  width: 1080,
  height: 1920,
  brand: BrandProps,
  scenes: SceneProps[],  // types: hook, comparison, point, cta
  showProgressBar: boolean,
  showWatermark: boolean
}

3. ReelNumbers

Property	Value
Aspect Ratio	9:16 (1080x1920)
FPS	30
Duration Range	15-30 seconds (450-900 frames)
Scene Flow	hook(3s) > number+context(5s each) > insight(5s) > CTA(3s)
Background	Solid dark with accent-colored number highlights
Default Animations	counter-up for numbers, fade for context text
Best For	Statistics, data points, metrics, growth numbers

Props Schema:

typescript

{
  template: "ReelNumbers",
  fps: 30,
  width: 1080,
  height: 1920,
  brand: BrandProps,
  scenes: SceneProps[],  // types: hook, number, point, cta
  showProgressBar: boolean,
  showWatermark: boolean
}

4. ExplainerSteps

Property	Value
Aspect Ratio	16:9 (1920x1080)
FPS	30
Duration Range	60-180 seconds (1800-5400 frames)
Scene Flow	intro(5s) > steps(15s each) > summary grid(10s) > CTA(5s)
Background	Clean light or branded gradient
Default Animations	slide-up for steps, scale-in for summary
Best For	Tutorials, how-to guides, processes, setup guides

Props Schema:

typescript

{
  template: "ExplainerSteps",
  fps: 30,
  width: 1920,
  height: 1080,
  brand: BrandProps,
  scenes: SceneProps[],  // types: hook, step, point, cta
  showProgressBar: boolean,
  showWatermark: boolean
}

5. ExplainerDemo

Property	Value
Aspect Ratio	16:9 (1920x1080)
FPS	30
Duration Range	30-120 seconds (900-3600 frames)
Scene Flow	problem(5s) > solution intro(5s) > features(15s each) > social proof(10s) > CTA(5s)
Background	Branded gradient or solid
Default Animations	fade transitions, scale for features
Best For	Product demos, feature showcases, SaaS walkthroughs

Props Schema:

typescript

{
  template: "ExplainerDemo",
  fps: 30,
  width: 1920,
  height: 1080,
  brand: BrandProps,
  scenes: SceneProps[],  // types: hook, point, demo, cta
  showProgressBar: boolean,
  showWatermark: boolean
}

6. CarouselAnimated

Property	Value
Aspect Ratio	4:5 (1080x1350)
FPS	30
Duration Range	15-60 seconds (450-1800 frames)
Scene Flow	cover(4s) > content slides(4s each) > CTA(4s)
Background	Inherits from carousel design spec or brand palette
Default Animations	slide-left transitions between slides
Best For	Animated versions of existing carousel content

Props Schema:

typescript

{
  template: "CarouselAnimated",
  fps: 30,
  width: 1080,
  height: 1350,
  brand: BrandProps,
  scenes: SceneProps[],  // types: hook, point, cta
  showProgressBar: boolean,
  showWatermark: boolean
}

Storyboard-to-Composition Mapping

Mapping Rules

The storyboard YAML produced by the video-producer agent must be translated into a Remotion composition JSON. Follow these rules exactly.

Scene Type Mapping

Storyboard Scene Type	Remotion SceneProps.type	Typical Animation	Notes
`hook`	`"hook"`	fade-in, scale-in	Always first scene. Must fire immediately.
`point`	`"point"`	slide-left, slide-right	Content scenes. Alternate directions for pattern interrupt.
`comparison`	`"comparison"`	wipe, slide-left	Before/after pairs. Use wipe for dramatic reveal.
`number`	`"number"`	counter-up	Numbers animate from 0 to target value.
`step`	`"step"`	slide-up, fade-in	Tutorial steps. Numbered prominently.
`demo`	`"demo"`	scale-in, fade-in	Product feature highlights.
`cta`	`"cta"`	bounce, scale-in	Always last scene. Brand handle visible.

Frame Calculation

For each scene in storyboard.scenes:
  scene.durationFrames = scene.duration * storyboard.fps
  scene.startFrame = sum of all previous scenes' durationFrames
 
Total composition frames:
  totalFrames = sum of all scene durationFrames

Example calculation (30fps):

Scene 1 (hook, 3s):     startFrame=0,    durationFrames=90
Scene 2 (point, 5s):    startFrame=90,   durationFrames=150
Scene 3 (point, 5s):    startFrame=240,  durationFrames=150
Scene 4 (point, 5s):    startFrame=390,  durationFrames=150
Scene 5 (cta, 4s):      startFrame=540,  durationFrames=120
Total:                   totalFrames=660  (22 seconds)

Brand Injection

Map brand-voice.yaml colors to Remotion BrandProps:

yaml

# Input: brand-voice.yaml
visual_identity:
  colors:
    primary: "#6c5ce7"
    secondary: "#00cec9"
    background: "#0a0a0a"
    text: "#ffffff"
    accent: "#fd79a8"
  handle: "@myhandle"
  name: "My Brand"
 
# Output: BrandProps
brand:
  name: "My Brand"
  handle: "@myhandle"
  colors:
    primary: "#6c5ce7"
    secondary: "#00cec9"
    background: "#0a0a0a"
    text: "#ffffff"
    accent: "#fd79a8"
  watermark_position: "bottom-right"

Composition Assembly

json

{
  "template": "<from storyboard.template>",
  "fps": 30,
  "width": "<from template spec>",
  "height": "<from template spec>",
  "totalFrames": "<calculated sum>",
  "brand": "<BrandProps from brand-voice.yaml>",
  "scenes": [
    {
      "type": "<mapped scene type>",
      "startFrame": "<calculated>",
      "durationFrames": "<scene.duration * fps>",
      "text": "<from storyboard scene>",
      "subtext": "<from storyboard scene, optional>",
      "icon": "<from storyboard scene, optional>",
      "animation": "<from storyboard scene>",
      "transition": "<from storyboard scene, default crossfade>"
    }
  ],
  "showProgressBar": true,
  "showWatermark": true
}

Timing and Pacing

Duration Rules by Scene Type

Scene Type	Minimum	Recommended	Maximum	Notes
`hook`	1.5s	2-3s	3s	Must fire immediately. Hook text readable in under 2s.
`point`	3s	4-6s	8s	One concept per scene. Text + subtext readable in duration.
`comparison`	4s	6-8s	10s	Before/after pair needs time to register contrast.
`number`	3s	4-5s	6s	Counter-up animation needs 2-3s, context text needs 2s.
`step`	8s	12-15s	20s	Tutorial steps need reading time + comprehension.
`demo`	8s	12-15s	20s	Product features need visual demonstration time.
`cta`	2s	3-4s	5s	Short, clear, actionable. Don't linger.

Pacing by Platform

Platform	Total Duration Sweet Spot	Scene Pacing	Hook Window
Instagram Reels	15-30s	Fast (3-5s per scene)	< 1.5s
YouTube Shorts	30-60s	Medium (4-6s per scene)	< 2s
TikTok	15-60s	Fast (3-5s per scene)	< 1s
YouTube (long)	60-180s	Measured (8-15s per scene)	< 3s

Pacing Rules

3-5 second visual change rule: No scene should go more than 5 seconds without a visible change (animation, new text, transition, or motion element).
Descending duration: Later scenes can be slightly shorter than earlier ones to create acceleration toward the CTA.
Hook compression: The hook scene should feel urgent. 2-3 seconds maximum. If the hook needs more time, the text is too long.
CTA brevity: The CTA scene is not for new information. Keep it under 4 seconds. The viewer has already decided to act or not.
Reading speed: Assume 150 words per minute for on-screen text. A 5-second scene supports approximately 12 words.

Animation Catalog

Ten animation types are available. Each maps to a Remotion animation implementation using useCurrentFrame() and interpolate().

Animation	Description	Best For	Remotion Implementation
`fade-in`	Opacity from 0 to 1 over 15 frames	Hook scenes, gentle reveals	`interpolate(frame, [0, 15], [0, 1])` on opacity
`fade-out`	Opacity from 1 to 0 over 15 frames	Scene exits, before transitions	`interpolate(frame, [end-15, end], [1, 0])` on opacity
`slide-left`	Element enters from right edge, slides to center	Content points (odd positions)	`interpolate(frame, [0, 20], [width, 0])` on translateX
`slide-right`	Element enters from left edge, slides to center	Content points (even positions)	`interpolate(frame, [0, 20], [-width, 0])` on translateX
`slide-up`	Element enters from bottom, slides to center	Steps, reveals, lists	`interpolate(frame, [0, 20], [height, 0])` on translateY
`scale-in`	Element scales from 0.5 to 1.0 with slight bounce	Hooks, reveals, emphasis	`interpolate(frame, [0, 20], [0.5, 1])` on scale with spring config
`bounce`	Element enters with elastic bounce effect	CTAs, emphasis, fun reveals	`spring({ frame, fps, config: { damping: 8, stiffness: 100 } })`
`typewriter`	Text appears character by character	Quotes, statements, dramatic reveals	Render substring `text.slice(0, charIndex)` per frame
`counter-up`	Number counts from 0 to target value	Statistics, metrics, data	`interpolate(frame, [0, durationFrames], [0, targetNumber])` rounded
`wipe`	Horizontal wipe reveals new content	Before/after reveals, dramatic transitions	ClipPath animation from `inset(0 100% 0 0)` to `inset(0 0 0 0)`

Animation Selection Rules

This is the start of the file. Read the full SKILL.md on GitHub.

Security

Security scanPassed, 90 of 100Pattern checks on the skill's files.
Model reviewPassed

See the full security report

Quality evaluation

Task evaluationNot runNo evaluation yet. Run one in Skill Studio.

See evaluation results

Source

SKILL.md in the repositoryCheckingskills/remotion-video/SKILL.md

Popularity

7-day trend score: 0

Not refreshed yet.

Works with

Any agent vskill installs to: 56 targets in all. These 39 have a page on this site.

Claude Code
Cursor
GitHub Copilot
Windsurf
Codex
Gemini CLI
Cline
Amp
Roo Code
Goose
Continue
Kilo Code
Junie
Trae
OpenHands
Qwen Code
AI Agent
Tabnine Chat
Sourcegraph Cody
Amazon Q
Firebase Genkit
Sweep
Devin
Phind
Mentat
Claude Desktop
Aider
GPT Pilot
Plandex
bolt.new
v0
Replit Agent
Anse
TypingMind
BetterChatGPT
LibreChat
Warp AI
Pieces
Fig AI

Embed badge

[![vskill VERIFIED](https://verified-skill.com/api/v1/skills/melgarafael/growthos/remotion-video/badge)](https://verified-skill.com/skills/melgarafael/growthos/remotion-video)

Something wrong with this skill or its page? Tell us.