remotion-video-reviewer

What this skill does

# 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

**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:**
- [x] Compared scene count: 4 scenes (matches)
- [x] Verified scene durations: All correct
- [x] Checked color palette: 1 mismatch found
- [x] Validated spring configs: All match
- [x] 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:**
- [x] All SCENE_TIMING constants match spec
- [x] Sequence components use correct start/duration
- [x] No timing overlap or gaps
- [x] 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:**
- [x] All assets present in `public/`
- [x] Correct formats used (mostly)
- [x] staticFile() imports correct
- [ ] File sizes optimized (1 large image)
- [x] No missing assets

---

### Performance (95%)

**Render Performance:**
- Average: 85ms/frame ✅ Excellent (target: <100ms)
- Scene 1: 65ms/frame ✅
- Scene 2: 105ms/frame 🟡 (particle sy