Remotion Dev Skills

3D-Inhalte in Remotion mit Three.js und React Three Fiber.

Annehmen eines externen Remotion-Element-Beitrags durch Überprüfung der committeten Vorschauen, Hochladen auf R2, Entfernen der temporären Assets und Vorbereiten der…

Füge einen neuen Remotion-Bug-Eintrag zu packages/bugs/api/[v].ts hinzu. Verwende, wenn der Benutzer einen Bug und betroffene Remotion-Versionen beschreibt, die über die…

Add 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…

Füge eine neue Remotion-CLI- oder Konfigurationsoption hinzu, indem du eine AnyRemotionOption erstellst, CLI-Parsing registrierst, Konfigurationssetzer verdrahtest und die Dokumentation aktualisierst. Verwende, wenn…

Add a new Remotion CLI or config option by creating an AnyRemotionOption, registering CLI parsing, wiring config setters, and updating documentation. Use when…

Add a new effect to @remotion/effects, including implementation, package exports, docs, demos, preview images, Remotion skill updates, tests, formatting, and…

Füge einen neuen Effekt zu @remotion/effects hinzu, einschließlich Implementierung, Paketexporte, Dokumentation, Demos, Vorschaubilder, Remotion-Skill-Updates, Tests, Formatierung und…

Add a new expert to the Remotion experts page

Einen neuen Experten zur Remotion-Expertenseite hinzufügen

Add a new package to the Remotion monorepo, including package scaffolding, monorepo registration, documentation, build scripts, tests, and release checklist…

Füge ein neues Paket zum Remotion-Monorepo hinzu, einschließlich Paket-Gerüst, Monorepo-Registrierung, Dokumentation, Build-Skripte, Tests und Release-Checkliste…

Ein neues Sound-Effekt zu @remotion/sfx hinzufügen

Add 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…

Füge einen Browser-WebCodecs-Bug zur Remotion Mediabunny WebCodecs-Bugs-Dokumentationsseite hinzu. Verwende, wenn eine Chromium-, WebKit- oder Firefox-Issue-URL angegeben wird, die nachverfolgt werden soll…

Die private, entpackte Chrome-Erweiterung Remotion Canvas Capture neu erstellen, installieren und neu laden. Verwenden, wenn die Erweiterung nach einem Codex-Worktree… wiederhergestellt werden muss.

Checkout 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…

Checkout einen angeforderten Branch oder Ref im Remotion-Repository, installiere dann Abhängigkeiten und baue. Verwende, wenn der Benutzer bittet, einen Ref auszuchecken und das…

Starte die lokale @remotion/convert-App und öffne sie im Codex-Browser. Verwende sie, wenn der Benutzer /convert oder $convert aufruft oder darum bittet, convert.remotion.dev zu starten…

Starte die lokale @remotion/convert App und öffne sie im Codex-Browser. Verwende, wenn der Benutzer /convert oder $convert aufruft, oder darum bittet, convert.remotion.dev zu starten…

Reference for how deprecation of public Remotion APIs is represented in TypeScript source and documentation. Use when adding, reviewing, or discussing a…

Start 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…

Starte die Remotion-Dokumentationsseite und öffne sie im Codex-Browser. Verwende dies, wenn der Benutzer /docs oder $docs aufruft, die lokale Dokumentationsseite starten möchte oder…

Add an interactive demo to the Remotion documentation. Use when creating a new <Demo> component for docs pages.

Füge ein interaktives Demo zur Remotion-Dokumentation hinzu. Verwende dies, wenn du eine neue <Demo>-Komponente für Dokumentationsseiten erstellst.

Audit and clean the Remotion GitHub masterplan hierarchy. Use when finding open issues that lack a masterplan ancestor, identifying orphaned issues that need a…

Fix a Dependabot PR by updating all monorepo instances of the dependency, running bun install, and pushing

Behebe einen Dependabot-PR, indem du alle Monorepo-Instanzen der Abhängigkeit aktualisierst, bun install ausführst und pushst.

Track Remotion CI flakes in issue

Remotion-CI-Flakes im Issue verfolgen

Run Remotion formatting and style checks until they pass. Use when the user asks to fix formatting or run the formatting command.

Remotion-Formatierungs- und Stilprüfungen ausführen, bis sie bestanden sind. Verwenden, wenn der Benutzer bittet, die Formatierung zu korrigieren oder den Formatierungsbefehl auszuführen.

