Claude Kodu ile Remotion'ı Video Yönetmenine Dönüştürme

Remotion, Agent Skills'i piyasaya sürdü ve bu, yapay zeka ile video oluşturma anlayışını tamamen değiştiriyor.

npx skills add remotion-dev/skills

Hepsi bu kadar. Tek bir komutla Claude Code, Remotion'ın React tabanlı video çerçevesini tüm ayrıntılarıyla anlayan bir video oluşturma uzmanına dönüşüyor.

Remotion Agent Skills Nedir?

Agent Skills, Claude Code gibi yapay zeka ajanlarına belirli araçları ve çerçeveleri doğru bir şekilde nasıl kullanacaklarını öğreten "talimat kılavuzlarıdır". Resmi Remotion becerileri, Claude'a şunlar hakkında derin bilgi sağlar:

• Remotion'ın bileşen mimarisi (<Composition>, <Sequence>, <AbsoluteFill>)
• Animasyon API'leri (interpolate, spring, useCurrentFrame)
• Zamanlama, performans ve render için en iyi uygulamalar
• Girişler, geçişler ve efektler için yaygın kalıplar

Beceriler olmadan, Claude hatalı veya yanlış Remotion kodu üretebilir. Becerilerle ise, ilk denemede üretim kalitesinde video bileşenleri yazar.

Neler Oluşturacaksınız?

Bu eğitimde şunları yapacaksınız:

• Remotion Agent Skills'i tek bir komutla yükleyin
• Doğal dil kullanarak eksiksiz bir giriş videosu oluşturun
• Konuşma yoluyla animasyonları iyileştirin
• Videonuzu MP4'e render edin
• Remotion Lambda ile ölçeklendirin (isteğe bağlı)

Özet

# 1. Bir Remotion projesi oluşturun
npx create-video@latest my-video && cd my-video

# 2. Agent Skills'i yükleyin (ana adım!)
npx skills add remotion-dev/skills

# 3. Claude Code'u başlatın ve videonuzu tanımlayın
claude

# 4. Render edin
npx remotion render <composition-name> out/video.mp4

İş akışı tamamen bu. Agent Skills, Claude'a doğru Remotion kodu yazmayı öğretir, böylece React bileşenlerinde hata ayıklamak yerine ne istediğinizi tanımlamaya odaklanabilirsiniz.

Ön Koşullar

Başlamadan önce şunlara sahip olduğunuzdan emin olun:

Ayrıca şunlara sahip olmalısınız:

• Komut satırına temel aşinalık
• React hakkında temel anlayış (yardımcı olur ancak zorunlu değildir)

Adım 1: Remotion'ı Yükleyin ve Projenizi Oluşturun

Önce resmi CLI'ı kullanarak yeni bir Remotion projesi oluşturun.

1.1 Terminalinizi açın ve çalıştırın:

npx create-video@latest my-first-video

1.2 İstendiğinde, şu seçenekleri seçin:

? Projenizin adı ne olsun? my-first-video
? Bir şablon seçin: blank
? TypeScript kullanılsın mı? Yes
? Bağımlılıklar yüklensin mi? Yes

1.3 Projenize gidin:

cd my-first-video

1.4 Kurulumu doğrulayın:

npm run dev

Bu, tarayıcınızda http://localhost:3000 adresinde Remotion Studio'yu açar. Alt kısımda bir zaman çizelgesi olan boş bir tuval görmelisiniz.

Beklenen sonuç: Remotion Studio arayüzü ile bir tarayıcı penceresi.

Adım 2: Remotion Agent Skills'i Yükleyin

İşte sihrin gerçekleştiği yer burası. Tek bir komut, Claude Code'a Remotion hakkında uzman düzeyinde bilgi verir.

2.1 Proje dizininizde şunu çalıştırın:

npx skills add remotion-dev/skills

Added skill: remotion görüntülendiğinde, kurulum başarılı olmuştur.

2.2 Az önce ne oldu?

Komut, projenizdeki .claude/skills/remotion/ dizinine bir beceri ekledi. Bu klasör, Claude'a doğru Remotion kodu yazmayı öğreten talimat kılavuzu olan SKILL.md'yi içerir.

2.3 Kurulumu doğrulayın:

Beceri dosyasının mevcut olduğunu kontrol edin:

ls .claude/skills/remotion/

Beklenen çıktı:

SKILL.md

