zai-org/synapse/remotion-video-toolkit

Trust tier 3
  • community
Source check pending

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

Complete toolkit for programmatic video creation with Remotion + React. Covers animations, timing, rendering (CLI/Node.js/Lambda/Cloud Run), captions, 3D, charts, text effects, transitions, and media handling. Use when writing Remotion code, building video generation pipelines, or creating data-driven video templates.

Install

npx vskill@latest install zai-org/synapse/remotion-video-toolkit

SKILL.md

Remotion Video Toolkit

Write React components, get real MP4 videos. This skill teaches your AI agent how to build with Remotion — from a first animation to a production rendering pipeline.

29 rules. Every major Remotion feature covered.

What you can build with this

Personalized video at scale Feed user data as JSON props, render a unique video per user. Think Spotify Wrapped, GitHub Unwrapped, onboarding walkthroughs — one template, thousands of outputs.

Automated social media clips Pull live data (stats, leaderboards, product metrics) and render daily or weekly video posts without anyone touching a timeline editor.

Dynamic ads and marketing videos Swap in customer name, product image, pricing. Same template, infinite variations. Render server-side via API or Lambda.

Animated data visualizations Turn dashboards and KPI reports into shareable video clips with animated charts and transitions.

TikTok and Reels captions Transcribe audio, display word-by-word highlighted subtitles, export ready for upload.

Product showcase videos Auto-generate from your database — images, specs, pricing — straight to MP4.

Educational and explainer content Animated course materials, certificate videos, step-by-step walkthroughs — all driven by code.

Video generation as a service Expose rendering as an HTTP endpoint. Your app sends JSON, gets back a video file.

Requirements

  • Node.js 18+
  • React 18+ (Remotion renders React components frame-by-frame)
  • Remotion — scaffold with npx create-video@latest
  • FFmpeg — ships with @remotion/renderer, no separate install needed
  • For serverless rendering: AWS account (Lambda) or GCP account (Cloud Run)

What's inside

Core
RuleDescription
CompositionsDefine videos, stills, folders, default props, dynamic metadata
RenderingCLI, Node.js API, AWS Lambda, Cloud Run, Express server patterns
Calculate metadataSet duration, dimensions, and props dynamically at render time
Animation and timing
RuleDescription
AnimationsFade, scale, rotate, slide
TimingInterpolation curves, easing, spring physics
SequencingDelay, chain, and orchestrate scenes
TransitionsScene-to-scene transitions
TrimmingCut the start or end of any animation
Text and typography
RuleDescription
Text animationsTypewriter, word highlight, reveal effects
FontsGoogle Fonts and local font loading
Measuring textFit text to containers, detect overflow
Media
RuleDescription
VideosEmbed, trim, speed, volume, loop, pitch shift
AudioImport, trim, fade, volume and speed control
ImagesThe Img component
GIFsTimeline-synced GIF playback
AssetsImporting any media into compositions
Decode checkValidate browser compatibility
Captions and subtitles
RuleDescription
Transcribe captionsAudio to captions via Whisper, Deepgram, or AssemblyAI
Display captionsTikTok-style word-by-word highlighting
Import SRTLoad existing .srt files
Data visualization
RuleDescription
ChartsAnimated bar charts, line graphs, data-driven visuals
Advanced
RuleDescription
3D contentThree.js and React Three Fiber
LottieAfter Effects animations via Lottie
TailwindCSSStyle compositions with Tailwind
DOM measurementMeasure element dimensions at render time
Media utilities
RuleDescription
Video durationGet length in seconds
Video dimensionsGet width and height
Audio durationGet audio length
Extract framesPull frames at specific timestamps

Quick start

bash
# Scaffold a project
npx create-video@latest my-video
 
# Preview in browser
cd my-video && npm start
 
# Render to MP4
npx remotion render src/index.ts MyComposition out/video.mp4
 
# Pass dynamic data
npx remotion render src/index.ts MyComposition out.mp4 --props '{"title": "Hello"}'

Contribute

Source: github.com/shreefentsar/remotion-video-toolkit

Missing something? Found a better approach? Open a PR — new rules, improved examples, bug fixes all welcome.

Built by Zone 99

Security

  • Security scanPassed, 95 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

Popularity

Repository stars
407
Repository forks
28
7-day trend score
30

Stars and forks are for the whole GitHub repository, not this skill alone. Refreshed 28 Jul 2026, 3 months ago.

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 badge
[![vskill VERIFIED](https://verified-skill.com/api/v1/skills/zai-org/synapse/remotion-video-toolkit/badge)](https://verified-skill.com/skills/zai-org/synapse/remotion-video-toolkit)

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