Verwaltet gestapelte PRs und teilt mehrteilige Arbeit mit gh-stack in überprüfbare Branches auf. Verwendung für Stack-Erstellung, Anzeigen, Bearbeitungen, Push, Submit, Sync, Rebase,…

Use when rendering or replacing Remotion homepage creator strip videos, especially transparent Chrome WebM and Safari MP4 assets copied into both promo-pages…

Verwenden beim Rendern oder Ersetzen von Remotion-Startseiten-Ersteller-Streifen-Videos, insbesondere transparente Chrome-WebM- und Safari-MP4-Assets, die in beide Promo-Seiten kopiert wurden…

Install 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…

Bewährte Methoden zum Schreiben von Remotion-Animationen, die für Agenten intuitiv bleiben und im visuellen Modus von Remotion Studio bearbeitet werden können.

GitHub-Issues mit korrekter Remotion-Benennung und sicherer mehrzeiliger Markdown-Verarbeitung erstellen oder aktualisieren

Manage GitHub Issues 2.0 relationships with gh CLI: parent issues, sub-issues, blocked-by, and blocking links.

Verwalte GitHub Issues 2.0-Beziehungen mit der gh CLI: Eltern-Issues, Unter-Issues, blockiert-von und blockierende Verknüpfungen.

Automatisiere die Pull-Request-Erstellung mit formatierten Commits und Branch-Verwaltung. Stellt sicher, dass du dich nicht auf dem Hauptbranch befindest, und erstellt bei Bedarf einen Feature-Branch. Führt Oxfmt-Codeformatierung in allen betroffenen Paketen durch, bevor Commits erstellt werden. Formatiert Commits und PR-Titel mit dem Paketnamen aus der package.json (z. B. "@remotion/shapes: Herzform hinzufügen"). Nutzt die gh CLI, um den Pull-Request nach dem Pushen der Änderungen automatisch zu öffnen.

Multimedia handling with the Mediabunny library

Multimedia-Handhabung mit der Mediabunny-Bibliothek

Multimedia-Handhabung mit der Mediabunny-Bibliothek

Multimedia-Handhabung mit der Mediabunny-Bibliothek

Warte auf einen Remotion-Pull-Request, der zusammenführbar wird, behebe Merge-Konflikte, unterscheide echte CI-Fehler von Flakes, führe fehlerhafte Prüfungen über den Flake erneut aus…

Ein neues Remotion Element mit einer korrekt konfigurierten Vorschau-Komposition für die Entwicklung im docs Remotion Studio aufsetzen.

Fix newly added optional parameters, optional React props, and optional type/interface members in Remotion monorepo diffs by converting internal APIs to…

Behebe neu hinzugefügte optionale Parameter, optionale React-Props und optionale Typ-/Interface-Mitglieder in Remotion-Monorepo-Diffs, indem interne APIs in…

Start 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…

Starte die @remotion/player Beispiel-App und öffne sie im Codex-Browser. Verwende, wenn der Benutzer /player-example oder $player-example aufruft, darum bittet, die … zu starten.

Open a pull request for the current feature

Einen Pull-Request für die aktuelle Funktion öffnen

Korrekte Benennung für einen PR

Review or correct a Remotion pull request title

CI-Fehler, Merge-Konflikte oder lokale Branch-Änderungen beheben, um einen PR bereit zu machen

Resolve CI failures, merge conflicts, or local branch changes to get a PR ready

Ein entwickeltes Remotion Element finalisieren, es zur Docs-Galerie hinzufügen, seine Vorschauen rendern und Repository-Checks ausführen.

Eine neue Remotion-Version veröffentlichen

Release a new Remotion version

Fähigkeiten zum Erstellen von Videos mit Remotion.

Bewährte Praktiken für Remotion - Videoerstellung in React

Router for all Remotion skills

Best practices for Remotion - Video creation in React

Bewährte Methoden für Remotion - Videoerstellung in React

Bewährte Praktiken für Remotion

Domänenspezifische Wissensbasis zur Erstellung von Videos mit Remotion und React. Umfasst über 30 Regeldateien zu Animationen, Audio, Assets, 3D-Inhalten, Diagrammen, Text, Übergängen und Kompositionsverwaltung. Enthält spezialisierte Anleitungen für Untertitel, FFmpeg-Operationen, Audiovisualisierung und Soundeffekt-Integration. Bietet Muster für dynamische Metadatenberechnung, Medieninspektion (Dauer, Abmessungen, Frameextraktion) und parametrisierbare Kompositionen. Unterstützt erweiterte Funktionen wie Lottie...

