Remotion Video Creation Agent Skills
Build React-powered videos with AI-guided best practices and workflows
What You Can Do
This comprehensive skill collection guides you through creating professional videos programmatically using Remotion and React. Create new video projects, structure complex multi-scene compositions, and animate content with full interactivity. Add captions by transcribing audio, importing SRT files, or generating them programmatically. Build animated maps with Mapbox, MapLibre, or GeoJSON, including 3D geographic flyovers. Process multimedia by trimming, cropping, and extracting metadata from video and audio files.
Features
Scaffold new Remotion projects and compositions with best practices, including TailwindCSS support and video-first layout guidance
Transcribe, import (SRT), display, and animate captions with precise timing control and confidence scoring
Structure React markup to unlock interactive editing in Remotion Studio, enabling drag+drop, resizing, keyframe editing, and style changes
Create static maps, animated routes, markers, geographic explainers, and 3D flyovers using Mapbox, MapLibre, MapTiler, or GeoJSON data
Trim, crop, and extract metadata from videos and audio files with browser-based multimedia utilities
Optimize rendering beyond simple CLI commands, including Lambda rendering, Vercel deployment, and Cloudflare integration
Build Remotion-powered SaaS applications, automation tools, and APIs using Player components, client-side rendering, and templates
Search current Remotion documentation via Algolia API and fetch Markdown versions of docs for up-to-date API knowledge
Example Output
Creating a new video project
npx create-video@latest --yes --blank --no-tailwind my-promo-video
cd my-promo-video
npm i
This scaffolds a new Remotion project with all dependencies installed and ready for composition development.
Adding animated captions to a video
// Transcribe your audio and generate captions in JSON format
// Display them in your composition with precise timing
<Captions captions={generatedCaptions} />
The skill handles transcription, SRT import, and animation of captions synchronized to your video timeline.
Creating an animated map with markers
// Structure your map with animated route paths and location markers
<InteractiveMap zoom={5} center={[lng, lat]} />
Build geographic visualizations with automatic flyover animations and real-time marker updates.
What's Included
- 12 Specialized Skills: Modular guides for best practices, video creation, captions, interactivity, maps, multimedia, rendering, studio setup, SaaS, docs lookup, and upgrading
- React Component Patterns: Interactive component templates, multi-scene video structures, and inline animation best practices for Remotion Studio
- Multi-Format Support: Handle captions via JSON, SRT files, or generated transcriptions, maps via Mapbox, MapLibre, MapTiler, and GeoJSON
- Deployment and Rendering Guides: Instructions for Lambda rendering, Vercel hosting, Cloudflare Workers, Express.js servers, and client-side rendering
- Studio Interactivity Setup: Patterns for making compositions interactive in Remotion Studio without breaking animatability
Who It's For
- Video Content Creators
- Full-Stack Developers
- SaaS Founders
- Marketing and Design Teams
Best For
- Building animated explainer videos
- Creating social media content programmatically
- Automating video generation at scale
- Building geographic visualizations
You might also like
This comprehensive collection includes 79 dedicated agent skills for all major Azure services and operations. You can automate Azure resource deployment and management, query infrastructure and logs with natural language using Kusto Graph and IRQL, analyze security events and detect threats, configure identity and access management through Entra ID, monitor application performance with Application Insights, manage storage and messaging services, execute cloud migration workflows, validate compliance policies, and query Azure resources by metadata or properties.
Search the web, scrape URLs into markdown/HTML/screenshots/links/images, extract structured JSON with AI prompts, crawl multi-page sites, and monitor pages for changes on a schedule. Supports browser automation features like JavaScript rendering, stealth mode, cookies, and custom headers. Perfect for data engineers, researchers, and developers who need API-free web data collection without writing scrapers.
This collection of skills improves code quality, architecture documentation, and team workflow coordination. Review Architecture Decision Records with fresh perspective and rewrite them for clarity, implement type-safe AST visitor patterns for robust code organization, automate Biome linting upgrades across monorepos, and generate well-structured GitHub pull requests integrated with Linear project tracking. Perfect for teams that care about maintainable code, clear decision documentation, and smooth development workflows.
This is a comprehensive engineering workflow system designed to guide you from an initial idea all the way to shipped code. It includes a main flow (idea → grill → spec → tickets → implement → review → ship), specialized skills for handling bugs, triage, and large architectural challenges, and foundational vocabulary skills for domain modeling and codebase design. Each skill works independently or as part of the larger workflow, giving you flexibility to adapt to your project's needs.
Superpowers provides Claude with a complete framework of specialized skills that teach AI agents how to approach software development systematically. Use it to brainstorm ideas into designs, execute detailed plans with checkpoints, dispatch parallel agents for independent tasks, and finish development branches with proper integration. The framework enforces best practices like design-first development, test-driven workflows, and comprehensive verification before completion.
Design and build animations using a proven decision sequence covering when to animate, which tools to use (CSS, WAAPI, Motion.dev), property selection, easing curves, and accessibility. Review existing animations and audit codebases for quality issues. Understand and name motion effects using a comprehensive vocabulary glossary. Learn from Emil Kowalski's opinionated motion design philosophy built on decades of interface engineering experience.
Render dynamic videos directly from HTML/code using Puppeteer and ffmpeg, with built-in support for AI voiceover, caption overlays, and motion animation. Convert markdown changelogs into polished 45-60 second branded videos with animated UI mockups, captions, and AI narration. Create explainer videos, product demos, and animated visualizations using code-first workflows and motion doctrines that enforce consistency and quality.
by heygen-comCreate production-ready mobile app designs by describing what you want in plain language. Use chat-based requests to design screens, iterate with follow-up messages, and export code implementations for HTML, React Native, and SwiftUI. Features include live design preview in the Sleek editor, component screenshot generation, and built-in design references to seed your visual style.