2.4 Proje yapınız artık şöyle görünüyor:

my-first-video/
├── .claude/
│   └── skills/
│       └── remotion/
│           └── SKILL.md      # Claude'a Remotion'ı öğreten "beyin"
├── src/
│   ├── Root.tsx
│   ├── Composition.tsx
│   └── index.ts
├── public/
├── remotion.config.ts
├── package.json
└── tsconfig.json

Profesyonel ipucu: Eğer beceri tanınmıyorsa, npx skills add remotion-dev/skills komutunu tekrar çalıştırın veya Claude Code'u yeniden başlatın.

Adım 3: Claude Code ile İlk Videonuzu Oluşturun

Şimdi Claude Code'u kullanarak eksiksiz bir video oluşturalım. Proje dizininizde terminalinizi açın.

3.1 Claude Code'u başlatın:

claude

3.2 Videonuzu tanımlayın:

Claude Code'a şu komutu yazın:

"DevFlow" adlı bir teknoloji şirketi için 5 saniyelik bir giriş videosu oluşturun.

Gereksinimler:
- Çözünürlük: 1920x1080
- Kare hızı: 30fps
- Arka plan: #1a1a2e'den #16213e'ye koyu bir gradyan
- Animasyon sırası:
  1. "DevFlow" logo metni opaklık 0'dan 1'e doğru belirir (0-30. kareler)
  2. Logo hafifçe zıplayarak büyür (15-45. kareler)
  3. "Daha hızlı oluşturun. Daha akıllı gönderin." sloganı aşağıda belirir (45-90. kareler)
  4. Her şey kalan kareler boyunca sabit kalır

Inter yazı tipi ailesiyle modern, temiz bir tipografi kullanın.

3.3 Claude Code dosyaları oluşturur:

Claude Code şu dosyaları oluşturacak veya değiştirecektir:

src/Root.tsx - Kompozisyon tanımı:

import React from 'react';
import { Composition } from 'remotion';
import { DevFlowIntro } from './DevFlowIntro';

export const RemotionRoot: React.FC = () => {
  return (
    <>
      <Composition
        id="devflow-intro"
        component={DevFlowIntro}
        durationInFrames={150}
        fps={30}
        width={1920}
        height={1080}
      />
    </>
  );
};

src/DevFlowIntro.tsx - Ana video bileşeni:

import React from 'react';
import {
  AbsoluteFill,
  useCurrentFrame,
  interpolate,
  spring,
  useVideoConfig,
} from 'remotion';

export const DevFlowIntro: React.FC = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  // Logo belirme (0-30. kareler)
  const logoOpacity = interpolate(frame, [0, 30], [0, 1], {
    extrapolateRight: 'clamp',
  });

  // Logo sıçrama ölçeği (15-45. kareler)
  const logoScale = spring({
    frame: frame - 15,
    fps,
    from: 1,
    to: 1.1,
    config: {
      damping: 10,
      stiffness: 100,
    },
  });

  // Slogan belirme (45-90. kareler)
  const taglineOpacity = interpolate(frame, [45, 90], [0, 1], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
  });

  return (
    <AbsoluteFill
      style={{
        background: 'linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)',
        justifyContent: 'center',
        alignItems: 'center',
        fontFamily: 'Inter, sans-serif',
      }}
    >
      <div style={{ textAlign: 'center' }}>
        <h1
          style={{
            fontSize: 120,
            fontWeight: 700,
            color: 'white',
            margin: 0,
            opacity: logoOpacity,
            transform: `scale(${frame >= 15 ? logoScale : 1})`,
          }}
        >
          DevFlow
        </h1>

        <p
          style={{
            fontSize: 36,
            color: 'rgba(255, 255, 255, 0.8)',
            marginTop: 24,
            opacity: taglineOpacity,
            fontWeight: 400,
          }}
        >
          Build faster. Ship smarter.
        </p>
      </div>
    </AbsoluteFill>
  );
};

3.4 Videonuzu önizleyin:

Remotion Studio çalışmıyorsa, başlatın:

npm run dev

Kompozisyon açılır menüsünden "devflow-intro"yu seçin. Zaman çizelgesini kullanarak videonuzda gezinin ve animasyonları önizleyin.

Beklenen sonuç: Kaybolan logo ve slogan animasyonları ile giriş videonuzun oynatılması.

Adım 4: Takip İstekleriyle Videonuzu İyileştirin