Umgang mit Untertiteln in Remotion

Transcribing, displaying and animating captions

Transcribing, displaying and animating captions

Umgang mit Untertiteln in Remotion

Umgang mit Untertiteln in Remotion

Eine neue Remotion-Video erstellen

Create a new Remotion video

Eine neue Remotion-Video erstellen

Erstellen eines neuen Remotion-Videos

Search Remotion documentation

Search Remotion documentation

Search Remotion documentation

Remotion-Dokumentation durchsuchen

Bewährte Methoden zum Schreiben von Remotion-Animationen, die für Agenten intuitiv bleiben und im visuellen Modus von Remotion Studio bearbeitet werden können.

Structure Remotion markup for interactivity

Structure Remotion markup for interactivity

Bewährte Methoden zum Schreiben von Remotion-Animationen, die für Agenten intuitiv bleiben und im visuellen Modus von Remotion Studio bearbeitet werden können.

Bewährte Verfahren zum Schreiben von Remotion-Animationen, die für Agenten intuitiv bleiben und im visuellen Modus von Remotion Studio bearbeitbar sind.

Remotion-Kartenanimationswissen

Remotion Map animation knowledge

Remotion Map animation knowledge

Remotion Map animation knowledge

Content, animation and effects best practices

Bewährte Methoden zum Schreiben von Remotion React Markup

Bewährte Methoden zum Schreiben von Remotion React Markup

Bewährte Methoden zum Schreiben von Remotion React Markup

Interacting with Mediabunny

Interacting with Mediabunny

Interacting with Mediabunny

Interacting with Mediabunny

Exportieren Sie ein Remotion-Video

Export a Remotion video

Bewährte Verfahren zum Rendern von Videos

Bewährte Verfahren für das Rendern von Videos

Bewährte Verfahren zum Rendern von Videos

Build an app with Remotion

Erstellen von Video-Apps mit Remotion – Framework, Rendering und Player-Beratung

Erstellen von Video-Apps mit Remotion – Framework, Rendering und Player-Beratung

Erstellen von Video-Apps mit Remotion – Framework, Rendering und Player-Beratung

Preview a Remotion video

Preview a Remotion video

Preview a Remotion video

Vorschau eines Remotion-Videos anzeigen

Upgrade Remotion, and related packages

Upgrade Remotion, and related packages

Upgrade Remotion, and related packages

Upgrade Remotion, and related packages

Scaffold a new Remotion Element with a correctly configured preview composition for development in the docs Remotion Studio.

Document Remotion skill placement. Use when adding, moving, or editing Remotion skills to decide whether a skill belongs in .agents/skills as an internal skill…

Dokumenten-Remotion-Skill-Platzierung. Verwenden Sie dies beim Hinzufügen, Verschieben oder Bearbeiten von Remotion-Skills, um zu entscheiden, ob ein Skill als interner Skill in .agents/skills gehört…

Start 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,…

Starte Remotion Studio aus packages/example und öffne es im Codex-Browser. Verwende, wenn der Benutzer /studio oder $studio aufruft, darum bittet, das Beispiel-Studio zu starten,…

Classify and wire Remotion Studio config options as either startup-fixed or reloadable while preventing mixed lifecycle behavior across consumers. Use when…

Diagnose 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…

Anleitung für Remotion Studio UI-Änderungen, bei denen der globale CSS-Reset verschachtelte Elemente beeinflusst. Verwenden bei der Bearbeitung der Pakete/Studio-Benutzeroberfläche, insbesondere beim Hinzufügen von Wrapper…

Optimize Remotion Studio render performance by minimizing frame-reactive component surfaces, preferring imperative timeline state reads, and memoizing stable…

Finalize a developed Remotion Element, add it to the docs gallery, and prepare either a direct member submission or an externally reviewable contribution.

Remotion Lambda Chrome-Binaries in der Testregion eu-central-1 veröffentlichen und die Referenzen auf gehostete Layer und Chrome-Versionen aktualisieren. Verwenden beim Aktualisieren von Chrome…

Remotion Lambda Chrome-Binärdateien in der Testregion eu-central-1 veröffentlichen und die gehosteten Layer- sowie Chrome-Versionsreferenzen aktualisieren. Verwenden beim Aktualisieren von Chrome…

Update 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…

Update Remotion's ffmpeg-next Git revision to a published rust-ffmpeg commit, refresh Cargo.lock, rebuild all supported compositor binaries, validate the…

