remotion
Create programmatic videos with React. Official Remotion skill package — compose video sequences using React components, animate with spring physics, and render to MP4/GIF. Ideal for product demos, explainers, and data-driven videos.
- Installs
- 209
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/podo/design-agent-skills --skill remotion- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads remotion automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
remotion
<!-- das:install:start — generated from stub.yaml by `npm run generate`; edit stub.yaml, not this block -->Catalogue stub — full package: remotion-dev/skills
Decision tree
-
Is the full skill already installed? This package installs 12 skills (
remotion-best-practices,remotion-captions,remotion-create,remotion-docs,remotion-interactivity,remotion-maps,remotion-markup,remotion-multimedia,remotion-render,remotion-saas,remotion-studio,remotion-upgrade); checking the first.- Global:
f=~/.agents/skills/remotion-best-practices/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer" - Project:
f=.agents/skills/remotion-best-practices/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer" installed→ the skill is installed asremotion-best-practices, invoke it and proceedpointer→ go to step 2
- Global:
-
Detect scope, then install:
[ -e ~/.agents/skills/remotion ] && echo "global" || echo "project"Global:
npx skills add remotion-dev/skills --skill remotion-best-practices remotion-captions remotion-create remotion-docs remotion-interactivity remotion-maps remotion-markup remotion-multimedia remotion-render remotion-saas remotion-studio remotion-upgrade -g -yProject:
npx skills add remotion-dev/skills --skill remotion-best-practices remotion-captions remotion-create remotion-docs remotion-interactivity remotion-maps remotion-markup remotion-multimedia remotion-render remotion-saas remotion-studio remotion-upgrade -yClaude Code: send a command as a chat message starting with
!to run it without leaving the conversation.
Heads-up
- Requires: Node.js and a Remotion project (remotion-create scaffolds one)
- License: skills repo has no LICENSE file; Remotion itself is free for individuals, non-profits and for-profit teams up to 3 employees, otherwise a company license is required (remotion.dev/license)
- Name collision:
remotionis also written bygoogle-stitch-skills(its install or its catalogue pointer); installing both overwrites the earlier one.
Invoke after install
- Skill names:
remotion-best-practices,remotion-create,remotion-markup,remotion-studio,remotion-render,remotion-captions,remotion-multimedia,remotion-maps,remotion-interactivity,remotion-saas,remotion-docs,remotion-upgrade - Not sure which one? Start with
remotion-best-practices, which routes to the others - Trigger phrases: "remotion", "programmatic video", "React video", "animated video", "render video"
What it does
Official Remotion skill package for creating programmatic videos with React. Compose video sequences as React components, animate with spring physics and interpolation, and render to MP4, WebM, or GIF. The sub-skills cover scaffolding a new project (remotion-create), markup best practices (remotion-markup), previewing in Remotion Studio (remotion-studio), rendering (remotion-render), captions, Mediabunny media handling (remotion-multimedia), map animations (remotion-maps), interactivity, building a SaaS app around Remotion, searching the docs and version upgrades. Best for product demos, data-driven visualizations, and explainer animations that require code-controlled precision.
Note that Remotion itself is licensed per organization size: free for individuals and very small companies, a company license for larger for-profit teams.
When NOT to use
- Simple CSS/JS animation without video export (use
gsap-skillsorframer-motion-skills) - Non-React video pipelines (use
hyperframesfor HTML-to-video)
FAQ
What does the remotion skill do?
Create programmatic videos with React. Official Remotion skill package — compose video sequences using React components, animate with spring physics, and render to MP4/GIF. Ideal for product demos, explainers, and data-driven videos.
How do I install remotion?
Run npx skills add https://github.com/podo/design-agent-skills --skill remotion in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/remotion/ (personal) or .claude/skills/remotion/ (project).
Which AI agents can use remotion?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is remotion safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains remotion?
It is published by podo in podo/design-agent-skills. It has 209 recorded installs.
More from podo/design-agent-skills
distinctive-frontend
podo/design-agent-skills
Generates distinctive interfaces that avoid generic AI aesthetics, using extreme typography, cohesive themes (Cyberpunk, Brutalist, Vaporwave, Nordic Minimalism), orchestrated staggered animations, and layered backgrounds. Originally published as Koomook/claude-frontend-skills; installed from a verbatim mirror.
taste-skill
podo/design-agent-skills
Anti-slop frontend art direction (tasteskill v2). Deals researched design directions for a page or app screen from a library built from curated gallery sites, enforces a strict no-generic-AI-UI house style with a real-browser inspector, and runs a look-and-fix loop on screenshots. Works in any web stack.
emilkowalski-skill
podo/design-agent-skills
Emil Kowalski's design engineering skills. Creator of Sonner, Vaul, and animations.dev. Covers the animation decision framework, custom easing curves, component interaction principles, and typography rules, plus skills to review, audit, and improve motion, performance, and native-feeling mobile web UI.
ui-craft
podo/design-agent-skills
Design engineering skill for AI coding agents: opinionated rules for how interfaces should look, move, and feel, a required discovery phase before coding, domain references, three style variants (minimal, editorial, dense-dashboard), and an anti-slop approach that flags generic patterns such as centered hero sections, Inter-only typography, and three-column card grids. Covers premium UI taste, component patterns, and design-engineering workflows.
color-expert
podo/design-agent-skills
A large color-science knowledge base applied to UI/UX design. Covers OKLCH/OKLAB color spaces, palette generation, accessibility contrast ratios, color naming, pigment mixing, and historical color theory. By meodai, creator of color-names.
apple-hig-skills
podo/design-agent-skills
Apple Human Interface Guidelines as agent skills covering iOS, macOS, visionOS, watchOS, and tvOS. From raintree-technology, makers of the Apple HIG compliance website.
Popular media & creative skills
hyperframes
heygen-com/hyperframes
Read first to make, edit, animate or render any video with HyperFrames (HTML rendered to video), including launch films, explainers, music videos, charts, maps, vertical clips, title cards, captions and overlays. Holds the render contract, the work loop and what each kind of video needs.
media-use
heygen-com/hyperframes
Get or make any media for a HyperFrames video - music, sound effects, images, icons, logos, voiceover, avatar and generated video, transcripts, cutouts, colour grades and looks - with HeyGen or free local tools, and mix placed audio. Also for footage that looks dark, flat or dull, or should be stylized or hidden.
hyperframes-registry
heygen-com/hyperframes
About 450 ready-made HyperFrames blocks and components installed as editable source - transitions, overlays, titles, kinetic type, captions, charts, map overlays, 3D, camera moves. Use it before hand-building any named visual (CRT scanlines, glitch, film grain, a chart); also for hyperframes add and catalog.
hyperframes-creative
heygen-com/hyperframes
Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use hyperframes-animation.
ai-video-generation
101-skills/superpowers
Generate AI videos with Google Veo, Seedance 2.0, HappyHorse, Wan, Grok and 40+ models via inference.sh CLI. Models: Veo 3.1, Veo 3, Seedance 2.0, HappyHorse 1.0, Wan 2.5, Grok Imagine Video, OmniHuman, Fabric, HunyuanVideo. Capabilities: text-to-video, image-to-video, reference-to-video, video editing, lipsync, avatar animation, video upscaling, foley sound. Use for: social media videos, marketing content, explainer videos, product demos, AI avatars. Triggers: video generation, ai video, text to video, image to video, veo, animate image, video from image, ai animation, video generator, generate video, t2v, i2v, ai video maker, create video with ai, runway alternative, pika alternative, sora alternative, kling alternative, seedance, happyhorse
ai-image-generation
101-skills/superpowers
Generate AI images with GPT-Image-2, FLUX, Gemini, Grok, Seedream, Reve and 50+ models via inference.sh CLI. Models: GPT-Image-2, FLUX Dev LoRA, FLUX.2 Klein LoRA, Gemini 3 Pro Image, Grok Imagine, Seedream 4.5, Reve, ImagineArt. Capabilities: text-to-image, image-to-image, inpainting, LoRA, image editing, upscaling, text rendering. Use for: AI art, product mockups, concept art, social media graphics, marketing visuals, illustrations. Triggers: flux, image generation, ai image, text to image, stable diffusion, generate image, ai art, midjourney alternative, dall-e alternative, text2img, t2i, image generator, ai picture, create image with ai, generative ai, ai illustration, grok image, gemini image, gpt image, openai image, chatgpt image