โ† All skills
Tencent SkillHub ยท Productivity

Remotion Video Toolkit

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.

skill openclawclawhub Free
0 Downloads
0 Stars
0 Installs
0 Score
High Signal

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.

โฌ‡ 0 downloads โ˜… 0 stars Unverified but indexed

Install for OpenClaw

Quick setup
  1. Download the package from Yavira.
  2. Extract the archive and review SKILL.md first.
  3. Import or place the package into your OpenClaw setup.

Requirements

Target platform
OpenClaw
Install method
Manual import
Extraction
Extract archive
Prerequisites
OpenClaw
Primary doc
SKILL.md

Package facts

Download mode
Yavira redirect
Package format
ZIP package
Source platform
Tencent SkillHub
What's included
SKILL.md, rules/3d.md, rules/animations.md, rules/assets/charts-bar-chart.tsx, rules/assets/text-animations-typewriter.tsx, rules/assets/text-animations-word-highlight.tsx

Validation

  • Use the Yavira download entry.
  • Review SKILL.md after the package is downloaded.
  • Confirm the extracted package contains the expected setup assets.

Install with your agent

Agent handoff

Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.

  1. Download the package from Yavira.
  2. Extract it into a folder your agent can access.
  3. Paste one of the prompts below and point your agent at the extracted folder.
New install

I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Tell me what you changed and call out any manual steps you could not complete.

Upgrade existing

I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Summarize what changed and any follow-up checks I should run.

Trust & source

Release facts

Source
Tencent SkillHub
Verification
Indexed source record
Version
1.4.0

Documentation

ClawHub primary doc Primary doc: SKILL.md 13 sections Open source page

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)

Core

RuleDescriptionCompositionsDefine videos, stills, folders, default props, dynamic metadataRenderingCLI, Node.js API, AWS Lambda, Cloud Run, Express server patternsCalculate metadataSet duration, dimensions, and props dynamically at render time

Animation and timing

RuleDescriptionAnimationsFade, scale, rotate, slideTimingInterpolation curves, easing, spring physicsSequencingDelay, chain, and orchestrate scenesTransitionsScene-to-scene transitionsTrimmingCut the start or end of any animation

Text and typography

RuleDescriptionText animationsTypewriter, word highlight, reveal effectsFontsGoogle Fonts and local font loadingMeasuring textFit text to containers, detect overflow

Media

RuleDescriptionVideosEmbed, trim, speed, volume, loop, pitch shiftAudioImport, trim, fade, volume and speed controlImagesThe Img componentGIFsTimeline-synced GIF playbackAssetsImporting any media into compositionsDecode checkValidate browser compatibility

Captions and subtitles

RuleDescriptionTranscribe captionsAudio to captions via Whisper, Deepgram, or AssemblyAIDisplay captionsTikTok-style word-by-word highlightingImport SRTLoad existing .srt files

Data visualization

RuleDescriptionChartsAnimated bar charts, line graphs, data-driven visuals

Advanced

RuleDescription3D contentThree.js and React Three FiberLottieAfter Effects animations via LottieTailwindCSSStyle compositions with TailwindDOM measurementMeasure element dimensions at render time

Media utilities

RuleDescriptionVideo durationGet length in secondsVideo dimensionsGet width and heightAudio durationGet audio lengthExtract framesPull frames at specific timestamps

Quick start

# 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

Category context

Workflow acceleration for inboxes, docs, calendars, planning, and execution loops.

Source: Tencent SkillHub

Largest current source with strong distribution and engagement signals.

Package contents

Included in package
3 Docs3 Assets
  • SKILL.md Primary doc
  • rules/3d.md Docs
  • rules/animations.md Docs
  • rules/assets/charts-bar-chart.tsx Assets
  • rules/assets/text-animations-typewriter.tsx Assets
  • rules/assets/text-animations-word-highlight.tsx Assets