Le hablo. Él escribe el código.
Sale un MP4.

# elige tu package manager: npm, pnpm, yarn o bun
$ bun create video

# o: npm create video · pnpm create video · yarn create video

# te pregunta:
? Project name: my-video
? Template: blank
? TypeScript: Yes
? Add Agent Skills? Yes        # ← ESTO
? Install dependencies: Yes

$ cd mi-proyecto-remotion

# instala las skills en .claude/skills/
$ npx skills add remotion-dev/skills

# o desde dentro de Remotion:
$ npx remotion skills add

$ ls .claude/skills/
remotion-best-practices/         # ← aquí está

$ ls .claude/skills/remotion-best-practices/
SKILL.md
rules/                           # 28 archivos de reglas

my-video/
│
├── .claude/
│   └── skills/
│       └── remotion-best-practices/    # ← LA SKILL
│           ├── SKILL.md
│           └── rules/
│               ├── animations.md
│               ├── audio.md
│               ├── compositions.md
│               ├── subtitles.md
│               └── ... (24 más)
│
├── src/
│   ├── Root.tsx           # el "compositor": registra videos
│   ├── Composition.tsx    # el video en sí (JSX)
│   └── index.ts           # entry point
│
├── public/                # imágenes, audio, fuentes
├── out/                   # aquí saldrán los MP4
│
├── remotion.config.ts     # config de render
└── package.json

Crea un video vertical de 20 segundos a 30 fps
(formato 1080×1920, para Reels/TikTok).

Composición se llama "hook-skills". Tres escenas:

Escena 1 · 0-180 frames (6 seg)
- Fondo crema (#F2EDE2)
- Texto centrado: "La mayoría usa Claude con un prompt suelto."
- Aparece con spring desde y=20 a y=0
- Tipografía: Inter, weight 800, color #1A1A1A

Escena 2 · 180-420 frames (8 seg)
- Mismo fondo
- Texto: "Yo tengo skills. Y dejé de pegar el mismo prompt 50×/día."
- Aparece línea a línea con stagger de 15 frames

Escena 3 · 420-600 frames (6 seg · CTA)
- Texto: "Comenta SKILLS y te paso las 5"
- Pulsa con spring cada 60 frames

Reglas:
- usa interpolate y spring, nunca CSS animations
- saca todo en frames, no en ms
- crea el componente en src/HookSkills.tsx
  y regístralo en src/Root.tsx
- si necesitas fuente, usa @remotion/google-fonts

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

export const HookSkills: React.FC = () => {
  return (
    <AbsoluteFill style={{ backgroundColor: "#F2EDE2" }}>
      <Sequence from={0} durationInFrames={180}>
        <Scene1 />
      </Sequence>
      <Sequence from={180} durationInFrames={240}>
        <Scene2 />
      </Sequence>
      <Sequence from={420} durationInFrames={180}>
        <Scene3CTA />
      </Sequence>
    </AbsoluteFill>
  );
};

// Escena 1 · texto entra con spring
const Scene1 = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const y = spring({ frame, fps, from: 20, to: 0 });
  const opacity = interpolate(frame, [0, 15], [0, 1], {
    extrapolateRight: "clamp"
  });

  return (
    <AbsoluteFill style={{
      justifyContent: "center",
      alignItems: "center",
      transform: `translateY(${y}px)`,
      opacity,
    }}>
      <h1 style={{
        fontFamily: "Inter",
        fontWeight: 800,
        fontSize: 72,
        textAlign: "center",
        padding: "0 80px",
        color: "#1A1A1A",
      }}>
        La mayoría usa Claude
      </h1>
    </AbsoluteFill>
  );
};

// Scene2 y Scene3CTA siguen el mismo patrón
// con spring + interpolate.

# abre Remotion Studio en el navegador
$ bun run dev          # o: npm run dev

# → http://localhost:3000
# → ves el video, scrubs por frames, ajustás mientras Claude edita

# básico · saca el MP4 a out/hook-skills.mp4
$ npx remotion render hook-skills out/hook-skills.mp4

# vertical para Reels/TikTok (1080×1920)
$ npx remotion render hook-skills out/reel.mp4 \
    --width=1080 --height=1920

# calidad alta (CRF más bajo = más calidad, archivo más grande)
$ npx remotion render hook-skills out/hd.mp4 --crf=18

# como GIF para preview rápido
$ npx remotion render hook-skills out/preview.gif --codec=gif

# mismo video, distinto texto (parametrizado)
$ npx remotion render hook-skills out/v2.mp4 \
    --props='{"hook":"Otro hook diferente"}'