Remotion Video Reviewer

Provides comprehensive, structured reviews of Remotion video implementations against motion design specifications. Identifies issues, assesses impact, and generates actionable revision lists.

What This Skill Does

Performs multi-layer review analysis:

Spec compliance — Verifies implementation matches design spec
Code quality — Checks patterns, performance, best practices
Timing accuracy — Validates frame calculations and animation timing
Visual fidelity — Confirms colors, typography, layout match spec
Asset quality — Verifies assets are production-ready
Performance — Identifies render bottlenecks

Input/Output Formats

Input Format: VIDEO_SPEC.md + Code Files

Requires both the original specification and implemented code:

VIDEO_SPEC.md (from

/motion-designer

)

markdown

# Video Title

## Overview
- Duration: 30 seconds
- Frame Rate: 30 fps

## Color Palette
Primary: #FF6B35
Background: #0A0A0A

## Scene 1: Opening (0s - 5s)
- Logo scales from 0.8 to 1.0
- Spring config: { damping: 200 }

Code Files to review:

src/remotion/compositions/VideoName/index.tsx

src/remotion/compositions/VideoName/constants.ts

src/remotion/compositions/VideoName/types.ts

Asset files in
```
public/
```

Output Format: REVIEW_REPORT.md

Generates a comprehensive review with prioritized issues:

markdown

# Video Review Report: [Video Title]

**Date:** 2026-01-23
**Reviewer:** remotion-video-reviewer
**Spec Version:** VIDEO_SPEC.md v1.0
**Code Location:** `src/remotion/compositions/VideoName/`

---

## Executive Summary

**Overall Status:** ✅ APPROVED WITH MINOR REVISIONS

**Quick Stats:**
- Total Issues: 4 (0 critical, 1 high, 2 medium, 1 low)
- Spec Compliance: 95%
- Code Quality: Excellent
- Production Ready: Yes, after addressing HIGH priority items

**Recommendation:** Address high-priority color mismatch before final render. Medium and low priority items are optional improvements.

---

## Compliance Scores

| Category | Score | Status | Notes |
|----------|-------|--------|-------|
| **Spec Compliance** | 95% | 🟢 Pass | 1 color mismatch in Scene 3 |
| **Code Quality** | 98% | 🟢 Pass | Excellent structure, minor optimization opportunity |
| **Timing Accuracy** | 100% | 🟢 Pass | All frame calculations correct |
| **Visual Fidelity** | 95% | 🟢 Pass | Minor color deviation |
| **Asset Quality** | 90% | 🟡 Good | 1 image could be optimized |
| **Performance** | 95% | 🟢 Pass | Excellent render times |

**Overall Compliance:** 95.5% — Production Ready

---

## Issues Found

### CRITICAL (Must Fix Before Production)
_None_ ✅

### HIGH Priority (Should Fix)

#### 1. Scene 3 Background Color Mismatch
**Category:** Visual Fidelity
**Location:** `src/remotion/compositions/VideoName/scenes/Scene3.tsx:15`
**Impact:** Visual inconsistency with brand colors