Claude Code'un gücü yinelemeli iyileştirmedir. Videomuzu geliştirelim.

4.1 Parçacık arka plan efekti ekleyin ve renk şemasını değiştirin

Yavaşça yukarı doğru yüzen küçük beyaz noktalarla
hafif, animasyonlu bir parçacık arka planı ekleyin.
Minimum düzeyde tutun - yaklaşık 20-30 parçacık,
çok düşük opaklık (0.1-0.2) ve yavaş hareket.
Gradyanı mavi-mor bir temaya değiştirin:
- Başlangıç rengi: #0f0c29
- Orta renk: #302b63
- Bitiş rengi: #24243e
3 duraklı bir gradyan yapın.
  

4.3 Ses efekti işareti ekleyin (isteğe bağlı):

Logo zıpladığında bir "vınlama" ses efektinin çalması gereken
yere bir işaretleyici yorumu ekleyin. Sesi daha sonra ekleyeceğim.

Her geri bildirim verdiğinizde, Claude Code ilgili kodu değiştirir ve değişiklikleri Remotion Studio'da anında önizleyebilirsiniz.

Adım 5: Prop'larla Dinamik İçerik Ekleme

Dinamik prop'ları kabul ederek videonuzu yeniden kullanılabilir hale getirin. Bu, farklı içeriklere sahip birden çok video oluşturmanıza olanak tanır.

5.1 Claude Code'dan prop eklemesini isteyin:

Videoyu şu prop'ları kabul edecek şekilde yeniden düzenleyin:
- companyName (string) - "DevFlow" yerine geçer
- tagline (string) - slogan metninin yerine geçer
- primaryColor (string) - ana gradyan rengi
- secondaryColor (string) - ikincil gradyan rengi

Ayrıca tip güvenliği için Zod şema doğrulamasını da ekleyin.

5.2 Claude Code şemayı oluşturur:

src/DevFlowIntro.tsx (güncellendi):

import { z } from 'zod';

export const introSchema = z.object({
  companyName: z.string().default('DevFlow'),
  tagline: z.string().default('Build faster. Ship smarter.'),
  primaryColor: z.string().default('#0f0c29'),
  secondaryColor: z.string().default('#24243e'),
});

type IntroProps = z.infer<typeof introSchema>;

export const DevFlowIntro: React.FC<IntroProps> = ({
  companyName,
  tagline,
  primaryColor,
  secondaryColor,
}) => {
  // ... bileşen bu prop'ları kullanır
};

src/Root.tsx (güncellendi):

import { Composition } from 'remotion';
import { DevFlowIntro, introSchema } from './DevFlowIntro';

export const RemotionRoot: React.FC = () => {
  return (
    <>
      <Composition
        id="company-intro"
        component={DevFlowIntro}
        durationInFrames={150}
        fps={30}
        width={1920}
        height={1080}
        schema={introSchema}
        defaultProps={{
          companyName: 'DevFlow',
          tagline: 'Build faster. Ship smarter.',
          primaryColor: '#0f0c29',
          secondaryColor: '#24243e',
        }}
      />
    </>
  );
};

5.3 Remotion Studio'da farklı prop'larla test edin:

Remotion Studio'da Props panelini tıklayın ve değerleri değiştirin:

{
  "companyName": "Apidog",
  "tagline": "Design. Debug. Test. Document.",
  "primaryColor": "#1e3a5f",
  "secondaryColor": "#0d1b2a"
}

Önizleme gerçek zamanlı olarak güncellenir.

Adım 6: Çok Sahneli Bir Video Oluşturun

Birden çok sahne içeren daha karmaşık bir video oluşturalım.

6.1 Claude Code'a komut verin:

Şu sahneleri içeren 30 saniyelik bir ürün demo videosu oluşturun:

Sahne 1 (0-5 saniye): Logo giriş animasyonu
Sahne 2 (5-12 saniye): 3 ikonun birer birer göründüğü özellik tanıtımı
  - İkon 1: Roket (Hız)
  - İkon 2: Kalkan (Güvenlik)
  - İkon 3: Grafik (Analiz)
  Her ikon soldan kayarak ve soluklaşarak içeri girmeli

Sahne 3 (12-22 saniye): Ürün panosunun maketi
  - Basit bir kullanıcı arayüzü maketi gösterin
  - Farklı bölümleri sırayla vurgulayın

