From remotion-scenes
Use when the user supplies a scenes-prompt.md (or equivalent Markdown matching the remotion-scenes format) and wants to scaffold a new Remotion project that implements it. Part of the remotion-scenes plugin. Does NOT generate the prompt itself (that is the script-to-prompt sub-skill).
How this skill is triggered — by the user, by Claude, or both
Slash command
/remotion-scenes:prompt-to-projectThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Scaffold a Remotion project from a scenes-prompt.md.
Scaffold a Remotion project from a scenes-prompt.md.
scenes-prompt.md and asks to build / scaffold / implement the Remotion project.script-to-prompt.If remotion-best-practices skill is available, load and apply these rules during this task:
rules/animations.mdrules/timing.mdrules/sequencing.mdrules/text-animations.mdrules/compositions.mdrules/transitions.md (if any scene uses a transition)If remotion-best-practices is not installed, proceed using this skill's references/animation-patterns.md as a fallback.
Read the prompt file (or use the pasted content). Extract:
# Video: <title>, Dimensions: (WxH), FPS:, Background:.## Scene N: <name> with:
Duration: — parse the frame count from Ns (Nf frames).Transition-in: / Transition-out: — one of fade, slide-left, slide-right, slide-up, slide-down, none.### Visuals body (string).### Animations bullets (parse each as element: clause, clause, ..., then split into one or more animation clauses such as {element, verb, direction?, range: [A, B], extras?}).### Assets bullets (- none ⇒ empty; - image: <path-or-url> ⇒ asset). Treat any other asset type as unsupported.Validation — fail fast with a clear message if:
# Video: <title> line.Duration or frame math is inconsistent.element: prefix.none or image:)../assets/.Transition-in is not none.Transition-out is not none.Scene N's Transition-out must match Scene N+1's Transition-in. If they differ, stop and ask the user to fix the prompt../<project-name>/.Run from the chosen parent directory:
npx create-video@latest --yes --blank --no-tailwind <name>
If the user explicitly asks for in-place scaffolding, run in a temp sibling directory and move files after generation. Otherwise prefer a named subdirectory because it is simpler and less error-prone.
Install the generated project's dependencies before any follow-up command:
cd <project-dir> && npm install
If @remotion/transitions is needed (any validated scene boundary not none), install it:
cd <project-dir> && npm install @remotion/transitions
Replace the scaffold's default source with files based on the parsed prompt.
src/Root.tsximport { Composition } from "remotion";
import { Main } from "./Main";
export const RemotionRoot = () => {
return (
<Composition
id="Main"
component={Main}
durationInFrames={<TOTAL_FRAMES>}
fps={<FPS>}
width={<WIDTH>}
height={<HEIGHT>}
/>
);
};
Substitute: TOTAL_FRAMES = sum of all scene frame counts; FPS/WIDTH/HEIGHT from the prompt header.
src/Main.tsxIf any boundary uses a transition (not none):
import { AbsoluteFill } from "remotion";
import { TransitionSeries, linearTiming } from "@remotion/transitions";
import { fade } from "@remotion/transitions/fade";
import { slide } from "@remotion/transitions/slide";
// import scene components
import { Scene1 } from "./scenes/Scene1";
import { Scene2 } from "./scenes/Scene2";
// ...
export const Main = () => {
return (
<AbsoluteFill style={{ background: "<BACKGROUND>" }}>
<TransitionSeries>
<TransitionSeries.Sequence durationInFrames={<SCENE_1_FRAMES>}>
<Scene1 />
</TransitionSeries.Sequence>
{/* if transition between 1 and 2 */}
<TransitionSeries.Transition
presentation={fade()}
timing={linearTiming({ durationInFrames: 15 })}
/>
<TransitionSeries.Sequence durationInFrames={<SCENE_2_FRAMES>}>
<Scene2 />
</TransitionSeries.Sequence>
{/* ...more scenes */}
</TransitionSeries>
</AbsoluteFill>
);
};
Otherwise use plain <Series> (from remotion) + <Series.Sequence>.
Transition presentation mapping:
fade → fade()slide-left → slide({ direction: "from-right" }) (outgoing slides to left, incoming from right)slide-right → slide({ direction: "from-left" })slide-up → slide({ direction: "from-bottom" })slide-down → slide({ direction: "from-top" })src/scenes/SceneN.tsx — one file per sceneTemplate per scene:
import { AbsoluteFill, useCurrentFrame, useVideoConfig, interpolate, spring, Img, staticFile } from "remotion";
export const SceneN = () => {
const frame = useCurrentFrame();
const { fps } = useVideoConfig();
// Per-element animation values derived from `### Animations` bullets.
// Use references/animation-patterns.md for the DSL→code mapping.
return (
<AbsoluteFill style={{ justifyContent: "center", alignItems: "center", color: "white", fontFamily: "sans-serif" }}>
{/* Render elements described in ### Visuals, with style derived from Animations. */}
</AbsoluteFill>
);
};
For each Animation bullet, translate using references/animation-patterns.md. Compose multiple animations on one element by multiplying transforms and combining opacity.
https://...): use <Img src={url}> directly../assets/... path: ensure public/assets/ exists; preserve the relative path after ./assets/ and reference it via staticFile("assets/...") from remotion (for example, ./assets/icons/logo.svg → public/assets/icons/logo.svg → staticFile("assets/icons/logo.svg")). If the file doesn't exist yet, render a placeholder colored <div> the same size, with a code comment // TODO: provide <path> and add the path to a "missing assets" list.cd <project-dir> && npx remotion still Main --scale=0.25 --frame=30 --output=out/frame30.png
Report PASS/FAIL. If it fails, surface the error to the user and stop before claiming success.
Print:
public/assets/, preserving any subdirectories after ./assets/).cd <project-dir>
npm install
npx remotion studio
--no-tailwind when scaffolding, but do not assume the current create-video@latest template is fully Tailwind-free. Avoid introducing Tailwind-specific code unless the user explicitly wants it.<Sequence> resets the frame counter inside the child component).src/Root.tsx exists, durationInFrames equals sum of scene frames.src/scenes/SceneN.tsx per scene in the prompt.Transition-in / Transition-out boundaries.npx remotion studio command given as the final next step.Creates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.
npx claudepluginhub panic-z/remotion-scenes --plugin remotion-scenes