**Issue:**
```typescript
// Current implementation
backgroundColor: '#0B0B0B'  // ❌ Wrong

// Spec requirement
Primary: #FF6B35
Background: #0A0A0A  // ✅ Correct

Fix:

typescript

// Update to use COLORS constant
backgroundColor: COLORS.background  // Now: #0A0A0A

Verification:

Update
```
constants.ts
```
if COLORS.background is incorrect
Verify Scene 3 uses COLORS.background
Visual check against spec color palette

MEDIUM Priority (Consider Fixing)

2. Large Product Image Could Be Optimized

Category: Asset Quality Location:

public/images/product.png

Impact: Slower render times, larger output file

Current:

Format: PNG
Resolution: 4000x3000
File size: 8.2MB

Recommendation:

Format: JPEG (no transparency needed)
Resolution: 1920x1440 (2x display size)
Quality: 90%
Expected size: ~400KB (95% reduction)

Fix:

bash

# Resize and convert
magick public/images/product.png -resize 1920x1440 -quality 90 public/images/product.jpg

# Update code to use .jpg
<Img src={staticFile('images/product.jpg')} />

Benefits:

Faster preview/render times
Smaller final video file
No visual quality loss

3. Particle System Could Use Memoization

Category: Performance Location:

src/remotion/compositions/VideoName/scenes/Scene2.tsx:45

Impact: Minor performance improvement possible

Current:

typescript

// Particle positions recalculated (deterministic but not cached)
const particles = Array.from({ length: 70 }, (_, i) => ({
  x: seededRandom(i * 123) * width,
  y: seededRandom(i * 456) * height,
}));

Recommendation:

typescript

import { useMemo } from 'react';

const particles = useMemo(
  () => Array.from({ length: 70 }, (_, i) => ({
    x: seededRandom(i * 123) * width,
    y: seededRandom(i * 456) * height,
  })),
  [width, height]
);

Expected Impact: 5-10% faster render for Scene 2

LOW Priority (Nice to Have)

4. Add JSDoc Comments to Scene Components

Category: Code Quality Location: All scene components Impact: Improved maintainability

Recommendation:

typescript

/**
 * Scene 1: Opening animation with logo reveal
 * Duration: 0s - 5s (frames 0-150)
 * Spec reference: VIDEO_SPEC.md Section "Scene 1"
 */
function Scene1Opening() {
  // ...
}

Benefits:

Easier for team members to understand
Better IDE autocomplete
Clear spec traceability

Detailed Analysis

Spec Compliance (95%)

✅ Passed:

All 4 scenes implemented
Scene timing matches spec exactly (verified frame calculations)
Typography matches (Inter font, correct weights)
Audio placement correct (background music + 2 SFX)
Spring configurations match spec descriptions
All animations implemented as described

❌ Failed:

Scene 3 background color (#0B0B0B instead of #0A0A0A)

Verification Steps Completed:

Compared scene count: 4 scenes (matches)
Verified scene durations: All correct
Checked color palette: 1 mismatch found
Validated spring configs: All match
Tested audio timing: Correct

Code Quality (98%)

✅ Excellent Patterns:

Constants properly extracted (COLORS, SPRING_CONFIGS, SCENE_TIMING)
Consistent naming conventions (Scene1Opening, Scene2Content)
AbsoluteFill used correctly in all scenes
Progress variables extracted (not inline spring calls)
TypeScript types defined for all props
Clean, readable code structure
Proper imports from remotion

✅ Best Practices Followed:

useVideoConfig used for responsive positioning
staticFile() used for all assets
Sequence timing uses constants
No magic numbers in code
Deterministic random in particle system

🟡 Minor Improvements:

Could add useMemo to particle calculation (LOW impact)
JSDoc comments would improve maintainability

Timing Accuracy (100%)

✅ All Verified:

Scene 1: 0s - 5s    → frames 0-150    ✓ Correct (5 * 30fps)
Scene 2: 5s - 15s   → frames 150-450  ✓ Correct (10 * 30fps)
Scene 3: 15s - 25s  → frames 450-750  ✓ Correct (10 * 30fps)
Scene 4: 25s - 30s  → frames 750-900  ✓ Correct (5 * 30fps)

Total: 30s = 900 frames ✓ Correct

Validation:

All SCENE_TIMING constants match spec
Sequence components use correct start/duration
No timing overlap or gaps
Audio timing matches frame calculations

Asset Quality (90%)

✅ Good:

Logo: 800x800 PNG, optimized, transparent ✓
Background music: 30s MP3, 192kbps ✓
Whoosh SFX: MP3, proper duration ✓
Pop SFX: MP3, proper duration ✓
Font: Inter loaded correctly via @remotion/google-fonts ✓

🟡 Could Improve:

Product image: 8.2MB PNG → Should be 1920x1440 JPEG (~400KB)

Asset Checklist:

All assets present in
```
public/
```
Correct formats used (mostly)
staticFile() imports correct
File sizes optimized (1 large image)
No missing assets

Performance (95%)

Render Performance:

Average: 85ms/frame ✅ Excellent (target: <100ms)
Scene 1: 65ms/frame ✅
Scene 2: 105ms/frame 🟡 (particle system, acceptable)
Scene 3: 75ms/frame ✅
Scene 4: 70ms/frame ✅

No Major Issues:

✅ Spring calculations extracted and reused
✅ No expensive operations in render path
✅ Assets load efficiently (except large PNG)
✅ No memory leaks detected

Minor Optimization Opportunities:

Memoize particle calculations (5-10% improvement in Scene 2)
Optimize product.png (faster asset loading)

Recommendations

Before Production

✅ Fix HIGH priority color mismatch (5 minutes)
⏭️ Consider optimizing product image (10 minutes) - Optional but recommended

For Future Iterations

Add JSDoc comments to scene components
Apply memoization to particle system
Consider extracting ParticleSystem to reusable component

Testing Checklist

Completed validation:

Visual inspection of all scenes
Frame-by-frame timing verification
Color palette comparison
Audio synchronization test
Asset loading verification
Render performance profiling
Code pattern review
Best practices compliance

Next Steps

Address HIGH priority issue: Fix Scene 3 background color
Optional: Optimize product.png asset
Final render: Generate production video
Performance check: Run
```
/remotion-performance-optimizer
```
if render times increase
Archive: Save REVIEW_REPORT.md with project files

Approval

Status: ✅ APPROVED WITH MINOR REVISIONS

This implementation is production-ready after addressing the Scene 3 color mismatch. All critical functionality, timing, and structure are correct. Medium and low priority items are optional improvements that can be addressed in future iterations.

Signed: remotion-video-reviewer Date: 2026-01-23


**This document provides:**
- Executive summary with quick approval status
- Quantified compliance scores (95%, 98%, etc.)
- Prioritized issues (CRITICAL, HIGH, MEDIUM, LOW)
- Specific code locations and fixes
- Detailed analysis per category
- Testing verification checklist
- Clear next steps
- Official approval status

**Feeds into:**
- Developer: Fix identified issues
- `/remotion-performance-optimizer` if performance issues found
- Final production render after approval

## Review Process

### 1. Spec Comparison

Compare implementation against motion design spec:

**Check:**
- [ ] All scenes from spec are implemented
- [ ] Scene durations match spec timing
- [ ] Color palette matches hex codes exactly
- [ ] Typography (font, size, weight) matches
- [ ] Animation descriptions are accurately translated
- [ ] Audio placement matches timing
- [ ] Spring configurations match spec

### 2. Code Quality Review

Evaluate code structure and patterns:

**Check:**
- [ ] Constants extracted (colors, springs, timing)
- [ ] Scene components follow naming convention
- [ ] AbsoluteFill used for all scenes
- [ ] Progress variables extracted (not inline calculations)
- [ ] useVideoConfig used for responsive positioning
- [ ] TypeScript types defined
- [ ] Proper imports from remotion

### 3. Timing Accuracy

Verify frame calculations:

**Check:**
- [ ] Seconds correctly converted to frames (seconds * fps)
- [ ] Scene timing constants are accurate
- [ ] Delay calculations use frame offsets
- [ ] Transitions account for overlap
- [ ] Total duration matches spec
- [ ] Animation hold times are correct

### 4. Animation Review

Assess animation implementation:

**Check:**
- [ ] Spring configs match spec descriptions
- [ ] Interpolate ranges match spec values
- [ ] Easing functions appropriate for motion type
- [ ] Stagger delays calculated correctly
- [ ] Continuous animations use appropriate patterns
- [ ] Exit animations present where specified

### 5. Visual Fidelity

Confirm visual accuracy:

**Check:**
- [ ] Background colors match spec
- [ ] Element colors use COLORS constants
- [ ] Font sizes match spec exactly
- [ ] Positioning follows spec layout
- [ ] Visual hierarchy maintained
- [ ] Layer organization (background/midground/foreground)

### 6. Asset Quality

Validate asset preparation:

**Check:**
- [ ] All required assets present
- [ ] Assets use staticFile() import
- [ ] Image formats appropriate (PNG for transparency, JPEG for photos)
- [ ] Audio files in supported formats
- [ ] Asset dimensions suitable for composition
- [ ] Fonts loaded correctly

### 7. Performance Check

Identify performance issues:

**Check:**
- [ ] No expensive calculations in render
- [ ] Progress variables reused
- [ ] No unnecessary spring recalculations
- [ ] Memoization used where appropriate
- [ ] Large assets optimized
- [ ] No memory leaks in loops

## Review Output Format

### Summary

```markdown
## Review Summary

