remotion-dev/remotion
24 skills18.8k installs1M starsGitHub
Install
npx skills add https://github.com/remotion-dev/remotionSkills in this repo
1Web Renderer TestAdd a test case to the web renderer The web-renderer-test skill documents workflows and patterns from the repository SKILL md name web-renderer-test description Add a test case to the web renderer The web renderer is in packages web-renderer and the test suite is in packages web-renderer src test It uses visual snapshot testing using vitest A test file can for example be executed using bunx vitest src test video test tsx Example Each test is powered by a fixture in packages web-renderer src test fixtures A fixture looks like this for example tsx import AbsoluteFill from remotion const Component React FC return AbsoluteFill style justifyContent center alignItems center div style backgroundColor red width 100 height 100 borderRadius 20 AbsoluteFill export const backgroundColor component Component id background-color width 200 height 200 fps 25 durationInFrames 1 as const The corresponding test looks like this tsx import test from vitest import renderStillOnWeb from render-still-on-web import backgroundColor from fixtures background-color import testImage from utils test should render background-color async const blob await renderStillOnWeb licenseKey2.1kinstalls2Writing DocsThe writing-docs skill Guides for writing and editing Remotion documentation. Use when adding docs pages, editing MDX files in packages/docs, or writing documentation content. It covers create a new .mdx file in packages/docs/docs. Key workflows include add the document to packages/docs/sidebars.ts. Developers invoke writing-docs when the task matches the triggers and reference files in SKILL.md for grounded, stepwise execution. Reference files and progressive disclosure keep context focused while preserving concrete commands, configuration fields, and validation checks copied from the upstream documentation. Reference files and progressive disclosure keep context focused while preserving concrete commands, configuration fields, and validation checks copied from the upstream documentation. Reference files and progressive disclosure keep context focused while preserving concrete commands, configuration fields, and validation checks copied from the upstream documentation. Reference files and progressive disclosure keep context focused while preserving concrete commands, configuration fields, and validation checks copied from the upstream documentation.2kinstalls3Video ReportThe video-report skill from Remotion handles user reports that a rendered video fails or looks wrong. Agents download the reported source URL, set it as the src prop in packages/example/src/NewVideo.tsx, then run bunx remotion render NewVideo --log=verbose from packages/example to capture detailed render diagnostics. This minimal workflow focuses on reproducing issues inside the example package rather than speculative fixes. Use when users file video rendering problems and need a consistent repro command for the Remotion example project.2kinstalls4Docs Demodocs-demo is an agent skill from remotion-dev/remotion that add an interactive demo to the remotion documentation. use when creating a new <demo> component for docs pages. # Adding an Interactive Demo to Docs Interactive demos render a Remotion composition inline in documentation pages using `@remotion/player`. They live in `packages/docs/components/demos/`. Effect demos are separate: use `<EffectsDemo type="effects-..." />` and register them in `packages/docs/components/effects-demos/registry.ts` with the real eff Developers invoke docs-demo during build/frontend work for generative media tasks. The skill documents triggers, prerequisites, and step-by-step workflows grounded in SKILL.md. Compatible with Claude Code, Cursor, and Codex agent runtimes that load marketplace skills. Review the Security Audits panel on this listing before installing in production environments.1.8kinstalls5Add Sfxadd-sfx is an agent skill from remotion-dev/remotion that add a new sound effect to @remotion/sfx. ## Prerequisites Sound effects must first be added to the [remotion.media](./packages/remotion-media) package. Then it can be deployed using `bun run build`. The `.env` may be missing if we are in a worktree, but on the main non-worktree branch it should be present. The source of truth is `generate.ts` in that repo. A sound effect must exist th Developers invoke add-sfx during operate/infra work for cloud & infrastructure tasks. The skill documents triggers, prerequisites, and step-by-step workflows grounded in SKILL.md. Compatible with Claude Code, Cursor, and Codex agent runtimes that load marketplace skills. Review the Security Audits panel on this listing before installing in production environments.1.8kinstalls6Add Expertadd-expert is an agent skill from remotion-dev/remotion that add a new expert to the remotion experts page. ## Steps 1. **Add the expert's photo** to both: - `packages/docs/static/img/freelancers/<firstname>.png` - `packages/promo-pages/public/img/freelancers/<firstname>.png` The image should be a square headshot (PNG format). Both paths must have the same file. 2. **Add an entry** to the `experts` array in `packages/promo-pages/src/component Developers invoke add-expert during operate/infra work for cloud & infrastructure tasks. The skill documents triggers, prerequisites, and step-by-step workflows grounded in SKILL.md. Compatible with Claude Code, Cursor, and Codex agent runtimes that load marketplace skills. Review the Security Audits panel on this listing before installing in production environments. Category Cloud & Infrastructure with operations vertical focus supports repeatable agent-guided delivery.1.7kinstalls7Fix Dependabotfix-dependabot is a remotion-dev/remotion agent skill that resolves incomplete Dependabot pull requests in Bun monorepos. Dependabot typically bumps one package.json and skips bun install, leaving bun.lock stale and sibling packages on old dependency versions. The skill walks through gh pr view to read bump metadata, checks out the PR branch, updates all monorepo package.json instances referencing the dependency, runs bun install, and prepares the branch to push. Developers reach for fix-dependabot when CI fails on lockfile drift or when a bump merged partially across workspaces. It encodes Remotion's monorepo maintenance workflow as repeatable agent steps.661installs8Pr Namepr-name is a Claude Code skill for contributors to the Remotion monorepo and similar multi-package repositories. The skill enforces the title format `` `[package-name]`: [commit-message] ``—for example `` `@remotion/shapes`: Add heart shape ``—with the package name sourced from package.json. When multiple packages are affected, pr-name picks the most relevant one; docs-only changes use the `` `Docs`: [message] `` prefix. Developers invoke pr-name before opening a PR so changelog generators, release bots, and reviewers can route changes to the correct package without manual triage.659installs9Versionversion is a lightweight maintainer skill for solo builders and contributors working inside the Remotion monorepo who need documentation to cite the correct upcoming patch version. Remotion ships frequent releases, and stale version mentions in guides, API pages, or changelogs confuse users and break copy-paste install commands. The skill states that work is on the next version (patch bump) and that the canonical number lives in packages/core/src/version.ts, then directs the agent to audit docs for mismatches. It fits early in a doc PR or pre-release pass when you are not changing feature code but must keep public docs trustworthy. Confidence is high because the scope is narrow, though it assumes you already have the repo checked out.480installs10Visual Modevisual-mode is an agent skill for indie video-tool builders and Remotion Studio contributors who need Visual Mode to keep Sequences editable after hot reload without remounting the wrong node. It clarifies how overrideId preserves identity when source locations shift, while stack strings can change on reload and may be shared across sequences. nodePath is treated as the durable key paired with index for UI expanded state, with mapping flows from nodePath to overrideId so components do not remount unexpectedly. The skill also warns that unsymbolicated and symbolicated stacks can diverge under fast refresh, so identity logic must not assume one-to-one stack stability. Use it when you are implementing or debugging visual editing of Sequences in Studio rather than writing compositions alone. It spans build-heavy work and ship-time debugging when editor state drifts after saves or refresh.480installs11Add EffectAdd-effect is a maintainer-facing agent skill for solo or small-team contributors extending Remotion’s official effects package—not for end users who only compose videos in Remotion Studio. It encodes how to pick effect shape (WebGL2 vs 2D), lay out files under packages/effects, wire Internals.createEffect, define defaults and SequenceSchema for visual editing, validate parameters, and complete the release hygiene: exports, documentation, demos, preview images, Remotion skill updates, tests, formatting, and builds. If you are shipping programmatic video (changelog reels, codegen promos, or AI-generated motion graphics) and you own a fork or contribute upstream, this skill keeps new effects consistent with chromatic-aberration-style patterns. Casual Remotion consumers should use existing effects; invoke this only when you are adding a net-new effect to the library itself.478installs12Add Cli Optionadd-cli-option is an agent skill for solo builders and open-source contributors who modify the Remotion monorepo and need new command-line or config knobs to behave like first-class options instead of ad-hoc parsing. It walks through creating an option module with module-level default state, a stable cliFlag, human-readable metadata, and getValue logic that respects CLI overrides versus config sources. You learn how to pick TypeScript value types, handle inverted boolean flags, optionally expose SSR names, and link to public documentation so Studio and CLI stay consistent. That matters when agents or scripts pass flags during renders: a single AnyRemotionOption definition prevents drift between CLI, programmatic config, and docs. The skill is narrow but deep—ideal when you are asked to add `--my-flag` or migrate a legacy flag into the shared options registry Remotion expects across packages.470installs13Add New Packageadd-new-package guides agents and maintainers through creating another first-class @remotion package inside the Remotion monorepo. It standardizes the folder layout—package manifest, tsgo declaration emit settings, index exports, Bun bundle script with React externals, ESLint flat config, npm ignore, and README—and then walks through every registry touchpoint so the CLI, create-video, studio-shared metadata, and documentation site stay consistent. The skill is aimed at contributors shipping new video-related capabilities as installable Remotion modules rather than one-off app code. Following it reduces missed references that break composite TypeScript builds or leave packages invisible to studio installers. Treat it as the authoritative checklist when the feature belongs in the public package graph, not a private app experiment.464installs14Prpr is a Remotion repository workflow skill that turns finished feature work into a review-ready GitHub pull request. It enforces branch hygiene away from main, formats touched packages with Oxfmt, and runs the same build and stylecheck gates CI expects before commit and push. Titles must conform to the separate pr-name skill so release and changelog automation stay predictable. For the PR body, the skill deliberately avoids passing Markdown through fragile inline shell arguments, instructing agents to write a temp file such as /tmp/remotion-pr-body.md and call gh pr create with --body-file. Solo builders contributing patches to Remotion—or agents acting on their behalf—use this to reduce rejected PRs from formatting drift or malformed titles.461installs15Update VersionThe update-version skill is a narrow release-hygiene procedure for Remotion documentation contributors. When a pull request adds or changes docs that include AvailableFrom version attributes, those values should reflect the next patch release, not an arbitrary number. The agent fetches main, reads VERSION from packages/core/src/version.ts on origin/main, increments the patch component by one, finds AvailableFrom entries modified in the current branch under packages/docs, and updates only those entries to the computed version. Unrelated availability tags elsewhere in the tree stay untouched. Solo maintainers and indie video-code shops using Remotion benefit because agent-assisted doc PRs stay consistent with the monorepo’s single source of truth for versioning, reducing reviewer churn before ship.439installs16IssueThe issue skill is a Remotion-focused agent playbook for opening, updating, and commenting on GitHub issues using the gh CLI and consistent naming. Solo and indie maintainers shipping video tooling in the Remotion monorepo use it to prefix titles by package (`@remotion/lambda`: …) or by surface (Docs:, Studio:, CI:) so triage stays searchable. It encodes title anti-patterns and the critical rule that long bodies must not be inlined in shell arguments, which otherwise corrupts Markdown on GitHub. It does not replace full issue graph management—linking sub-issues and blocking relationships belongs to issue-management. Install it when your agent drafts issues frequently and you want Remotion conventions applied every time without manual copy-paste from CONTRIBUTING docs.384installs17Pr ReadyPr-ready is a Remotion repository workflow skill for solo builders and contributors whose pull request is stuck. It applies when CI is red, the branch conflicts with the base, or the working tree has unpushed or uncommitted work that blocks a clean review. The agent starts with git status, unpushed commit detection, conflict checks against the base branch, and GitHub CLI inspection of PR checks. For conflicts it updates the base reference, rebases or merges following existing project practice, resolves files carefully, runs formatting and tests for affected packages, and seeks confirmation before push. For CI failures it reads failing job logs via gh, fixes the underlying issue, runs the matching local verification, commits if needed, and again confirms before pushing. The skill explicitly stops for user approval whenever local changes or conflict resolution would create new commits or pushes, which keeps indie operators in control of their branch history while still automating the diagnostic steps.384installs18Issue ManagementIssue-management is a focused agent skill for Remotion-era and general GitHub workflows that rely on Issues 2.0 relationship flags in the GitHub CLI. It tells you when to use the skill—creating, editing, inspecting, or removing links between issues—and how to sanity-check that your installed gh binary actually exposes --parent, --add-sub-issue, --add-blocked-by, and similar options introduced in recent CLI work. Commands use issue numbers in the current repository or full issue URLs for cross-repo dependencies. Parent/sub-issue rules are spelled out so each sub-issue has exactly one parent, matching how solo builders decompose video pipelines, docs tasks, or infra chores. If flags are absent, the skill directs you to upgrade gh rather than guessing deprecated syntax. Best for builders who live in terminal-driven PM and want agents to maintain a coherent dependency graph on GitHub.374installs19FlakeA flaky test detection skill for the Remotion video rendering framework that identifies and reports tests that fail inconsistently, helping teams stabilize their CI pipelines before shipping. Use it during the ship phase when you suspect unstable tests are causing unreliable builds in your Remotion-based video project.328installs20Add Webcodecs Bugadd-webcodecs-bug is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted development.315installs21Mergemerge is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted development.315installs22Nullable New Paramsnullable-new-params is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted development.314installs23Releaserelease is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted development.313installs24Remotion Best Practicesremotion-best-practices (3D section) teaches solo and indie builders how to embed Three.js and React Three Fiber scenes inside Remotion compositions. It assumes a normal R3F workflow but adds non-negotiable Remotion rules: install `@remotion/three`, size `ThreeCanvas` to the composition via `useVideoConfig()`, and always include lighting so materials render predictably. The highest-impact constraint is temporal: anything that moves—shaders, transforms, procedural motion—must be keyed off `useCurrentFrame()` so each exported frame is deterministic. Using `useFrame()` or other time sources that advance independently of the Remotion timeline is an anti-pattern because preview and final encode will disagree, often showing as flicker. Use this skill when you are past idea validation and actively building a motion deliverable (promo, tutorial, data viz reel) where 3D is part of the React tree. It is not a general Three.js course; it is the Remotion-specific guardrails layered on top of community R3F guidance.118installs