Lesson 2: Wiring remotion-dev/skills into Claude Code & Antigravity

1. The 15-Second Hook

Welcome to Lesson 2 of Flagship 1: Programmatic Video with React, Remotion & Agent Skills on CodingCat.dev. Today we break down Wiring remotion-dev/skills into Claude Code & Antigravity 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, Agent Skills and SKILL.md enforce a deterministic frame contract.

3. Show Me the Code (src/remotion/AjLaunchComposition.tsx)

import { AbsoluteFill, Sequence, spring, useCurrentFrame, useVideoConfig } from "remotion";

export const AjLaunchComposition: React.FC<{ title: string }> = ({ title }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  const scale = spring({ frame, fps, config: { damping: 14, stiffness: 180 } });
  return (
    <AbsoluteFill style={{ backgroundColor: "#0B1326", color: "#FFFFFF" }}>
      <Sequence from={0} durationInFrames={90}>
        <h1 style={{ transform: `scale(${scale})` }}>{title}</h1>
      </Sequence>
    </AbsoluteFill>
  );
};

In src/remotion/AjLaunchComposition.tsx, we wire up the production implementation so both our browser runtime and headless renderer stay 100 percent synchronized.

4. Production Trade-Off Matrix

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 Agent Skills setup has zero non-deterministic state leaks.

Adopt Agent Skills 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!