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.
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.
$ npx skills add digitalsamba/claude-code-video-toolkit --skill remotion -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install digitalsamba/claude-code-video-toolkit remotion --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ 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-srcUse ~/.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/
Install the "remotion" agent skill from https://github.com/digitalsamba/claude-code-video-toolkit/tree/main/.claude/skills/remotion into .claude/skills/remotion/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "remotion", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/digitalsamba/claude-code-video-toolkit/tree/main/.claude/skills/remotionType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add digitalsamba/claude-code-video-toolkit --skill remotion -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install digitalsamba/claude-code-video-toolkit remotion --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/digitalsamba/claude-code-video-toolkit.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.claude/skills/remotion .agents/skills/remotion && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "remotion" agent skill from https://github.com/digitalsamba/claude-code-video-toolkit/tree/main/.claude/skills/remotion into .agents/skills/remotion/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "remotion", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add digitalsamba/claude-code-video-toolkit --skill remotion -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install digitalsamba/claude-code-video-toolkit remotion --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/digitalsamba/claude-code-video-toolkit.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.claude/skills/remotion .cursor/skills/remotion && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "remotion" agent skill from https://github.com/digitalsamba/claude-code-video-toolkit/tree/main/.claude/skills/remotion into .cursor/skills/remotion/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "remotion", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/digitalsamba/claude-code-video-toolkit.git --path .claude/skills/remotion--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add digitalsamba/claude-code-video-toolkit --skill remotion -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install digitalsamba/claude-code-video-toolkit remotion --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/digitalsamba/claude-code-video-toolkit.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.claude/skills/remotion .gemini/skills/remotion && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "remotion" agent skill from https://github.com/digitalsamba/claude-code-video-toolkit/tree/main/.claude/skills/remotion into .gemini/skills/remotion/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "remotion", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install digitalsamba/claude-code-video-toolkit remotionInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add digitalsamba/claude-code-video-toolkit --skill remotion -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/digitalsamba/claude-code-video-toolkit.git skills-src && mkdir -p .github/skills && cp -r skills-src/.claude/skills/remotion .github/skills/remotion && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "remotion" agent skill from https://github.com/digitalsamba/claude-code-video-toolkit/tree/main/.claude/skills/remotion into .github/skills/remotion/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "remotion", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add digitalsamba/claude-code-video-toolkit --skill remotion -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install digitalsamba/claude-code-video-toolkit remotion --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/digitalsamba/claude-code-video-toolkit.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.claude/skills/remotion .opencode/skills/remotion && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "remotion" agent skill from https://github.com/digitalsamba/claude-code-video-toolkit/tree/main/.claude/skills/remotion into .opencode/skills/remotion/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "remotion", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
remotionToolkit-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.
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.
3 steps, taken from the first numbered list in SKILL.md.
Read from SKILL.md and the folder at commit 2c99460. It shows what the files ask for, not the result of running them.
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.
Shell commands in SKILL.md call:
npmFrom the folder's file list and the shell code blocks in SKILL.md.
Links to these hosts (documentation or services it may open):
github.comremotion.devFrom URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
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.
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.
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.
The full file from digitalsamba/claude-code-video-toolkit at commit 2c99460, republished under its MIT licence (© digitalsamba). 452 words, ~1,542 tokens.
.claude/skills/remotion/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.Core Remotion knowledge lives in
.claude/skills/remotion-official/(synced from the official remotion-dev/skills repo). This file covers toolkit-specific patterns only.
Reusable video components in lib/components/. Import in templates via:
import { AnimatedBackground, SlideTransition, Label } from '../../../../lib/components';| Component | Purpose |
|---|---|
AnimatedBackground | Floating shapes background (variants: subtle, tech, warm, dark) |
SlideTransition | Scene transitions (fade, zoom, slide-up, blur-fade) |
Label | Floating label badge with optional JIRA reference |
Vignette | Cinematic edge darkening overlay |
LogoWatermark | Corner logo branding |
SplitScreen | Side-by-side video comparison |
NarratorPiP | Picture-in-picture presenter overlay |
Envelope | 3D envelope with opening flap animation |
PointingHand | Animated hand emoji with slide-in and pulse |
MazeDecoration | Animated isometric grid decoration for corners |
The toolkit includes a transitions library at lib/transitions/ for scene-to-scene effects beyond the official @remotion/transitions package.
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>| Transition | Options | Best For |
|---|---|---|
glitch() | intensity, slices, rgbShift | Tech demos, edgy reveals, cyberpunk |
rgbSplit() | direction, displacement | Modern tech, energetic transitions |
zoomBlur() | direction, blurAmount | CTAs, high-energy moments, impact |
lightLeak() | temperature, direction | Celebrations, film aesthetic, warm moments |
clockWipe() | startAngle, direction, segments | Time-related content, playful reveals |
pixelate() | maxBlockSize, gridSize, scanlines, glitchArtifacts, randomness | Retro/gaming, digital transformations |
checkerboard() | gridSize, pattern, stagger, squareAnimation | Playful reveals, structured transitions |
Checkerboard patterns: sequential, random, diagonal, alternating, spiral, rows, columns, center-out, corners-in
// 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' })| Type | Frames | Notes |
|---|---|---|
| Quick cut | 15-20 | Fast, punchy |
| Standard | 30-45 | Most common |
| Dramatic | 50-60 | Slow reveals |
| Glitch effects | 20-30 | Should feel sudden |
| Light leak | 45-60 | Needs time to sweep |
Run the showcase gallery to see all transitions:
cd showcase/transitions && npm run studioThese are choices specific to this toolkit. For general Remotion best practices (interpolation clamping, useVideoConfig, delayRender, staticFile, no CSS animations), see the remotion-official skill.
<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.| Scene Type | Duration | Notes |
|---|---|---|
| Title | 3-5s (90-150f) | Logo + headline |
| Overview | 10-20s | 3-5 bullet points |
| Demo | 10-30s | Adjust playbackRate to fit |
| Stats | 8-12s | 3-4 stat cards |
| Credits | 5-10s | Quick fade |
Pacing: ~150 words/minute for voiceover. Voiceover drives timing.
For detailed API documentation on all hooks, components, renderer, Lambda, and Player APIs, see reference.md.
Remotion has a special license. Companies may need to obtain a license for commercial use. Check https://remotion.dev/license
If this skill is missing information or could be improved:
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
SKILL.md and 1 other file in .claude/skills/remotion of digitalsamba/claude-code-video-toolkit.
Open the folder on GitHubat commit 2c99460
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.
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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Remotion Toolkit Extensions this skilldigitalsamba/claude-code-video-toolkit | 2.2k | 1 repos | ~1.5k | Automated safety check: Pass | MIT | |
| HyperFrames Video Entry Pointheygen-com/hyperframes | 59k | 3 repos | ~5.2k | Automated safety check: Pass | Apache-2.0 | |
| Create Remotion GeistMarve10s/Better-Fullstack | 752 | — | ~1.4k | Automated safety check: Pass | MIT | |
| Skill Authoringnotivn/AIEV | 126 | — | ~925 | Automated safety check: Pass | MIT | |
| Stitch to Remotion Walkthrough Videosgoogle-labs-code/stitch-skills | 8.4k | 6 repos | ~3.2k | Automated safety check: Notes | Apache-2.0 | |
| Video ShotcraftVincentwei1021/video-shotcraft | 11k | — | ~2.6k | Automated safety check: Pass | Apache-2.0 |
heygen-com/hyperframes
Entry point for making, editing and rendering videos from HTML compositions with HyperFrames, routing each request to the right workflow.
Marve10s/Better-Fullstack
Create Remotion videos using the Geist design system aesthetic.
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.
google-labs-code/stitch-skills
Builds walkthrough videos from Stitch design projects using Remotion, with transitions, zoom effects and text overlays on each screen.
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.
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.
digitalsamba/claude-code-video-toolkit
Command recipes for converting, resizing, compressing, trimming and extracting audio from video with FFmpeg, including settings for Remotion projects.
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`.
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.
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.
digitalsamba/claude-code-video-toolkit
Records browser interactions as video with Playwright, covering viewport sizing, cursor highlighting, and converting output for Remotion.
digitalsamba/claude-code-video-toolkit
AI image editing prompting patterns for Qwen-Image-Edit. An agent skill from digitalsamba/claude-code-video-toolkit.
Works with
Categories
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.
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.
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.
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.
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.
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.
SKILL.md names 2 domains. As links in the text: github.com and remotion.dev. This is read from the text; nothing was executed.
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.
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.
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.
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.
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.