remotion-video-reviewer

Name: remotion-video-reviewer
Author: ncklrs

195installs3forks

How to install remotion-video-reviewer?

ncklrs/startup-os-skills/remotion-video-reviewer

$npx -y skills add ncklrs/startup-os-skills --skill remotion-video-reviewer

Installs into the current project.

Summary

Structured review process for Remotion video implementations. Analyzes spec compliance, detects common timing/easing issues, validates asset quality, and provides prioritized revision lists. Use when reviewing Remotion code against design specs or performing quality assurance on

Files · 1

View on GitHub

SKILL.md

1	# Remotion Video Reviewer
2
3	Provides comprehensive, structured reviews of Remotion video implementations against motion design specifications. Identifies issues, assesses impact, and generates actionable revision lists.
4
5	## What This Skill Does
6
7	Performs multi-layer review analysis:
8
9	1. Spec compliance — Verifies implementation matches design spec
10	2. Code quality — Checks patterns, performance, best practices
11	3. Timing accuracy — Validates frame calculations and animation timing
12	4. Visual fidelity — Confirms colors, typography, layout match spec
13	5. Asset quality — Verifies assets are production-ready
14	6. Performance — Identifies render bottlenecks
15
16	## Input/Output Formats
17
18	### Input Format: VIDEO_SPEC.md + Code Files
19
20	Requires both the original specification and implemented code:
21
22	VIDEO_SPEC.md (from `/motion-designer`)
23	```markdown
24	# Video Title
25
26	## Overview
27	- Duration: 30 seconds
28	- Frame Rate: 30 fps
29
30	## Color Palette
31	Primary: #FF6B35
32	Background: #0A0A0A
33
34	## Scene 1: Opening (0s - 5s)
35	- Logo scales from 0.8 to 1.0
36	- Spring config: { damping: 200 }
37	```
38
39	Code Files to review:
40	- `src/remotion/compositions/VideoName/index.tsx`
41	- `src/remotion/compositions/VideoName/constants.ts`
42	- `src/remotion/compositions/VideoName/types.ts`
43	- Asset files in `public/`
44
45	### Output Format: REVIEW_REPORT.md
46
47	Generates a comprehensive review with prioritized issues:
48
49	```markdown
50	# Video Review Report: [Video Title]
51
52	Date: 2026-01-23
53	Reviewer: remotion-video-reviewer
54	Spec Version: VIDEO_SPEC.md v1.0
55	Code Location: `src/remotion/compositions/VideoName/`
56
57	---
58
59	## Executive Summary
60
61	Overall Status: ✅ APPROVED WITH MINOR REVISIONS
62
63	Quick Stats:
64	- Total Issues: 4 (0 critical, 1 high, 2 medium, 1 low)
65	- Spec Compliance: 95%
66	- Code Quality: Excellent
67	- Production Ready: Yes, after addressing HIGH priority items
68
69	Recommendation: Address high-priority color mismatch before final render. Medium and low priority items are optional improvements.
70
71	---
72
73	## Compliance Scores
74
75	\| Category \| Score \| Status \| Notes \|
76	\|----------\|-------\|--------\|-------\|
77	\| Spec Compliance \| 95% \| 🟢 Pass \| 1 color mismatch in Scene 3 \|
78	\| Code Quality \| 98% \| 🟢 Pass \| Excellent structure, minor optimization opportunity \|
79	\| Timing Accuracy \| 100% \| 🟢 Pass \| All frame calculations correct \|
80	\| Visual Fidelity \| 95% \| 🟢 Pass \| Minor color deviation \|
81	\| Asset Quality \| 90% \| 🟡 Good \| 1 image could be optimized \|
82	\| Performance \| 95% \| 🟢 Pass \| Excellent render times \|
83
84	Overall Compliance: 95.5% — Production Ready
85
86	---
87
88	## Issues Found
89
90	### CRITICAL (Must Fix Before Production)
91	_None_ ✅
92
93	### HIGH Priority (Should Fix)
94
95	#### 1. Scene 3 Background Color Mismatch
96	Category: Visual Fidelity
97	Location: `src/remotion/compositions/VideoName/scenes/Scene3.tsx:15`
98	Impact: Visual inconsistency with brand colors
99
100	Issue:
101	```typescript
102	// Current implementation
103	backgroundColor: '#0B0B0B' // ❌ Wrong
104
105	// Spec requirement
106	Primary: #FF6B35
107	Background: #0A0A0A // ✅ Correct
108	```
109
110	Fix:
111	```typescript
112	// Update to use COLORS constant
113	backgroundColor: COLORS.background // Now: #0A0A0A
114	```
115
116	Verification:
117	- [ ] Update `constants.ts` if COLORS.background is incorrect
118	- [ ] Verify Scene 3 uses COLORS.background
119	- [ ] Visual check against spec color palette
120
121	---
122
123	### MEDIUM Priority (Consider Fixing)
124
125	#### 2. Large Product Image Could Be Optimized
126	Category: Asset Quality
127	Location: `public/images/product.png`
128	Impact: Slower render times, larger output file
129
130	Current:
131	- Format: PNG
132	- Resolution: 4000x3000
133	- File size: 8.2MB
134
135	Recommendation:
136	- Format: JPEG (no transparency needed)
137	- Resolution: 1920x1440 (2x display size)
138	- Quality: 90%
139	- Expected size: ~400KB (95% reduction)
140
141	Fix:
142	```bash
143	# Resize and convert
144	magick public/images/product.png -resize 1920x1440 -quality 90 public/images/product.jpg
145
146	# Update code to use .jpg
147	<Img src={staticFile('images/product.jpg')} />
148	```
149
150	Benefits:
151	- Faster preview/render times
152	- Smaller final video file
153	- No visual quality loss
154
155	---
156
157	#### 3. Particle System Could Use Memoization
158	Category: Performance
159	Location: `src/remotion/compositions/VideoName/scenes/Scene2.tsx:45`
160	Impact: Minor performance improvement possible
161
162	Current:
163	```typescript
164	// Particle positions recalculated (deterministic but not cached)
165	const particles = Array.from({ length: 70 }, (_, i) => ({
166	x: seededRandom(i * 123) * width,
167	y: seededRandom(i * 456) * height,
168	}));
169	```
170
171	Recommendation:
172	```typescrip