Sahne 4 (22-30 saniye): Harekete geçirme
  - "Ücretsiz denemenizi başlatın"
  - Web sitesi URL'si belirir

Sahneleri düzenlemek için <Sequence> bileşenini kullanın.
Toplam süre: 30 fps'de 900 kare.

6.2 Claude Code sahne yapısını oluşturur:

import { Sequence, AbsoluteFill } from 'remotion';
import { LogoIntro } from './scenes/LogoIntro';
import { FeatureShowcase } from './scenes/FeatureShowcase';
import { DashboardMockup } from './scenes/DashboardMockup';
import { CallToAction } from './scenes/CallToAction';

export const ProductDemo: React.FC = () => {
  return (
    <AbsoluteFill style={{ backgroundColor: '#0a0a0a' }}>
      {/* Sahne 1: Logo Giriş (0-150. kareler) */}
      <Sequence from={0} durationInFrames={150}>
        <LogoIntro />
      </Sequence>

      {/* Sahne 2: Özellik Tanıtımı (150-360. kareler) */}
      <Sequence from={150} durationInFrames={210}>
        <FeatureShowcase />
      </Sequence>

      {/* Sahne 3: Pano Maketi (360-660. kareler) */}
      <Sequence from={360} durationInFrames={300}>
        <DashboardMockup />
      </Sequence>

      {/* Sahne 4: Harekete Geçirme (660-900. kareler) */}
      <Sequence from={660} durationInFrames={240}>
        <CallToAction />
      </Sequence>
    </AbsoluteFill>
  );
};

6.3 Claude Code bireysel sahne bileşenlerini oluşturur:

src/scenes/FeatureShowcase.tsx:

import { useCurrentFrame, interpolate, AbsoluteFill } from 'remotion';

const features = [
  { icon: '🚀', label: 'Speed', delay: 0 },
  { icon: '🛡️', label: 'Security', delay: 30 },
  { icon: '📊', label: 'Analytics', delay: 60 },
];

export const FeatureShowcase: React.FC = () => {
  const frame = useCurrentFrame();

  return (
    <AbsoluteFill
      style={{
        justifyContent: 'center',
        alignItems: 'center',
        gap: 80,
        flexDirection: 'row',
      }}
    >
      {features.map((feature, index) => {
        const slideIn = interpolate(
          frame - feature.delay,
          [0, 30],
          [-100, 0],
          { extrapolateRight: 'clamp', extrapolateLeft: 'clamp' }
        );
        const opacity = interpolate(
          frame - feature.delay,
          [0, 30],
          [0, 1],
          { extrapolateRight: 'clamp', extrapolateLeft: 'clamp' }
        );

        return (
          <div
            key={index}
            style={{
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
              transform: `translateX(${slideIn}px)`,
              opacity,
            }}
          >
            <span style={{ fontSize: 80 }}>{feature.icon}</span>
            <span style={{ fontSize: 24, color: 'white', marginTop: 16 }}>
              {feature.label}
            </span>
          </div>
        );
      })}
    </AbsoluteFill>
  );
};

Adım 7: Videonuza Ses Ekleme

7.1 Bir arka plan müzik parçası ekleyin:

Ses dosyanızı public klasörüne yerleştirin:

public/
└── audio/
    └── background-music.mp3

7.2 Claude Code'dan sesi entegre etmesini isteyin:

public/audio/background-music.mp3'den arka plan müziği ekleyin
- İlk 30 karede ses seviyesini artırın
- Son 30 karede ses seviyesini azaltın
- Ses seviyesini 0.5 olarak ayarlayın

7.3 Claude Code Audio bileşenini ekler:

import { Audio, interpolate, useCurrentFrame, useVideoConfig } from 'remotion';
import { staticFile } from 'remotion';

export const ProductDemo: React.FC = () => {
  const frame = useCurrentFrame();
  const { durationInFrames } = useVideoConfig();

  // Sesin açılıp kapanması
  const volume = interpolate(
    frame,
    [0, 30, durationInFrames - 30, durationInFrames],
    [0, 0.5, 0.5, 0],
    { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }
  );

  return (
    <AbsoluteFill>
      <Audio src={staticFile('audio/background-music.mp3')} volume={volume} />
      {/* ... kalan sahneler */}
    </AbsoluteFill>
  );
};

Adım 8: Videonuzu Render Edin

Şimdi videonuzu bir dosyaya aktaralım.

8.1 Komut satırından render edin:

