skills.rest
CleanExpo
CleanExpoCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

remotion-composition-builder

Build or patch Remotion composition TSX files from storyboard and design tokens.

Updated Aug 27, 2026
Search Tags:#composition#storyboard#motion#remotion#brand tokens#tsx generation#tsc validation
One-click install
npx skills add https://github.com/CleanExpo/Pi-Dev-Ops --skill remotion-composition-builder
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: remotion-composition-builder
Source: https://github.com/CleanExpo/Pi-Dev-Ops/tree/main/skills/remotion-composition-builder
Command: npx skills add https://github.com/CleanExpo/Pi-Dev-Ops --skill remotion-composition-builder

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It eliminates the slow, error-prone work of wiring brand tokens, storyboard scenes, layout rules, and motion into a single working Remotion composition file.

Core Features & Use Cases

  • Authors or patches Remotion composition code: Creates or updates src/compositions/{Name}.tsx (or scene sub-files) from an existing storyboard and design spec.
  • Wires BrandConfig + design tokens + motion helpers: Ensures runtime behavior (voice/voiceover/motion) comes from brands and visual tokens come only from {slug}.design.md via loadDesign.
  • Produces a render-ready registry entry: Registers the new or updated composition in src/Root.tsx with durationInFrames derived from summed scene durations × fps.
  • Validates output: Runs TypeScript type checking (npx tsc --noEmit) and fails loudly when assets referenced via staticFile() don’t exist.

Quick Start

Ask the system to build a Remotion composition for the given topic using the already-known brand, storyboard, design, and motion-language inputs.

Frequently Asked Questions about remotion-composition-builder

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate Remotion TSX compositions from a storyboard?▼

To generate Remotion TSX compositions, provide a storyboard, brand config, layout tokens, and motion specs. The composition builder maps scenes to Remotion Sequence blocks and registers render-ready output in Root.

How do I wire brand tokens into Remotion compositions?▼

Wiring brand tokens into Remotion compositions requires importing runtime behavior like voiceover and motion from a brand config, while loading visual tokens from a design markdown file. This ensures render-ready TSX files.

Do I need existing design and motion specs to build Remotion compositions?▼

Yes, you need upstream brand, storyboard, design, and motion-language inputs. The builder applies token-safe imports and maps scene durations to frames only after these specifications are available.

Can I validate Remotion TSX files and check for missing staticFile assets?▼

Yes, Remotion TSX validation runs TypeScript type checking with npx tsc --noEmit and fails loudly when assets referenced via staticFile do not exist, ensuring render-ready compositions.

What's the best way to register a new Remotion composition in Root?▼

Registering a Remotion composition in Root requires adding an entry with durationInFrames derived from summed scene durations multiplied by fps. The builder automates this registration for render-ready output.

Related Skills

Explore More Design & Creative Skills→
kuramapommelkuramapommel

value-proposition-canvas

Generate a value proposition canvas and UX storyboard from YAML and Markdown files.

Community
Advanced
aviz85aviz85
4

remotion-render

Render Remotion compositions to MP4 and WebM output files.

Community
Intermediate
dirnbauerdirnbauer
33

remotion-best-practices

Provide best-practices guidance for Remotion video composition in React.

Community
Basic
anis-marrouchianis-marrouchi

motion-animation

Integrate Framer Motion with Remotion for frame-synced animations.

Community
Intermediate