People who liked this also viewed

6 picks

Type

remotion-video-reviewer

195installs3forks

View on GitHub

How to install remotion-video-reviewer?

ncklrs/startup-os-skills/remotion-video-reviewer

$npx -y skills add ncklrs/startup-os-skills --skill remotion-video-reviewer

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Remotion Video Reviewer
2
3	Provides comprehensive, structured reviews of Remotion video implementations against motion design specifications. Identifies issues, assesses impact, and generates actionable revision lists.
4
5	## What This Skill Does
6
7	Performs multi-layer review analysis:
8
9	1. Spec compliance — Verifies implementation matches design spec
10	2. Code quality — Checks patterns, performance, best practices
11	3. Timing accuracy — Validates frame calculations and animation timing
12	4. Visual fidelity — Confirms colors, typography, layout match spec
13	5. Asset quality — Verifies assets are production-ready
14	6. Performance — Identifies render bottlenecks
15
16	## Input/Output Formats
17
18	### Input Format: VIDEO_SPEC.md + Code Files
19
20	Requires both the original specification and implemented code:
21
22	VIDEO_SPEC.md (from `/motion-designer`)
23	```markdown
24	# Video Title
25
26	## Overview
27	- Duration: 30 seconds
28	- Frame Rate: 30 fps
29
30	## Color Palette
31	Primary: #FF6B35
32	Background: #0A0A0A
33
34	## Scene 1: Opening (0s - 5s)
35	- Logo scales from 0.8 to 1.0
36	- Spring config: { damping: 200 }
37	```
38
39	Code Files to review:
40	- `src/remotion/compositions/VideoName/index.tsx`
41	- `src/remotion/compositions/VideoName/constants.ts`
42	- `src/remotion/compositions/VideoName/types.ts`
43	- Asset files in `public/`
44
45	### Output Format: REVIEW_REPORT.md
46
47	Generates a comprehensive review with prioritized issues:
48
49	```markdown
50	# Video Review Report: [Video Title]
51
52	Date: 2026-01-23
53	Reviewer: remotion-video-reviewer
54	Spec Version: VIDEO_SPEC.md v1.0
55	Code Location: `src/remotion/compositions/VideoName/`
56
57	---
58
59	## Executive Summary
60
61	Overall Status: ✅ APPROVED WITH MINOR REVISIONS
62
63	Quick Stats:
64	- Total Issues: 4 (0 critical, 1 high, 2 medium, 1 low)
65	- Spec Compliance: 95%
66	- Code Quality: Excellent
67	- Production Ready: Yes, after addressing HIGH priority items
68
69	Recommendation: Address high-priority color mismatch before final render. Medium and low priority items are optional improvements.
70
71	---
72
73	## Compliance Scores
74
75	\| Category \| Score \| Status \| Notes \|
76	\|----------\|-------\|--------\|-------\|
77	\| Spec Compliance \| 95% \| 🟢 Pass \| 1 color mismatch in Scene 3 \|
78	\| Code Quality \| 98% \| 🟢 Pass \| Excellent structure, minor optimization opportunity \|
79	\| Timing Accuracy \| 100% \| 🟢 Pass \| All frame calculations correct \|
80	\| Visual Fidelity \| 95% \| 🟢 Pass \| Minor color deviation \|
81	\| Asset Quality \| 90% \| 🟡 Good \| 1 image could be optimized \|
82	\| Performance \| 95% \| 🟢 Pass \| Excellent render times \|
83
84	Overall Compliance: 95.5% — Production Ready
85
86	---
87
88	## Issues Found
89
90	### CRITICAL (Must Fix Before Production)
91	_None_ ✅
92
93	### HIGH Priority (Should Fix)
94
95	#### 1. Scene 3 Background Color Mismatch
96	Category: Visual Fidelity
97	Location: `src/remotion/compositions/VideoName/scenes/Scene3.tsx:15`
98	Impact: Visual inconsistency with brand colors
99
100	Issue:
101	```typescript
102	// Current implementation
103	backgroundColor: '#0B0B0B' // ❌ Wrong
104
105	// Spec requirement
106	Primary: #FF6B35
107	Background: #0A0A0A // ✅ Correct
108	```
109
110	Fix:
111	```typescript
112	// Update to use COLORS constant
113	backgroundColor: COLORS.background // Now: #0A0A0A
114	```
115
116	Verification:
117	- [ ] Update `constants.ts` if COLORS.background is incorrect
118	- [ ] Verify Scene 3 uses COLORS.background
119	- [ ] Visual check against spec color palette
120
121	---
122
123	### MEDIUM Priority (Consider Fixing)
124
125	#### 2. Large Product Image Could Be Optimized
126	Category: Asset Quality
127	Location: `public/images/product.png`
128	Impact: Slower render times, larger output file
129
130	Current:
131	- Format: PNG
132	- Resolution: 4000x3000
133	- File size: 8.2MB
134
135	Recommendation:
136	- Format: JPEG (no transparency needed)
137	- Resolution: 1920x1440 (2x display size)
138	- Quality: 90%
139	- Expected size: ~400KB (95% reduction)
140
141	Fix:
142	```bash
143	# Resize and convert
144	magick public/images/product.png -resize 1920x1440 -quality 90 public/images/product.jpg
145
146	# Update code to use .jpg
147	<Img src={staticFile('images/product.jpg')} />
148	```
149
150	Benefits:
151	- Faster preview/render times
152	- Smaller final video file
153	- No visual quality loss
154
155	---
156
157	#### 3. Particle System Could Use Memoization
158	Category: Performance
159	Location: `src/remotion/compositions/VideoName/scenes/Scene2.tsx:45`
160	Impact: Minor performance improvement possible
161
162	Current:
163	```typescript
164	// Particle positions recalculated (deterministic but not cached)
165	const particles = Array.from({ length: 70 }, (_, i) => ({
166	x: seededRandom(i * 123) * width,
167	y: seededRandom(i * 456) * height,
168	}));
169	```
170
171	Recommendation:
172	```typescrip

People who liked this also viewed

6 picks

Type