# MP4 olarak render edin (çoğu kullanım için önerilir)
npx remotion render company-intro out/company-intro.mp4

# Özel prop'larla render edin
npx remotion render company-intro out/apidog-intro.mp4 \
  --props='{"companyName":"Apidog","tagline":"Design. Debug. Test. Document."}'

8.2 Render seçenekleri:

# Yüksek kalite (daha yavaş)
npx remotion render company-intro out/video.mp4 --crf=18

# Düşük kalite (daha hızlı, daha küçük dosya)
npx remotion render company-intro out/video.mp4 --crf=28

# GIF olarak render edin
npx remotion render company-intro out/video.gif --codec=gif

# WebM olarak render edin
npx remotion render company-intro out/video.webm --codec=vp8

# Belirli kare aralığını render edin
npx remotion render company-intro out/preview.mp4 --frames=0-90

8.3 Render ilerlemesi:

Şuna benzer bir çıktı göreceksiniz:

ℹ 0-150. kareler render ediliyor
████████████████████████████████████████ 100% | 150/150 kare
✓ 150 kare 12.3 saniyede render edildi (12.2 fps)
✓ Video 3.2 saniyede kodlandı
✓ Video out/company-intro.mp4 konumuna kaydedildi

Beklenen sonuç: out/ dizininizde render edilmiş bir video dosyası.

Adım 9: Remotion Lambda ile Ölçeklendirme (İsteğe Bağlı)

Videoları büyük ölçekte (yüzlerce veya binlerce) render etmek için Remotion Lambda'yı kullanın.

9.1 Lambda bağımlılıklarını yükleyin:

npm install @remotion/lambda

9.2 AWS kimlik bilgilerini yapılandırın:

# AWS kimlik bilgilerini ayarlayın
aws configure

# Remotion Lambda rolü oluşturun
npx remotion lambda policies role

9.3 Lambda fonksiyonunuzu dağıtın:

# Render fonksiyonunu dağıtın
npx remotion lambda functions deploy

# Video sitenizi dağıtın
npx remotion lambda sites create src/index.ts --site-name=my-videos

9.4 Lambda aracılığıyla render edin:

npx remotion lambda render \
  --function-name=remotion-render \
  --serve-url=https://your-bucket.s3.amazonaws.com/sites/my-videos \
  --composition=company-intro \
  --props='{"companyName":"ClientCo"}'

9.5 Programatik render etme:

import { renderMediaOnLambda } from '@remotion/lambda/client';

const result = await renderMediaOnLambda({
  region: 'us-east-1',
  functionName: 'remotion-render',
  composition: 'company-intro',
  serveUrl: 'https://your-bucket.s3.amazonaws.com/sites/my-videos',
  codec: 'h264',
  inputProps: {
    companyName: 'Apidog',
    tagline: 'Design. Debug. Test. Document.',
  },
});

console.log('Video URL:', result.url);

Adım 10: Bir Video Oluşturma API'si Oluşturun

İsteğe bağlı olarak video oluşturan bir API uç noktası oluşturun.

10.1 Claude Code'dan bir Express sunucusu oluşturmasını isteyin:

Şu uç noktaları olan bir Express.js API sunucusu oluşturun:

POST /api/videos/generate
- Kabul eder: template, props, format
- Bir Remotion Lambda render'ını tetikler
- Döndürür: jobId, status

GET /api/videos/status/:jobId
- Render ilerlemesini ve tamamlandığında indirme URL'sini döndürür

Uygun hata işleme ve Zod doğrulamayı dahil edin.

10.2 Claude Code sunucuyu oluşturur:

server/index.ts:

import express from 'express';
import { renderMediaOnLambda, getRenderProgress } from '@remotion/lambda/client';
import { z } from 'zod';

const app = express();
app.use(express.json());

const generateSchema = z.object({
  template: z.enum(['company-intro', 'product-demo']),
  props: z.record(z.unknown()),
  format: z.enum(['mp4', 'webm', 'gif']).default('mp4'),
});

app.post('/api/videos/generate', async (req, res) => {
  try {
    const { template, props, format } = generateSchema.parse(req.body);

    const { renderId, bucketName } = await renderMediaOnLambda({
      region: 'us-east-1',
      functionName: 'remotion-render',
      composition: template,
      serveUrl: process.env.REMOTION_SITE_URL!,
      codec: format === 'gif' ? 'gif' : 'h264',
      inputProps: props,
    });

    res.json({
      jobId: renderId,
      bucketName,
      status: 'processing',
    });
  } catch (error) {
    res.status(400).json({ error: (error as Error).message });
  }
});