Update Remotion homepage GitHub star counts. Use when asked to refresh the displayed GitHub star count and push the change to main.

Aktualisiert die GitHub-Sternanzahlen auf der Remotion-Startseite. Verwenden, wenn aufgefordert, die angezeigte GitHub-Sternanzahl zu aktualisieren und die Änderung auf main zu pushen.

Update `AvailableFrom` in a PR to the next Remotion patch version (`main` + `0.0.1`).

Update `AvailableFrom` in a PR to the next Remotion patch version (`main` + `0.0.1`).

Upgrade the caniuse-lite override in the Remotion repo. Use when asked to update caniuse-lite to the latest npm version.

Aktualisiere den caniuse-lite-Override im Remotion-Repository. Verwende dies, wenn du aufgefordert wirst, caniuse-lite auf die neueste npm-Version zu aktualisieren.

Upgrade Mediabunny and related @mediabunny packages across the Remotion repo. Use when asked to update Mediabunny to the latest version.

Aktualisiere Mediabunny und die zugehörigen @mediabunny-Pakete im gesamten Remotion-Repository. Verwende dies, wenn du aufgefordert wirst, Mediabunny auf die neueste Version zu aktualisieren.

Lade große Remotion-Repository-Assets in den Cloudflare-R2-Bucket hinter remotion.media hoch und ersetze lokale public/-Assets durch gehostete URLs. Verwende dies, wenn eine Datei…

Lade große Remotion-Repository-Assets in den Cloudflare R2-Bucket hinter remotion.media hoch und ersetze lokale public/-Assets durch gehostete URLs. Verwende, wenn eine Datei…

Implementieren oder überprüfen Sie eine Remotion-5-Breaking-Change, während die v4- und v5-Release-Linien weiterhin Code gemeinsam nutzen. Verwenden Sie dies, wenn das v4-Verhalten und die öffentlichen Typen erhalten bleiben müssen…

Set 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…

Richte einen Codex-Monitor für Vercel-Deployments und Preview-URLs ein. Verwende, wenn der Benutzer /vercel oder $vercel aufruft, Codex bittet, einen Vercel…

The version of Remotion we are working on.

Die Version von Remotion, an der wir arbeiten.

Erstelle einen Bericht über ein Video

Generate a report about a video

Guidance for working on Remotion Studio Visual Mode, sequence identity, node paths, symbolicated stacks, override IDs, and hot reload behavior. Use when…

Anleitung für die Arbeit mit dem Remotion Studio Visual Mode, Sequenzidentität, Knotenpfaden, symbolisierten Stacks, Überschreibungs-IDs und Hot-Reload-Verhalten. Verwenden, wenn…

Visuelles Snapshot-Testing für Web-Renderer-Komponenten mit Vitest-Fixtures. Erstellen Sie Test-Fixtures in packages/web-renderer/src/test/fixtures, die eine React-Komponente, Abmessungen, Bildrate und Dauer definieren. Registrieren Sie Fixtures in packages/web-renderer/src/test/Root.tsx, um die Vorschaufunktion zu aktivieren. Schreiben Sie Testfälle, die Standbilder mit renderStillOnWeb() rendern und die Ausgabe mit testImage()-Snapshot-Vergleich validieren. Führen Sie Tests mit bunx vitest src/test/video.test.tsx aus und aktualisieren Sie die Dokumentation in...

Add a test case to the web renderer

Guides for writing and editing Remotion documentation. Use when adding docs pages, editing MDX files in packages/docs, or writing documentation content.

Richtlinien und Vorlagen zum Schreiben der Remotion-API-Dokumentation im MDX-Format. Erstellen Sie eine .mdx-Datei pro API in packages/docs/docs, fügen Sie sie in sidebars.ts ein und führen Sie bun render-cards.ts aus, um Social-Preview-Karten zu generieren. Verwenden Sie ###-Überschriften für API-Eigenschaften (keine Aufzählungspunkte), fügen Sie ?-Suffix für optionale Parameter hinzu und geben Sie Standardwerte natürlich in den Beschreibungen an. Bevorzugen Sie typsichere Code-Snippets mit twoslash-Validierung; verwenden Sie // ---cut---, um Imports auszublenden, und fügen Sie immer title-Attribute zu...

Regeln für das Schreiben und Überprüfen von Tests im Remotion-Repository. Verwenden Sie diese, wann immer Sie Tests hinzufügen, bearbeiten oder überprüfen, insbesondere für Studio UI, Rendering, CLI, …