Skip to main content
affpapa.org
RU EN
skill Claude Code CX Codex Cursor GitHub Copilot

remotion-studio — Remotion skill: video preview

This skill starts Remotion Studio and opens a video preview. Use it to inspect a composition and follow changes while working on a video.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add remotion-dev/skills --skill remotion-studio -a claude-code
Open on GitHub

What remotion-studio does

When creating or editing a video, the skill recommends starting Studio as soon as the project can run. Keep it open so the user can watch changes and guide the work. Once a composition exists, check that its video preview loads.

Run npx remotion studio to open the browser automatically. If you plan to use an agent's in-app browser, start Studio with --no-open, then open the exact URL printed by the command and check that Studio loads. If Studio is already open, the command prints its URL and exits; otherwise, it starts a long-running process. Use --port= to request a server port or --force-new to start another instance. Install this skill when you want a visible preview during video work. The --no-open option requires an in-app browser where you can open the printed URL.

What it helps with

  • start Studio once the project can run
  • open a video preview in the browser
  • check that a composition preview loads
  • request a Studio server port

Example prompts for the agent

  • Start Remotion Studio and open the project preview.
  • Keep Studio open while I edit the composition.
  • Run Studio with `--no-open` and open its URL in the in-app browser.

How to install remotion-studio

1Skills CLI (Vercel)

npx skills add remotion-dev/skills --skill remotion-studio -a claude-code

2Manually: put the files in place

~/.claude/skills/remotion-studio/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/remotion-studio/

From the same set8

The whole set →
remotion-best-practices remotion-dev Routes Remotion tasks to focused guidance for video creation, React markup, maps, multimedia, previews, and rendering. Claude Code CX Codex Cursor +1 678,800installs remotion-create remotion-dev This skill creates a new Remotion project and prepares a video composition. Use it when an agent needs to build video with React markup. Claude Code CX Codex Cursor +1 208,800installs remotion-captions remotion-dev A skill for captions in Remotion: transcribe video and audio, render and animate subtitles, import them from .srt. Claude Code CX Codex Cursor +1 206,600installs remotion-markup remotion-dev A skill that tells your agent how to write Remotion React markup: frame-driven animation, media components, effects. Useful when you build video in code. Claude Code CX Codex Cursor +1 202,600installs remotion-interactivity remotion-dev Guides AI coding agents to structure Remotion markup for Remotion Studio editing. Useful when building video scenes with customizable text, styles, and timing. Claude Code CX Codex Cursor +1 197,900installs remotion-docs remotion-dev This skill helps an agent find current Remotion documentation and read it as Markdown. Use it before implementing Remotion features or APIs. Claude Code CX Codex Cursor +1 195,200installs remotion-upgrade remotion-dev Upgrades Remotion and related dependencies to the latest stable release. It keeps package versions synchronized and updates project skills automatically. Claude Code CX Codex Cursor +1 186,800installs

Similar

gsap-timeline greensock This skill helps an agent build GSAP timelines, control timing, and manage playback. Use it for multi-step or parallel animation scenes. Claude Code CX Codex Cursor +1 68,500installs gsap-plugins greensock A skill that walks your agent through GSAP plugin registration and usage: ScrollTo, Flip, Draggable, SplitText and more. Handy when your animations already run on GSAP. Claude Code CX Codex Cursor +1 66,600installs gsap-react greensock This skill guides GSAP animation work in React and Next.js, including scoped selectors, cleanup, and client-only execution. Claude Code CX Codex Cursor +1 65,800installs animation-performance emilkowalski A diagnostic skill that tracks down dropped frames in web animations and points to the cheaper property to animate instead. Claude Code CX Codex Cursor +1 34,700installs gsap-utils greensock This skill guides an agent through gsap.utils for ranges, random values, snapping, and collections. Use it when building GSAP animations. Claude Code CX Codex Cursor +1 64,700installs daisyui saadeghi This skill hands your coding agent the daisyUI 5 reference, so it writes markup with real component classes instead of inventing its own. Claude Code CX Codex Cursor +1 12,000installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. Claude Code Claude.ai 1,025,790installs grill-me Matt Pocock grill-me interviews you about a plan or design to expose gaps and sharpen decisions. Use it before implementation starts. Claude Code 1,424,476installs

Questions about remotion-studio

How do I install remotion-studio in Claude Code?

Run npx skills add remotion-dev/skills --skill remotion-studio -a claude-code.

What does remotion-studio do?

It helps start Remotion Studio and check a video's preview while you work on its composition.

When should I use `--no-open`?

Use it when you intend to open the printed URL in an agent's in-app browser. Otherwise, start Studio without --no-open so it opens the browser automatically.

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor