YYL Remotion Video

Turn an article, script, notes, or clear outline into a Remotion video project. This skill is video-first: no click-driven web player, no web presentation/, no TTS synthesis inside this workflow.

Core Output

my-video/
├── article.md
├── script.md
├── outline.md
├── notes.md
└── remotion/
    ├── src/Root.tsx
    ├── src/Composition.tsx
    ├── src/chapters/<NN>-<id>/
    │   ├── <Chapter>.tsx
    │   ├── narrations.ts
    │   └── timing.ts
    ├── public/assets/
    ├── preview-stills/
    └── out/

Bundled skill resources:

themes/       # color / typography systems
templates/    # copyable Remotion TSX starting points
references/   # craft, theme, and template guidance

Execution Strength

Decide before writing files:

Report in one line:

I will use <Quick/Standard/Strict> because <length / risk / target>.

Workflow

1. Input Gate

- Proceed only if the user gives source text, a script, notes, or a clear outline. - If they only give a topic, ask for material. Do not invent a full video.

1. Content Files

- Save source material to article.md when provided. - Save final spoken text to script.md. - Save development plan to outline.md. - outline.md plans chapters, beats, screen content, information pool, assets. - outline.md does not prescribe exact animation implementation.

1. Theme Choice

- Use only themes bundled in this skill: themes/command-film, themes/studio-white, themes/research-desk. - Do not reuse or import themes from web-video-presentation.

1. Template Choice

- If the user asks for a known layout or animation mechanism, read [references/TEMPLATES.md](references/TEMPLATES.md). - Use templates/luxury-perspective-gallery for luxury dark portfolio, 3D perspective horizontal carousel, or premium agency gallery requests.

1. Remotion Project

- Reuse existing remotion/ if present. - Create only if missing: ``bash npx create-video@latest --yes --blank --no-tailwind remotion ` - If a selected template requires Tailwind, create the project with Tailwind support or add Tailwind before copying template files. - Install dependencies only if remotion/node_modules` is missing or Remotion commands fail because dependencies are absent.

1. Timing

- Do not synthesize audio. - Estimate durations from narration and visual complexity. - Default fps = 30, width = 1920, height = 1080. - Store text in narrations.ts; store estimated durationFrames in timing.ts.

1. Implementation

- Read [references/REMOTION-CRAFT.md](references/REMOTION-CRAFT.md) before each chapter. - Animate with useCurrentFrame(), interpolate(), Easing, and Sequence. - Do not use CSS transition / CSS animation / GSAP for primary animation. - Tailwind may style static layout, but Tailwind animation utilities are not allowed.

1. Verification

- Run: ``bash cd remotion npm run lint ` - Render at least one still per chapter, or 2-4 stills for a short full video: `bash npx remotion still <composition-id> --frame=<frame> --scale=0.5 --output=preview-stills/<name>.png ` - Render mp4 when the stills look correct: `bash npx remotion render <composition-id> out/<name>.mp4 ``

1. Notes

- Update notes.md with fps, resolution, total frames, estimated duration, checked stills, rendered mp4 path, and that audio/subtitles are post-production.

Theme Selection

For full theme notes, read [references/THEMES.md](references/THEMES.md).

Template Selection

For full template notes, read [references/TEMPLATES.md](references/TEMPLATES.md).

Remotion Rules

• Use Composition in Root.tsx.
• Use Sequence to place beats on the timeline.
• Use useCurrentFrame() + interpolate() for motion.
• Place static assets in remotion/public/assets/; reference with staticFile().
• Still checks are required before final render.
• The final mp4 is silent unless the user later supplies audio in post-production.