Remotion
- 104 skills
- 0 followers
- 3.9k repo stars
- 2 weeks ago last updated
- ▌
- ▌
- ▌
- ▌
- ▌
- ▌
- ▌
- ▌
- ▌
- ▌ Remotion Best Practices 4 · remotion-dev bundleBest practices for Remotion - Video creation in React
- ▌
- ▌
- ▌
- ▌
- ▌
- ▌
- ▌ Checkout · remotion-devCheckout a requested branch or ref in the Remotion repo, rename the current task to the associated PR title when running in Codex, then install dependencies and build. Use when the user asks to checkout a ref and prepare the workspace.
- ▌ Formatting · remotion-devRun Remotion formatting and style checks until they pass. Use when the user asks to fix formatting or run the formatting command.
- ▌ Update Stars · remotion-devUpdate Remotion homepage GitHub star counts. Use when asked to refresh the displayed GitHub star count and push the change to main.
- ▌ Skill Locations · remotion-devDocument Remotion skill placement. Use when adding, moving, or editing Remotion skills to decide whether a skill belongs in .agents/skills as an internal skill or packages/skills as a public skill.
- ▌ Upgrade Caniuse · remotion-devUpgrade the caniuse-lite override in the Remotion repo. Use when asked to update caniuse-lite to the latest npm version.
- ▌ Scaffold Element · remotion-devScaffold a new Remotion Element for development in the docs Remotion Studio.
- ▌
- ▌
- ▌
- ▌
- ▌
- ▌ Interactivity Best Practices · remotion-devBest practices for writing Remotion animations that stay intuitive for agents and editable in Remotion Studio Visual Mode.
- ▌
- ▌
- ▌
- ▌
- ▌
- ▌
- ▌
- ▌
- ▌
- ▌
- ▌
- ▌
- ▌
- ▌
- ▌
- ▌
- ▌
- ▌
- ▌
- ▌
- ▌
- ▌ Docs · remotion-dev bundleStart the Remotion docs site and open it in the Codex browser. Use when the user invokes /docs or $docs, asks to launch the local documentation site, or wants to preview docs changes in Docusaurus.
- ▌ Issue · remotion-devCreate or update GitHub issues with correct Remotion naming and safe multiline Markdown handling
- ▌ Merge · remotion-devWait for a Remotion pull request to become mergeable, handle merge conflicts, distinguish genuine CI failures from flakes, rerun flaky checks through the flake skill, and merge the PR. Use when asked to run /merge, merge a current PR after checks pass, or shepherd a Remotion PR through CI to merge.
- ▌ Studio · remotion-dev bundleStart Remotion Studio from packages/example and open it in the Codex browser. Use when the user invokes /studio or $studio, asks to launch the example Studio, or wants the Remotion Studio dev UI available locally.
- ▌ Vercel · remotion-dev bundleSet up a Codex monitor for Vercel deployments and preview URLs. Use when the user invokes /vercel or $vercel, asks Codex to watch or monitor a Vercel deployment, waits for a Vercel preview or PR preview to become ready, or wants to be notified with both the deployment URL and preview URL once Vercel is READY.
- ▌ Add Bug · remotion-devAdd a new Remotion bug entry to packages/bugs/api/[v].ts. Use when the user describes a bug and affected Remotion versions that should be surfaced through the bugs API.
- ▌ Convert · remotion-dev bundleStart the local @remotion/convert app and open it in the Codex browser. Use when the user invokes /convert or $convert, asks to launch convert.remotion.dev locally, or wants to inspect the Convert package UI.
- ▌ Experts · remotion-dev bundleMaintain Remotion's experts directory and its generated assets. Use when adding, removing, or editing experts; changing experts data or portraits; rendering expert cards; or regenerating the homepage experts animation for Chrome and Safari.
- ▌
- ▌ Gh Stack · remotion-dev bundleManages stacked PRs and splits multi-part work into reviewable branches with gh-stack. Use for stack creation, viewing, edits, push, submit, sync, rebase, merge, or checkout; when asked to split or isolate work for review; whenever a user mentions a stack, branch layers, dependent PRs, or gh stack; or when a stack is checked out.
- ▌ Pr Ready · remotion-devResolve CI failures, merge conflicts, or local branch changes to get a PR ready
- ▌ Docs Demo · remotion-devAdd an interactive demo to the Remotion documentation. Use when creating a new <Demo> component for docs pages.
- ▌ Upload R2 · remotion-devUpload large Remotion repository assets to the Cloudflare R2 bucket behind remotion.media and replace local public/ assets with hosted URLs. Use when a file is too large for Git or when a PR should avoid committing media binaries by hosting them on remotion.media.
- ▌ Add Effect · remotion-devAdd a new effect to @remotion/effects, including implementation, package exports, docs, demos, preview images, Remotion skill updates, tests, formatting, and builds.
- ▌ No Pointer · remotion-dev bundleApply Remotion Studio's pointerless interaction styling to clickable controls. Use when adding or revising Studio buttons or links that should use the default cursor, brighten on hover, and show focus decoration only for keyboard navigation.
- ▌ Offload R2 · remotion-dev bundleUpload Remotion repository media assets to the Cloudflare R2 bucket behind remotion.media, switch source code to hosted URLs, verify the public objects, and remove repository-local copies.
- ▌ React Scan · remotion-devCapture and analyze Remotion Studio React render profiles with the internal React Scan Lite collector. Use when diagnosing unnecessary re-renders, slow commits, frame-reactive component trees, or when comparing render performance before and after a change.
- ▌ Studio Perf · remotion-dev bundleOptimize Remotion Studio render performance by minimizing frame-reactive component surfaces, preferring imperative timeline state reads, and memoizing stable render boundaries. Use when code reads the current frame with `useTimelinePosition()` or components unnecessarily render on every frame.
- ▌ Visual Mode · remotion-devGuidance for working on Remotion Studio Visual Mode, sequence identity, node paths, symbolicated stacks, override IDs, and hot reload behavior. Use when implementing or debugging visual editing of Sequences.
- ▌ Writing Docs · remotion-devGuides for writing and editing Remotion documentation. Use when adding docs pages, editing MDX files in packages/docs, or writing documentation content.
- ▌ Deprecate API · remotion-devReference for how deprecation of public Remotion APIs is represented in TypeScript source and documentation. Use when adding, reviewing, or discussing a deprecation of a function, component, hook, type, prop, option, or other public API that remains available.
- ▌ Writing Tests · remotion-devRules for writing and reviewing tests in the Remotion repository. Use whenever adding, editing, or reviewing tests, especially for Studio UI, rendering, CLI, server, media, and cross-package changes, to prefer complete integration workflows over narrow helper tests and implementation details.
- ▌ Add CLI Option · remotion-devAdd a new Remotion CLI or config option by creating an AnyRemotionOption, registering CLI parsing, wiring config setters, and updating documentation. Use when adding or converting command-line flags or Remotion options.
- ▌ Fix Dependabot · remotion-devFix a Dependabot PR by updating all monorepo instances of the dependency, running bun install, and pushing
- ▌ Player Example · remotion-dev bundleStart the @remotion/player example app and open it in the Codex browser. Use when the user invokes /player-example or $player-example, asks to launch the player testbed, or wants to inspect @remotion/player locally.
- ▌ Update Version · remotion-devUpdate `AvailableFrom` in a PR to the next Remotion patch version (`main` + `0.0.1`).
- ▌ Add New Package · remotion-devAdd a new package to the Remotion monorepo, including package scaffolding, monorepo registration, documentation, build scripts, tests, and release checklist updates. Use when creating a new @remotion package.
- ▌ Issue Management · remotion-devManage GitHub Issues 2.0 relationships with gh CLI: parent issues, sub-issues, blocked-by, and blocking links.
- ▌ Studio CSS Reset · remotion-dev bundleDiagnose and fix Remotion Studio UI bugs caused by the global CSS reset. Use when nested text or SVG icons have incorrect color, typography, sizing, hover states, or truncation in packages/studio.
- ▌ Add Webcodecs Bug · remotion-devAdd a browser WebCodecs bug to the Remotion Mediabunny WebCodecs bugs docs page. Use when given a Chromium, WebKit, or Firefox issue URL that should be tracked in packages/docs/docs/mediabunny/webcodecs-bugs.mdx, especially when needing to look up the issue title, filing date, reporter, and resolution state before editing the MDX table.
- ▌ Upgrade Mediabunny · remotion-devUpgrade Mediabunny and related @mediabunny packages across the Remotion repo. Use when asked to update Mediabunny to the latest version.
- ▌ Nullable New Params · remotion-dev bundleFix newly added optional parameters, optional React props, and optional type/interface members in Remotion monorepo diffs by converting internal APIs to required nullable values and updating call sites. Use when a PR, review, or user asks to forbid new `foo?: T` / `param?: T` additions except for exported or documented public APIs where requiring the value would be breaking.
- ▌ V5 Breaking Changes · remotion-devImplement or review a Remotion 5 breaking change while the v4 and v5 release lines still share code. Use when v4 behavior and public types must remain compatible on main, but flipping the central v5 flag should activate a new runtime behavior, default, or TypeScript API.
- ▌ Find Unplanned Issues · remotion-dev bundleAudit and clean the Remotion GitHub masterplan hierarchy. Use when finding open issues that lack a masterplan ancestor, identifying orphaned issues that need a parent, or recursively removing closed issues from the masterplan rooted at issue #9081.
- ▌ Homepage Video Assets · remotion-devUse when rendering or replacing Remotion homepage creator strip videos, especially transparent Chrome WebM and Safari MP4 assets copied into both promo-pages and docs.
- ▌ Upload Element Previews · remotion-devUpload a Remotion Element's preview assets to remotion.media and replace local preview URLs. Use when given an Element slug, or when exactly one Element's preview assets are present in the current worktree.
- ▌ Canvas Capture Extension · remotion-dev bundleRebuild, install, and reload the private Remotion Canvas Capture unpacked Chrome extension. Use when the extension needs to be restored after a Codex worktree was deleted, rebuilt after source changes, moved to its durable install directory, or reloaded in Chrome or Chrome Canary.
- ▌ Update From Upstream Main · remotion-dev bundleUpdate the current Remotion branch with the latest canonical main branch. Use when asked to update or sync from upstream main, merge the latest main into a feature branch, fast-forward local main, or bring a pull request branch up to date without rewriting published history.
- ▌ Update Remotion Rust Ffmpeg · remotion-dev bundleUpdate Remotion's ffmpeg-next Git revision to a published rust-ffmpeg commit, refresh Cargo.lock, rebuild all supported compositor binaries, validate the monorepo, and open a draft pull request. Use for the final step of the rust-ffmpeg binary update chain.
- ▌ Install Canvas Capture Browser · remotion-dev bundleInstall and verify the pinned Chrome for Testing build used by the private Remotion Canvas Capture extension on Apple Silicon macOS. Use when setting up Canvas Capture, when Recorder Chrome is missing or has the wrong version, or when the canvas-capture-extension installer reports that Chrome for Testing 150.0.7842.0 (r1631007) is unavailable.
- ▌ Studio Config Option Lifecycle · remotion-dev bundleClassify and wire Remotion Studio config options as either startup-fixed or reloadable while preventing mixed lifecycle behavior across consumers. Use when adding, changing, or reviewing a Config setter or CLI option consumed by Studio, its preview server, compiler, HTML bootstrap, public-folder watcher, or render queue.
- ▌ Update Chrome Binaries Test Region · remotion-devPublish Remotion Lambda Chrome binaries to the eu-central-1 test region and update hosted layer and Chrome version references. Use when updating Chrome binaries before full regional rollout.
- ▌
- ▌
- ▌
- ▌ Mediabunny · remotion-dev bundleExtract audio and video metadata such as duration and dimensions using the Mediabunny library in the browser.
- ▌ Remotion Docs · remotion-devSearches Remotion documentation via Algolia and fetches pages as Markdown for current API reference.
- ▌ Remotion Saas · remotion-dev bundleGuides building video-generation SaaS apps with Remotion, covering framework selection, the Player component, and rendering options across Lambda, Vercel, Node.js, and Cloudflare.
- ▌ Remotion Create · remotion-dev bundleScaffolds a new Remotion video project, guides React markup design with video layout rules, and starts the Remotion Studio preview server.
- ▌ Remotion Markup · remotion-dev bundleGuidance for writing Remotion React markup with animation patterns, media handling, sequences, effects, and advanced features like 3D, audio visualization, and parameterized videos.
- ▌ Remotion Render · remotion-dev bundleRenders videos and still images from Remotion compositions using the CLI, with guidance on transparent output.