> Canonical URL: https://codingcat.dev/course/remotion-skills-ai-agents/lesson/remotion-skills-ai-agents-lesson-1-skill-gap

# Lesson 1: Why Unskilled LLMs Hallucinate Broken React Video Code | Remotion Skills: Teaching AI Agents to Build Videos the Right Way | CodingCat.dev Course

[🧶 Remotion Skills: Teaching AI Agents to Build Videos the Right Way](/course/remotion-skills-ai-agents)Section 1.1 · Lesson 1 of 5[Next Lesson →](/course/remotion-skills-ai-agents/lesson/remotion-skills-ai-agents-lesson-2-npx-skills)

# Lesson 1: Why Unskilled LLMs Hallucinate Broken React Video Code

![Lesson 1: Why Unskilled LLMs Hallucinate Broken React Video Code Architecture Diagram](https://cdn.sanity.io/images/hfh83o0w/production/7664512b39ddc977fff7f4f342d9d8b608961fc9-1376x768.png?w=1376&q=82&fit=max&auto=format)

## 1. The 15-Second Hook

Welcome to Lesson 1 of Remotion Skills: Teaching AI Agents to Build Videos the Right Way on CodingCat.dev. Today we break down Why Unskilled LLMs Hallucinate Broken React Video Code and see how it powers our deterministic 3D AJ and code-rendered video pipeline.

## 2. Architecture Mental Model (Visual Diagram)

Look at the architecture diagram: on the left, vibe-prompted animations suffer from timer drift and unreviewed layout bugs. On the right, Skill Gap and Zero Drift enforce a deterministic frame contract.

## 3. Show Me the Code (skills/remotion-studio/SKILL.md)

Copied! 🐾📄 skills/remotion-studio/SKILL.mdtypescript

```
# Remotion Agent Skill Contract
- Always drive motion from `useCurrentFrame()` and `spring()`.
- Never use `useEffect`, `setTimeout`, or CSS `transition` for frame state.
- Introduce a new visual state every 2 to 4 seconds (120 to 240 frames at 60fps).
- Render a contact sheet via FFmpeg and fix the worst 3 frames before final export.
```

In skills/remotion-studio/SKILL.md, we wire up the production implementation so both our browser runtime and headless renderer stay 100 percent synchronized.

## 4. Production Trade-Off Matrix

DimensionDeterministic 2026 PatternLegacy Anti-PatternWhy It Matters in ProductionDeterminismPure function of time t via window.seek(t)Non-deterministic timers & Math.random()Any frame renders identically on demand.Visual PolishContact-sheet critique loop + W3C tokensFirst unreviewed render ships as finalEliminates overlapping text and dead beats.3D & Mascot RigUnified 57-path 2D SVG + Three.js 3D GLB AJStatic flat raster imagesInteractive orbital 3D + 120 BPM lip-sync.Production Cost$0 open-source local RTX 5090 pipeline$1,200+ agency fee or per-minute SaaS cliffScales across 95+ lessons with zero marginal cost.

When we compare this deterministic 2026 pattern against legacy workflows in our trade-off matrix, we get exact frame reproducibility, automated critique gates, and zero licensing cost.

## 5. Verdict & AJ Pro-Tip

> AJ Pro-Tip: Always verify frame 300 twice during your contact-sheet critique pass to confirm your Skill Gap setup has zero non-deterministic state leaks.

Adopt Skill Gap inside your studio folder today so every future launch film and 3D mascot animation builds on a reusable harness. Hit Subscribe and let's continue!

✏️ Visual Architecture Diagram

## how this course connects together.

Follow AJ from first principles to production-ready architecture.

Let’s build it!✏️ Visual Diagram: Remotion Skills: Teaching AI Agents to Build Vid…✓ Good PatternVISUAL DIAGRAM[Diagram Walkthrough]Step-by-step diagram breakdown for Remotion Skills: Teaching AI Agents to Build Videos the Right Way: Lesson 1: Why Unskilled LLMs Hallucinate Broken React Video Code: start with Core Architecture & Deterministic Implementation, implement Remotion Skills: Teaching AI Agents to Build Videos the Right Way, and ship to production.AAA Contrast Verified[Course Outline](/course/remotion-skills-ai-agents)

## Remotion Skills: Teaching AI Agents to Build Videos the Right Way

1/51

### Core Architecture & Deterministic Implementation

- [1.1Lesson 1: Why Unskilled LLMs Hallucinate Broken React Video Code▶](/course/remotion-skills-ai-agents/lesson/remotion-skills-ai-agents-lesson-1-skill-gap)
- [1.2Lesson 2: Installing & Structuring remotion-dev/skills in Your Agent Workspace](/course/remotion-skills-ai-agents/lesson/remotion-skills-ai-agents-lesson-2-npx-skills)
- [1.3Lesson 3: Encoding Pacing Laws, Typography Rules & Banned Slop Defaults](/course/remotion-skills-ai-agents/lesson/remotion-skills-ai-agents-lesson-3-style-gate)
- [1.4Lesson 4: State-List Prompting: Entry State, Exit State & Shot Purpose](/course/remotion-skills-ai-agents/lesson/remotion-skills-ai-agents-lesson-4-state-lists)
- [1.5Lesson 5: Multi-Agent Sub-Worker Video Orchestration with ANIMATION_GUIDE.md](/course/remotion-skills-ai-agents/lesson/remotion-skills-ai-agents-lesson-5-sub-agents)

@CodingCatDev on YouTube62.5K / 100K

Subscribe for new course lessons and architecture deep dives every week.

[Subscribe for New Lessons →](https://www.youtube.com/@codingcatdev?sub_confirmation=1)