**Spec Compliance**: 95% (1 minor deviation)
**Code Quality**: Excellent
**Timing Accuracy**: 100%
**Visual Fidelity**: 98% (color mismatch in Scene 3)
**Asset Quality**: Good (1 optimization needed)
**Performance**: Excellent

**Overall Rating**: READY FOR PRODUCTION (with minor revisions)

Issues List (Prioritized)

markdown

## Issues Found

### CRITICAL (Must Fix)
None

### HIGH (Should Fix)
1. **Scene 3 background color mismatch**
   - Spec: #0A0A0A
   - Code: #0B0B0B
   - Impact: Visual inconsistency
   - Fix: Update COLORS.background

### MEDIUM (Consider Fixing)
1. **Product image could be optimized**
   - Current: 4000x3000 PNG
   - Recommendation: 1920x1440 JPEG
   - Impact: Faster render times
   - Fix: Resize and convert asset

### LOW (Nice to Have)
1. **Add memoization to particle system**
   - Impact: Negligible performance gain
   - Fix: Wrap in useMemo

Recommendations

markdown

## Recommendations

### Code Organization
- Extract ParticleSystem to reusable component
- Consider splitting Scene6 (currently 150 lines)

### Performance
- Preload audio files
- Consider lazy loading large assets

### Maintainability
- Add JSDoc comments to scene components
- Consider extracting animation helpers

