Remotion Video Reviewer

# 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:

1. **Spec compliance** — Verifies implementation matches design spec
2. **Code quality** — Checks patterns, performance, best practices
3. **Timing accuracy** — Validates frame calculations and animation timing
4. **Visual fidelity** — Confirms colors, typography, layout match spec
5. **Asset quality** — Verifies assets are production-ready
6. **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