From sundial-org-awesome-openclaw-skills-4
Generates MP4 videos from React components using Remotion. Covers animations, timing, rendering (CLI/Node.js/Lambda/Cloud Run), captions, 3D, charts, text effects, transitions. Use when building data-driven video pipelines.
npx claudepluginhub joshuarweaver/cascade-ai-ml-agents-misc-2 --plugin sundial-org-awesome-openclaw-skills-4This skill uses the workspace's default tool permissions.
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.
rules/3d.mdrules/animations.mdrules/assets.mdrules/assets/charts-bar-chart.tsxrules/assets/text-animations-typewriter.tsxrules/assets/text-animations-word-highlight.tsxrules/audio.mdrules/calculate-metadata.mdrules/can-decode.mdrules/charts.mdrules/compositions.mdrules/display-captions.mdrules/extract-frames.mdrules/fonts.mdrules/get-audio-duration.mdrules/get-video-dimensions.mdrules/get-video-duration.mdrules/gifs.mdrules/images.mdrules/import-srt-captions.mdGuides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Guides building MCP servers enabling LLMs to interact with external services via tools. Covers best practices, TypeScript/Node (MCP SDK), Python (FastMCP).
Generates original PNG/PDF visual art via design philosophy manifestos for posters, graphics, and static designs on user request.
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.
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.
npx create-video@latest@remotion/renderer, no separate install needed| Rule | Description |
|---|---|
| Compositions | Define videos, stills, folders, default props, dynamic metadata |
| Rendering | CLI, Node.js API, AWS Lambda, Cloud Run, Express server patterns |
| Calculate metadata | Set duration, dimensions, and props dynamically at render time |
| Rule | Description |
|---|---|
| Animations | Fade, scale, rotate, slide |
| Timing | Interpolation curves, easing, spring physics |
| Sequencing | Delay, chain, and orchestrate scenes |
| Transitions | Scene-to-scene transitions |
| Trimming | Cut the start or end of any animation |
| Rule | Description |
|---|---|
| Text animations | Typewriter, word highlight, reveal effects |
| Fonts | Google Fonts and local font loading |
| Measuring text | Fit text to containers, detect overflow |
| Rule | Description |
|---|---|
| Videos | Embed, trim, speed, volume, loop, pitch shift |
| Audio | Import, trim, fade, volume and speed control |
| Images | The Img component |
| GIFs | Timeline-synced GIF playback |
| Assets | Importing any media into compositions |
| Decode check | Validate browser compatibility |
| Rule | Description |
|---|---|
| Transcribe captions | Audio to captions via Whisper, Deepgram, or AssemblyAI |
| Display captions | TikTok-style word-by-word highlighting |
| Import SRT | Load existing .srt files |
| Rule | Description |
|---|---|
| Charts | Animated bar charts, line graphs, data-driven visuals |
| Rule | Description |
|---|---|
| 3D content | Three.js and React Three Fiber |
| Lottie | After Effects animations via Lottie |
| TailwindCSS | Style compositions with Tailwind |
| DOM measurement | Measure element dimensions at render time |
| Rule | Description |
|---|---|
| Video duration | Get length in seconds |
| Video dimensions | Get width and height |
| Audio duration | Get audio length |
| Extract frames | Pull frames at specific timestamps |
# 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"}'
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