Agent skill

Remotion Toolkit Extensions

by digitalsamba in digitalsamba/claude-code-video-toolkit

Toolkit-specific Remotion pieces for video projects: shared scene components, custom transitions such as glitch and light leak, and project conventions beside the official skill.

MITAuto-check passedMedia & Creative

Install Remotion Toolkit Extensions

skills CLI
$ npx skills add digitalsamba/claude-code-video-toolkit --skill remotion -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install digitalsamba/claude-code-video-toolkit remotion --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/digitalsamba/claude-code-video-toolkit.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/remotion .claude/skills/remotion && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
remotion
GitHub stars
2.2k
Used in
1 other repo
Token cost
~1.5k tokens
SKILL.md length
452 words
Files
2
Skills in repo
11
Repo updated
First seen
Licence
MIT

At a glance

Toolkit-specific Remotion pieces for video projects: shared scene components, custom transitions such as glitch and light leak, and project conventions beside the official skill.

  • Works in 3 steps: All projects use 30fps — Timing: frames… → playbackRate must be constant — For… → Video/audio components — Templates use…
  • Adding a glitch or light leak transition between Remotion scenes
  • SKILL.md covers Shared Components, Custom Transitions, Toolkit Conventions and Project Timing Conventions, plus 3 more sections
  • Calls npm

What it does

This skill covers what the video toolkit adds on top of core Remotion; framework basics live in a separate official skill. It documents shared components in lib/components, including an animated background with subtle, tech, warm and dark variants, scene transitions, labels, a vignette, a logo watermark, split screen, a picture-in-picture narrator, an animated envelope, a pointing hand and a corner decoration.

A custom transitions library in lib/transitions works with TransitionSeries from @remotion/transitions. A table lists glitch, rgbSplit, zoomBlur, lightLeak, clockWipe, pixelate and checkerboard with the options each accepts and the mood it suits, for example glitch for tech demos and lightLeak for celebrations. A separate reference.md file holds further material.

When your agent uses it

  • Adding a glitch or light leak transition between Remotion scenes
  • Reusing the toolkit's animated background or split-screen component
  • Following the toolkit's conventions when building a video template
  • Picking a transition that suits the tone of a scene

Example prompts

  • “Add a light leak transition between the intro and demo scenes of our Remotion video.”
  • “Put the animated tech background and a logo watermark on every scene of this template.”
  • “Switch the transition between slides to a checkerboard with a staggered animation.”

Requirements

  • A Remotion project that includes the toolkit's lib folder

Workflow steps