Common Issues to Check

Timing Issues

Issue: Incorrect frame calculation

typescript

// Wrong
const duration = 5; // Should be 150 frames, not 5

// Correct
const duration = 5 * fps; // 150 frames

Issue: Missing delay

typescript

// Wrong - all elements appear at once
const progress = spring({ frame, fps, config: SMOOTH_SPRING });

// Correct - staggered with delays
const progress = spring({
  frame: frame - (index * STAGGER_DELAY),
  fps,
  config: SMOOTH_SPRING
});

Animation Issues

Issue: Inline spring config instead of constant

typescript

// Wrong
const progress = spring({
  frame,
  fps,
  config: { damping: 200 },
});

// Correct
const progress = spring({
  frame,
  fps,
  config: SPRING_CONFIGS.smooth,
});

Issue: Repeated calculations

typescript

// Wrong
<div style={{
  opacity: spring({ frame, fps, config: SMOOTH }),
  transform: `scale(${spring({ frame, fps, config: SMOOTH })})`,
}} />

// Correct
const progress = spring({ frame, fps, config: SMOOTH });
<div style={{
  opacity: progress,
  transform: `scale(${progress})`,
}} />

Visual Issues

Issue: Hardcoded colors

typescript

// Wrong
backgroundColor: '#FF6B35'

// Correct
backgroundColor: COLORS.primary

Issue: Pixel values instead of responsive

typescript

// Wrong
left: 960,  // Hardcoded center

// Correct
left: width / 2,  // Responsive center

Asset Issues

Issue: Direct import instead of staticFile

typescript

// Wrong
import logo from './logo.png';

// Correct
import { staticFile } from 'remotion';
const logoSrc = staticFile('logo.png');

Performance Issues

Issue: Expensive operation in render

typescript

// Wrong - recalculated every frame
const particles = Array.from({ length: 1000 }, (_, i) => ({
  x: Math.random() * width,
  y: Math.random() * height,
}));

// Correct - calculate once
const particles = useMemo(
  () => Array.from({ length: 1000 }, (_, i) => ({
    x: seededRandom(i * 123) * width,
    y: seededRandom(i * 456) * height,
  })),
  [width, height]
);

Review Checklist

Complete review checklist:

Spec Compliance

All scenes implemented
Timing matches spec
Colors match exactly
Typography matches
Animations match descriptions
Audio matches spec

Code Quality

Constants properly extracted
Naming conventions followed
AbsoluteFill used correctly
TypeScript types defined
Clean, readable code

Timing

Frame calculations correct
Delays calculated properly
Total duration accurate
Transitions timed correctly

Visuals

Colors use constants
Responsive positioning
Visual hierarchy clear
Layer organization logical

Assets

All assets present
staticFile used
Formats appropriate
Quality sufficient

Performance

No expensive render calculations
Progress variables reused
Assets optimized
Memoization where needed

Integration with Other Skills

Works with:

```
/remotion-spec-translator
```
— Reviews translated code
```
/remotion-best-practices
```
— Ensures patterns are followed
```
/motion-designer
```
— Compares against original spec
```
/remotion-performance-optimizer
```
— Deep performance analysis

Rules Directory

For detailed review criteria:

rules/spec-compliance.md — Verifying spec accuracy
rules/timing-review.md — Frame timing validation
rules/animation-quality.md — Animation assessment
rules/visual-accuracy.md — Visual fidelity checks
rules/asset-validation.md — Asset quality review
rules/performance-audit.md — Performance checking
rules/code-patterns.md — Code quality standards

This skill ensures Remotion implementations are production-ready, spec-compliant, and follow best practices before deployment.

remotion-video-reviewer

NPX Install

Tags

SKILL.md Content

Remotion Video Reviewer

What This Skill Does

Input/Output Formats

Input Format: VIDEO_SPEC.md + Code Files

Output Format: REVIEW_REPORT.md

MEDIUM Priority (Consider Fixing)

2. Large Product Image Could Be Optimized

3. Particle System Could Use Memoization

LOW Priority (Nice to Have)

4. Add JSDoc Comments to Scene Components

Detailed Analysis

Spec Compliance (95%)

Code Quality (98%)

Timing Accuracy (100%)

Asset Quality (90%)

Performance (95%)

Recommendations

Before Production

For Future Iterations

Testing Checklist

Next Steps

Approval

Issues List (Prioritized)

Recommendations

Common Issues to Check

Timing Issues

Animation Issues

Visual Issues

Asset Issues

Performance Issues

Review Checklist

Spec Compliance

Code Quality

Timing

Visuals

Assets

Performance

Integration with Other Skills

Rules Directory