app.get('/api/videos/status/:jobId', async (req, res) => {
  const { jobId } = req.params;
  const { bucketName } = req.query;

  const progress = await getRenderProgress({
    renderId: jobId,
    bucketName: bucketName as string,
    region: 'us-east-1',
    functionName: 'remotion-render',
  });

  res.json({
    status: progress.done ? 'completed' : 'processing',
    progress: progress.overallProgress,
    downloadUrl: progress.outputFile,
  });
});

app.listen(3001, () => {
  console.log('Video API running on http://localhost:3001');
});

10.3 API'nizi Apidog ile test edin:

Video oluşturma uç noktalarınızı test etmek için Apidog'u kullanın:

1. POST /api/videos/generate adresine yeni bir istek oluşturun
2. Gövdeyi ayarlayın:

{
  "template": "company-intro",
  "props": {
    "companyName": "TestCorp",
    "tagline": "Testing made easy"
  },
  "format": "mp4"
}

1. Yanıtın bir jobId içerdiğini gönderin ve doğrulayın
2. status: "completed" olana kadar durum uç noktasını yoklayın

Apidog'un otomatik test özellikleri, video oluşturma hattınızın güvenilir bir şekilde çalıştığını doğrulamanıza yardımcı olur.

Tam Örnek: Pazarlama Videosu Oluşturucu

İşte şablon olarak kullanabileceğiniz tam bir örnek.

Claude Code için İstem:

Şu özelliklere sahip eksiksiz bir pazarlama videosu oluşturucu oluşturun:

1. Şablon: "social-promo"
   - Süre: 15 saniye (30 fps'de 450 kare)
   - Çözünürlük: 1080x1080 (Instagram karesi)

2. Sahneler:
   - Kanca metni (0-3s): Dikkat çeken büyük, kalın metin
   - Ürün görseli (3-9s): Ken Burns efektiyle bir ürün gösterin
   - Özellikler listesi (9-12s): Sırayla görünen 3 madde işareti
   - CTA (12-15s): Nabız animasyonuyla "Şimdi Alışveriş Yap"

3. Prop'lar:
   - hookText: string
   - productImageUrl: string
   - features: string[] (3 öğeli dizi)
   - ctaText: string
   - brandColor: string

4. Metin göründüğünde ses kısıklığını dahil edin

Bunun çalışması için gerekli tüm dosyaları oluşturun.

Claude Code, özelleştirebileceğiniz ve büyük ölçekte render edebileceğiniz eksiksiz, üretim kalitesinde bir video şablonu oluşturacaktır.

Sık Karşılaşılan Sorun Giderme

Sorun: "Remotion modülü bulunamıyor"

# Çözüm: Bağımlılıkları yeniden yükleyin
rm -rf node_modules
npm install

Sorun: Fontlar yüklenmiyor

// Bileşenize font içe aktarma ekleyin
import { loadFont } from '@remotion/google-fonts/Inter';

const { fontFamily } = loadFont();

// Stillerde kullanın
style={{ fontFamily }}

Sorun: Video siyah render ediliyor

• Bileşenlerinizin görünür içerik döndürdüğünü kontrol edin
• AbsoluteFill'in bir arka plan rengi ayarlandığını doğrulayın
• Animasyonların hepsinin opaklık 0'da olmadığından emin olun

Sorun: Claude Code Remotion becerilerini tanımıyor

# Beceriyi yeniden yükleyin
npx skills add remotion-dev/skills

# .claude/skills/remotion/SKILL.md dosyasının mevcut olduğunu kontrol edin
ls .claude/skills/remotion/

# Claude Code'u yeniden başlatın

Sorun: Sürüm uyuşmazlığı hataları

# Remotion sürümlerini kontrol edin ve güncelleyin
npx remotion versions

# Bu genellikle uyumluluk sorunlarını düzeltir

Video oluşturma API'leri mi kuruyorsunuz? Uç noktalarınızı tasarlamak, test etmek ve belgelemek için Apidog'u ücretsiz deneyin. İstek şemalarını doğrulayın, test senaryolarını otomatikleştirin ve video hattınızın uç durumları sorunsuz bir şekilde ele aldığından emin olun.