3 steps, taken from the first numbered list in SKILL.md.

  1. All projects use 30fps — Timing: frames = seconds × 30
  2. playbackRate must be constant — For variable/extreme speeds, pre-process with FFmpeg
  3. Video/audio components — Templates use and from remotion. Upstream now also documents / from @remotion/media (newer, has trim props +…

What it can do on your machine

Read from SKILL.md and the folder at commit 2c99460. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • npm

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Links to these hosts (documentation or services it may open):

    • github.com
    • remotion.dev

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Remotion Toolkit Extensions loads about 1.5k tokens when it runs. Until then it costs about 55 tokens; SKILL.md has 452 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~55
When it runs · the whole SKILL.md, loaded when a task matches
~1.5k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from digitalsamba/claude-code-video-toolkit at commit 2c99460, republished under its MIT licence (© digitalsamba). 452 words, ~1,542 tokens.

Download SKILL.mdSave it as .claude/skills/remotion/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.
name
remotion
description
Toolkit-specific Remotion patterns — custom transitions, shared components, and project conventions. For core Remotion framework knowledge (hooks, animations, rendering, etc.), see the `remotion-official` skill.

Remotion — Toolkit Extensions

Core Remotion knowledge lives in .claude/skills/remotion-official/ (synced from the official remotion-dev/skills repo). This file covers toolkit-specific patterns only.

Shared Components

Reusable video components in lib/components/. Import in templates via:

tsx
import { AnimatedBackground, SlideTransition, Label } from '../../../../lib/components';
ComponentPurpose
AnimatedBackgroundFloating shapes background (variants: subtle, tech, warm, dark)
SlideTransitionScene transitions (fade, zoom, slide-up, blur-fade)
LabelFloating label badge with optional JIRA reference
VignetteCinematic edge darkening overlay
LogoWatermarkCorner logo branding
SplitScreenSide-by-side video comparison
NarratorPiPPicture-in-picture presenter overlay
Envelope3D envelope with opening flap animation
PointingHandAnimated hand emoji with slide-in and pulse
MazeDecorationAnimated isometric grid decoration for corners

Custom Transitions

The toolkit includes a transitions library at lib/transitions/ for scene-to-scene effects beyond the official @remotion/transitions package.

Using TransitionSeries
tsx
import { TransitionSeries, linearTiming } from '@remotion/transitions';
// Import custom transitions from lib (adjust path based on your project location)
import { glitch, lightLeak, clockWipe, checkerboard } from '../../../../lib/transitions';
// Or import from @remotion/transitions for official ones
import { slide, fade } from '@remotion/transitions/slide';

<TransitionSeries>
  <TransitionSeries.Sequence durationInFrames={90}>
    <TitleSlide />
  </TransitionSeries.Sequence>
  <TransitionSeries.Transition
    presentation={glitch({ intensity: 0.8 })}
    timing={linearTiming({ durationInFrames: 30 })}
  />
  <TransitionSeries.Sequence durationInFrames={120}>
    <ContentSlide />
  </TransitionSeries.Sequence>
</TransitionSeries>
Available Custom Transitions
TransitionOptionsBest For
glitch()intensity, slices, rgbShiftTech demos, edgy reveals, cyberpunk
rgbSplit()direction, displacementModern tech, energetic transitions
zoomBlur()direction, blurAmountCTAs, high-energy moments, impact
lightLeak()temperature, directionCelebrations, film aesthetic, warm moments
clockWipe()startAngle, direction, segmentsTime-related content, playful reveals
pixelate()maxBlockSize, gridSize, scanlines, glitchArtifacts, randomnessRetro/gaming, digital transformations
checkerboard()gridSize, pattern, stagger, squareAnimationPlayful reveals, structured transitions

Checkerboard patterns: sequential, random, diagonal, alternating, spiral, rows, columns, center-out, corners-in

Transition Examples
tsx
// Tech/cyberpunk feel
glitch({ intensity: 0.8, slices: 8, rgbShift: true })

// Warm celebration
lightLeak({ temperature: 'warm', direction: 'right' })

// High energy zoom
zoomBlur({ direction: 'in', blurAmount: 20 })

// Chromatic aberration
rgbSplit({ direction: 'diagonal', displacement: 30 })

// Clock sweep reveal
clockWipe({ direction: 'clockwise', startAngle: 0 })

// Retro pixelation
pixelate({ maxBlockSize: 50, glitchArtifacts: true })

// Checkerboard patterns
checkerboard({ pattern: 'diagonal', gridSize: 8 })
checkerboard({ pattern: 'spiral', gridSize: 10 })
checkerboard({ pattern: 'center-out', squareAnimation: 'scale' })
Transition Duration Guidelines
TypeFramesNotes
Quick cut15-20Fast, punchy
Standard30-45Most common
Dramatic50-60Slow reveals
Glitch effects20-30Should feel sudden
Light leak45-60Needs time to sweep
Preview Transitions

Run the showcase gallery to see all transitions:

bash
cd showcase/transitions && npm run studio
Show full SKILL.md (216 more words)Show less

Toolkit Conventions

These are choices specific to this toolkit. For general Remotion best practices (interpolation clamping, useVideoConfig, delayRender, staticFile, no CSS animations), see the remotion-official skill.

  1. All projects use 30fps — Timing: frames = seconds × 30
  2. playbackRate must be constant — For variable/extreme speeds, pre-process with FFmpeg
  3. Video/audio components — Templates use <OffthreadVideo> and <Audio> from remotion. Upstream now also documents <Video>/<Audio> from @remotion/media (newer, has trim props + pitch shifting). Both render correctly; prefer the toolkit's choice when extending existing templates for consistency.

Project Timing Conventions

Scene TypeDurationNotes
Title3-5s (90-150f)Logo + headline
Overview10-20s3-5 bullet points
Demo10-30sAdjust playbackRate to fit
Stats8-12s3-4 stat cards
Credits5-10sQuick fade

Pacing: ~150 words/minute for voiceover. Voiceover drives timing.

Advanced API

For detailed API documentation on all hooks, components, renderer, Lambda, and Player APIs, see reference.md.

License Note

Remotion has a special license. Companies may need to obtain a license for commercial use. Check https://remotion.dev/license


Feedback & Contributions

If this skill is missing information or could be improved:

  • Missing a pattern? Describe what you needed
  • Found an error? Let me know what's wrong
  • Want to contribute? I can help you:
    1. Update this skill with improvements
    2. Create a PR to github.com/digitalsamba/claude-code-video-toolkit

Just say "improve this skill" and I'll guide you through updating .claude/skills/remotion/SKILL.md.

© digitalsamba, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 1 other file in .claude/skills/remotion of digitalsamba/claude-code-video-toolkit.

  • SKILL.md
  • reference.md

Open the folder on GitHubat commit 2c99460

Used in 1 other repository

We found 2 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in digitalsamba/claude-code-video-toolkit, which our catalogue first saw on October 7, 2026.

Compare with similar skills

Remotion Toolkit Extensions next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Remotion Toolkit Extensions compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Remotion Toolkit Extensions this skilldigitalsamba/claude-code-video-toolkit2.2k1 repos~1.5kAutomated safety check: PassMIT
HyperFrames Video Entry Pointheygen-com/hyperframes59k3 repos~5.2kAutomated safety check: PassApache-2.0
Create Remotion GeistMarve10s/Better-Fullstack752—~1.4kAutomated safety check: PassMIT
Skill Authoringnotivn/AIEV126—~925Automated safety check: PassMIT
Stitch to Remotion Walkthrough Videosgoogle-labs-code/stitch-skills8.4k6 repos~3.2kAutomated safety check: NotesApache-2.0
Video ShotcraftVincentwei1021/video-shotcraft11k—~2.6kAutomated safety check: PassApache-2.0

Similar skills

  • HyperFrames Video Entry Point

    heygen-com/hyperframes

    Entry point for making, editing and rendering videos from HTML compositions with HyperFrames, routing each request to the right workflow.

    59k GitHub starsUsed in 3 repos~5.2k tokens
    Media & CreativeAuto-check passed
  • Create Remotion Geist

    Marve10s/Better-Fullstack

    Create Remotion videos using the Geist design system aesthetic.

    752 GitHub stars~1.4k tokensUpdated today
    Media & CreativeAuto-check passed
  • Skill Authoring

    notivn/AIEV

    The standard for writing new skills for the AI Edit Video system - file structure, frontmatter, tone of voice, and how to accumulate production lessons into skills.

    126 GitHub stars~925 tokensUpdated today
    Media & CreativeAuto-check passed
  • Stitch to Remotion Walkthrough Videos

    google-labs-code/stitch-skills

    Official

    Builds walkthrough videos from Stitch design projects using Remotion, with transitions, zoom effects and text overlays on each screen.

    8.4k GitHub starsUsed in 6 repos~3.2k tokens
    Media & CreativeAuto-check: notes
  • Video Shotcraft

    Vincentwei1021/video-shotcraft

    Makes cinematic product videos with Remotion from shot recipe cards, a ready template, real page screenshots, camera moves and sound design, or builds a single animated shot.

    11k GitHub stars~2.6k tokensUpdated 3 days ago
    Media & CreativeAuto-check passed
  • Remotion to HyperFrames Porter

    heygen-com/hyperframes

    Ports an existing Remotion (React) composition to HyperFrames HTML with GSAP, one way, and grades the result against a tiered set of reference fixtures.

    59k GitHub starsUsed in 3 repos~2.8k tokens
    Media & CreativeAuto-check passed

More from digitalsamba/claude-code-video-toolkit

All 11 skills in this repo
  • FFmpeg for Video Production

    digitalsamba/claude-code-video-toolkit

    Command recipes for converting, resizing, compressing, trimming and extracting audio from video with FFmpeg, including settings for Remotion projects.

    2.2k GitHub starsUsed in 3 repos~3.3k tokens
    Auto-check passed
  • LTX-2.3 Video Generation

    digitalsamba/claude-code-video-toolkit

    Generates roughly five-second video clips from a text prompt or a still image with the LTX-2.3 22B model, run through a Modal endpoint by `tools/ltx2.py`.

    2.2k GitHub starsUsed in 2 repos~2.4k tokens
    Auto-check: notes
  • ElevenLabs Voiceover Generator

    digitalsamba/claude-code-video-toolkit

    Generates narration, sound effects and cloned voices through the ElevenLabs API, with model and setting choices tuned to the content's style.

    2.2k GitHub starsUsed in 1 repo~2.7k tokens
    Auto-check: notes
  • Ideogram 4 Prompt Builder

    digitalsamba/claude-code-video-toolkit

    Turns a casual image request into the structured JSON caption Ideogram 4 needs for legible on-image text, exact brand colors and controlled layout.

    2.2k GitHub starsUsed in 1 repo~1.3k tokens
    Auto-check: notes
  • Playwright Browser Demo Recording

    digitalsamba/claude-code-video-toolkit

    Records browser interactions as video with Playwright, covering viewport sizing, cursor highlighting, and converting output for Remotion.

    2.2k GitHub starsUsed in 1 repo~3.2k tokens
    Auto-check passed
  • Qwen Edit

    digitalsamba/claude-code-video-toolkit

    AI image editing prompting patterns for Qwen-Image-Edit. An agent skill from digitalsamba/claude-code-video-toolkit.

    2.2k GitHub starsUsed in 1 repo~711 tokens
    Auto-check passed

Works with

Questions about Remotion Toolkit Extensions

What does Remotion Toolkit Extensions do?

Toolkit-specific Remotion pieces for video projects: shared scene components, custom transitions such as glitch and light leak, and project conventions beside the official skill. This skill covers what the video toolkit adds on top of core Remotion; framework basics live in a separate official skill. It documents shared components in lib/components, including an animated background with subtle, tech, warm and dark variants, scene transitions, labels, a vignette, a logo watermark, split screen, a picture-in-picture narrator, an animated envelope, a pointing hand and a corner decoration.

When should I use Remotion Toolkit Extensions?

Remotion Toolkit Extensions fits situations like: adding a glitch or light leak transition between Remotion scenes; reusing the toolkit's animated background or split-screen component; following the toolkit's conventions when building a video template; picking a transition that suits the tone of a scene.

How do I install Remotion Toolkit Extensions in Claude Code?

Run `npx skills add digitalsamba/claude-code-video-toolkit --skill remotion -a claude-code`. Or copy the skill folder (.claude/skills/remotion in digitalsamba/claude-code-video-toolkit) into .claude/skills/remotion in your project. Claude Code loads it when a task matches its description.

How do I install Remotion Toolkit Extensions in Codex?

Run `npx skills add digitalsamba/claude-code-video-toolkit --skill remotion -a codex`. Or copy the skill folder (.claude/skills/remotion in digitalsamba/claude-code-video-toolkit) into .agents/skills/remotion in your project. Codex loads it when a task matches its description.

Can I use Remotion Toolkit Extensions in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add digitalsamba/claude-code-video-toolkit --skill remotion -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/remotion, .gemini/skills/remotion, .github/skills/remotion and .opencode/skills/remotion in your project.

What does Remotion Toolkit Extensions need to run?

Going by SKILL.md and its folder, Remotion Toolkit Extensions needs the command-line tools its instructions call (npm). Our summary lists: A Remotion project that includes the toolkit's lib folder.

Does Remotion Toolkit Extensions access the network?

SKILL.md names 2 domains. As links in the text: github.com and remotion.dev. This is read from the text; nothing was executed.

Is Remotion Toolkit Extensions safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Remotion Toolkit Extensions use?

Remotion Toolkit Extensions is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Remotion Toolkit Extensions use?

About 1.5k tokens (SKILL.md is roughly 6.2k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Remotion Toolkit Extensions?

Skills that share tags, products or a category with Remotion Toolkit Extensions: HyperFrames Video Entry Point (heygen-com/hyperframes, 59k stars), Create Remotion Geist (Marve10s/Better-Fullstack, 752 stars), Skill Authoring (notivn/AIEV, 126 stars) and Stitch to Remotion Walkthrough Videos (google-labs-code/stitch-skills, 8.4k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Remotion Toolkit Extensions?

digitalsamba (a GitHub organization) maintains it in digitalsamba/claude-code-video-toolkit, which has 2,174 GitHub stars. The repository holds 11 skills in this directory. The repository was last updated on October 5, 2026.

Source: digitalsamba/claude-code-video-toolkit on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.