Video production

Skill Marve10s/Better-Fullstack/.agents/skills/video-production

Produce programmable videos with Remotion using scene planning, asset orchestration, and validation gates for automated, brand-consistent video content.From its SKILL.md

Install

npx -y skills add Marve10s/Better-Fullstack --skill video-production

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

SKILL.md

6.4 KB, as published. Nobody here has run it

Remotion Video Production

Programmable video production skill using Remotion. Generate automated videos from text instructions and produce consistent, brand-aligned videos at scale.

When to use this skill

Automated video generation: Generate videos from text instructions
Brand video production: High-volume videos with consistent style
Programmable content: Combine narration, visuals, and animation
Marketing content: Product intros, onboarding, promo videos

Instructions

Step 1: Define the Video Spec

video_spec:
  audience: [target audience]
  goal: [video objective]
  duration: [total length - 30s, 60s, 90s]
  aspect_ratio: "16:9" | "1:1" | "9:16"
  tone: "fast" | "calm" | "cinematic"
  voice:
    style: [narration style]
    language: [language]

Step 2: Outline Scenes

Scene structuring template:

## Scene Plan

### Scene 1: Hook (0:00 - 0:05)
- **Visual**: Product logo fade-in
- **Audio**: Upbeat intro
- **Text**: "Transform Your Workflow"
- **Transition**: Fade → Scene 2

### Scene 2: Problem (0:05 - 0:15)
- **Visual**: Problem-state illustration
- **Audio**: Narration starts
- **Text**: Key message overlay
- **Transition**: Slide left

### Scene 3: Solution (0:15 - 0:30)
...

Step 3: Prepare Assets

# Asset checklist
assets/
├── logos/
│   ├── logo-main.svg
│   └── logo-white.svg
├── screenshots/
│   ├── dashboard.png
│   └── feature-1.png
├── audio/
│   ├── bgm.mp3
│   └── narration.mp3
└── fonts/
    └── brand-font.woff2

Asset prep rules:

Logo: SVG or high-resolution PNG
Screenshots: Normalize to the target aspect ratio
Audio: MP3 or WAV; normalize volume
Fonts: Webfont or local font files

Step 4: Implement Remotion Composition

// src/Video.tsx
import { Composition } from 'remotion';
import { IntroScene } from './scenes/IntroScene';
import { ProblemScene } from './scenes/ProblemScene';
import { SolutionScene } from './scenes/SolutionScene';
import { CTAScene } from './scenes/CTAScene';

export const RemotionVideo: React.FC = () => {
  return (
    <>
      <Composition
        id="ProductIntro"
        component={ProductIntro}
        durationInFrames={1800} // 60s at 30fps
        fps={30}
        width={1920}
        height={1080}
      />
    </>
  );
};

// Scene Component Example
const IntroScene: React.FC<{ frame: number }> = ({ frame }) => {
  const opacity = interpolate(frame, [0, 30], [0, 1]);

  return (
    <AbsoluteFill style={{ opacity }}>
      <Logo />
      <Title>Transform Your Workflow</Title>
    </AbsoluteFill>
  );
};

Step 5: Render and QA

# 1. Preview render (low quality)
npx remotion preview src/Video.tsx

# 2. QA checks
- [ ] Timing
- [ ] Audio sync
- [ ] Text readability
- [ ] Smooth transitions

# 3. Final render
npx remotion render src/Video.tsx ProductIntro out/video.mp4

Examples

Example 1: Product Intro Video

Prompt:

Create a 60s product intro video with 6 scenes,
upbeat tone, and 16:9 output. Include a CTA at the end.

Expected output:

## Scene Breakdown
1. Hook (0:00-0:05): Logo + tagline
2. Problem (0:05-0:15): Pain point visualization
3. Solution (0:15-0:30): Product demo
4. Features (0:30-0:45): Key benefits (3 items)
5. Social Proof (0:45-0:55): Testimonial/stats
6. CTA (0:55-1:00): Call to action + contact

## Remotion Structure
- src/scenes/HookScene.tsx
- src/scenes/ProblemScene.tsx
- src/scenes/SolutionScene.tsx
- src/scenes/FeaturesScene.tsx
- src/scenes/SocialProofScene.tsx
- src/scenes/CTAScene.tsx

Example 2: Onboarding Walkthrough

Prompt:

Generate a 45s onboarding walkthrough using screenshots,
with callouts and 9:16 format for mobile.

Expected output:

Scene plan with 5 steps
Asset list (screenshots, callout arrows)
Text overlays and transitions
Mobile-safe margins applied

Best practices

Short scenes: Keep each scene clear at 5-10 seconds
Consistent typography: Define a typography scale
Audio sync: Align narration cues with visuals
Template reuse: Save reusable compositions
Safe zones: Reserve margins for mobile aspect ratios

Common pitfalls

Text overload: Limit the amount of text per scene
Ignoring mobile safe zones: Check edges for 9:16 outputs
Final render before QA: Always verify in preview first

Troubleshooting

Issue: Audio and visuals out of sync

Cause: Frame timing mismatch Solution: Recalculate frames and align timestamps

Issue: Render is slow or fails

Cause: Heavy assets or effects Solution: Compress assets and simplify animations

Issue: Text unreadable

Cause: Font size too small or insufficient contrast Solution: Use at least 24px fonts and high-contrast colors

Output format

## Video Production Report

### Spec
- Duration: 60s
- Aspect Ratio: 16:9
- FPS: 30

### Scene Plan
| Scene | Duration | Visual | Audio | Transition |
|-------|----------|--------|-------|------------|
| Hook  | 0:00-0:05 | Logo fade | BGM start | Fade |
| ...   | ...      | ...    | ...   | ...  |

### Assets
- [ ] logo.svg
- [ ] screenshots (3)
- [ ] bgm.mp3
- [ ] narration.mp3

### Render Checklist
- [ ] Preview QA passed
- [ ] Audio sync verified
- [ ] Safe zones checked
- [ ] Final render complete

Multi-Agent Workflow

Validation & Retrospectives

Round 1 (Orchestrator): Spec completeness, scene coverage
Round 2 (Analyst): Narrative consistency, pacing review
Round 3 (Executor): Validate render-readiness checklist

Agent Roles

Agent	Role
Claude	Scene planning, script writing
Gemini	Asset analysis, optimization suggestions
Codex	Generate Remotion code, run renders