studio

$npx mdskill add remotion-dev/remotion/studio

Launches Remotion Studio

  • Starts example Studio
  • Depends on bun and remotion
  • Reads CLI output for URL
  • Opens URL in Codex browser

SKILL.md

.github/skills/studioView on GitHub ↗
---
name: studio
description: 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, or wants the Remotion Studio dev UI available locally.
---

# Remotion Studio

## Overview

Prepare the Remotion monorepo, launch the example Studio, and open the served URL in the Codex in-app browser.

## Workflow

1. From the repository root, run:

```bash
bun i && bun run build
```

2. Start Studio from the example package:

```bash
cd packages/example && bunx remotion studio --no-open
```

Use `bunx`, not `npx`. Always pass `--no-open`; Codex should open the printed URL explicitly instead of letting the CLI open a browser.

3. Do not check `localhost:3000` before starting Studio. Another worktree may already be using that port, and probing it first can open the wrong Studio.
4. Keep the server process running and read its output for the local URL. The expected default is `http://localhost:3000`, but the CLI output is the source of truth.
5. If the CLI says Studio is already running, use the exact URL printed by that CLI invocation. Only verify with `curl` after the CLI has identified the URL for this worktree.
6. Open the exact CLI URL in the Codex in-app browser yourself. If no browser tool is available yet, use `tool_search` for the in-app browser control tool, then navigate to the local URL.
7. Tell the user the Studio URL and whether this is a newly started or already running server.

More from remotion-dev/remotion

SkillDescription
add-bugAdd 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.
add-cli-optionAdd 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.
add-effectAdd a new effect to @remotion/effects, including implementation, package exports, docs, demos, preview images, Remotion skill updates, formatting, and builds.
add-expertAdd a new expert to the Remotion experts page
add-new-packageAdd a new package to the Remotion monorepo, including package scaffolding, monorepo registration, documentation, build scripts, and release checklist updates. Use when creating a new @remotion package.
add-sfxAdd a new sound effect to @remotion/sfx
add-webcodecs-bugAdd 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.
canvas-capture-extensionRebuild, 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.
checkoutCheckout 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.
convertStart 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.