Skip to main content
affpapa.org
RU EN
skill Claude Code CX Codex Cursor GitHub Copilot

remotion · calesthio — Claude Code skill: what it does, how to install

Teaches AI agents toolkit-specific Remotion patterns, including custom transition shaders and 30 fps video rules.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add calesthio/OpenMontage --skill remotion -a claude-code
Open on GitHub

What remotion does

This skill adds project-level conventions from the OpenMontage toolkit on top of Remotion. It outlines shared React components in lib/components/—such as AnimatedBackground, SplitScreen, and NarratorPiP—alongside custom transitions like glitch, lightLeak, and clockWipe for TransitionSeries.

Core Remotion hooks remain in the companion remotion-official skill, so this set focuses strictly on toolkit standards. It enforces 30 fps composition math, frame-driven animations instead of flickering CSS transitions, and OffthreadVideo for heavy compositions. Variable playback rates will break without prior FFmpeg preprocessing, which is a key limitation to keep in mind.

What it helps with

  • apply custom glitch and light leak transitions in TransitionSeries
  • set up picture-in-picture presenter overlays using NarratorPiP
  • structure scene durations based on a 150 words-per-minute voiceover pace
  • add animated background elements with clamped frame interpolation

Example prompts for the agent

  • Add a 30-frame glitch transition between the intro and main content sequences
  • Build a side-by-side comparison screen using SplitScreen and Vignette
  • Configure an AnimatedBackground component using the dark variant for 90 frames

How to install remotion

1Skills CLI (Vercel)

npx skills add calesthio/OpenMontage --skill remotion -a claude-code

2Manually: put the files in place

~/.claude/skills/remotion/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/remotion/

From the same set28

The whole set →
video-understand calesthio This skill extracts video frames and transcribes audio locally with ffmpeg and Whisper. Use it to inspect video content without API keys. Claude Code CX Codex Cursor +1 1,300installs video-download calesthio Uses yt-dlp to fetch video, audio, subtitles, or URL metadata. Use it when you need a local file, a selected resolution, or details without downloading media. Claude Code CX Codex Cursor +1 1,200installs lottie-bodymovin calesthio Applies Disney's 12 animation principles to Lottie vector animations. Bridges After Effects setup with runtime JavaScript controls. Claude Code CX Codex Cursor +1 1,100installs create-video calesthio This skill turns a description into a finished video: write what you want to see, and HeyGen generates the script, picks an avatar, adds voiceover and editing. Good for quick demos, explainers and promos without tweaking every detail. Claude Code CX Codex Cursor +1 1,100installs video-toolkit calesthio Automates video creation: generates voiceovers, background music, animates talking heads, and composes scenes with Remotion. Requires Node.js, Python3, ffmpeg, and cloud GPU access (Modal or RunPod). Claude Code CX Codex Cursor +1 1,100installs text-to-speech calesthio Generates speech audio with HeyGen Starfish and lets you choose a voice, speed, and pitch. Useful for voiceovers, narration, and podcasts. Claude Code CX Codex Cursor +1 1,100installs bfl-api Black Forest Labs This skill helps connect BFL FLUX API for image generation and editing. It covers async requests, polling, rate limits, and webhooks. Claude Code CX Codex Cursor +1 1,000installs threejs-textures calesthio Skill for working with Three.js textures: image loading, UV coordinates, cubemaps, HDR environments and optimization. Use when building 3D scenes with materials, skyboxes and reflection maps. Claude Code CX Codex Cursor +1 1,000installs

Other versions of remotion

remotion official google-labs-code Turns Stitch project screens into a Remotion walkthrough with transitions, zoom effects, and text overlays. Useful for presenting an interface screen by screen. Claude Code CX Codex Cursor +1 41,300installs remotion vercel-labs A skill that turns JSON timeline specs into ready-made video compositions via Remotion. Use it when you need to generate videos programmatically or assemble video clip catalogs from data. Claude Code CX Codex Cursor +1 1,700installs

Similar

cookie-debugging ChromeDevTools Skill for inspecting cookies, sessions, and authentication errors via Chrome DevTools MCP. Diagnoses 401/403, auth redirects, Set-Cookie issues, and verifies cookie consent compliance. Claude Code CX Codex Cursor +1 856installs extract-design Manavarya09 This skill analyzes a website URL and generates files describing its design system. Use it to bring a site's colors, typography, and component patterns into a project. Claude Code CX Codex Cursor +1 2,900installs ffmpeg digitalsamba Production-ready FFmpeg recipes for video resizing, compression, audio extraction, and asset preparation for Remotion. Claude Code CX Codex Cursor +1 11,600installs react-native vercel-labs This skill turns JSON specs into native React Native mobile UIs. Use it when screens need state bindings, conditional visibility, and actions. Claude Code CX Codex Cursor +1 3,200installs uizze-ui UIZZE Guides the agent through layout fixes, typography adjustments, and UI state handling. Helpful when improving component hierarchy using existing project tokens. Claude Code CX Codex Cursor +1 144,000installs ui tw93 This skill builds and refines production interfaces with a clear visual direction and screenshot-based checks. Use it for pages, components, and typography. Claude Code CX Codex Cursor +1 4,300installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. Claude Code Claude.ai 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. Claude Code CX Codex Cursor +1 673,100installs

Questions about remotion

How do I install remotion in Claude Code?

Run npx skills add calesthio/OpenMontage --skill remotion -a claude-code in your terminal. The configuration is stored at ~/.claude/skills/remotion/SKILL.md.

What is the difference between remotion and remotion-official?

This skill covers OpenMontage toolkit extensions, custom transition functions, and project timing conventions. Core framework APIs and hooks live in remotion-official.

Does Remotion require a commercial license?

Remotion uses a dedicated license where companies may need a paid commercial tier. Check the official Remotion licensing terms before shipping client projects.

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor