83.3K+İndir
Kullanım kılavuzuna geç
remotionyazan Google Labs

Remotion Skill.

Claude Code ve Codex için bir hareket ve video skill'i: Stitch projelerinden Remotion geçişleri ve yakınlaştırmalarıyla tanıtım videoları.

  • Motion & Video
  • Video
OpenDesign İndirKullanım kılavuzunu görüntüle
google-labs-code/stitch-skills · plugins/stitch-build/skills/remotion/SKILL.mdSKILL.md
--- name: remotion description: Generate walkthrough videos from Stitch projects using Remotion with smooth transitions, zooming, and text overlays --- ## Prerequisites ## Retrieval and Networking ## Video Composition Strategy ## Execution Steps ## Advanced Features ## File Structure
Ön bilgi ve bölüm başlıkları kaynak dosyadan 2026-09-14 tarihinde okundu · toplam 12.764 karakter

01 Ne yapar

remotion Skill'i Claude Code ve Codex'te Ne Yapar

Özet, iş akışı ve çıktılar; hepsi skill'in SKILL.md dosyasından okundu.

SKILL.md'den14-09-2026 tarihinde okundu · kayıtlı bir çalıştırma değil

Skill'in Kendi İfadeleriyle

Mevcut bir Stitch projesini bir tanıtım videosuna dönüştürür. Ajan Stitch projelerini ve ekranlarını listeler, her ekranın screenshot.downloadUrl değerini assets/screens/ dizinine indirir, genişlik, yükseklik, başlık ve açıklamayı bir screens.json manifestosuna kaydeder, ardından ScreenSlide.tsx ve WalkthroughComposition.tsx dosyalarından fade, slide ve spring destekli zoom geçişleri ile metin katmanları kullanan bir Remotion kompozisyonu oluşturur.

Stitch'te zaten tasarlanmış ekranları olan ve Remotion React bileşenlerini render ettiği için Node.js ve React'e aşina olan tasarımcı ve geliştiricilere yöneliktir. Kareler varsayılan olarak 30 fps, ekranlar 3-5 saniye olarak ayarlanır ve sonuç bir MP4 render edilmeden önce Remotion Studio'da önizlenir.

Neler üretir

  • Proje adı, ekran kimlikleri, başlıkları, açıklamaları, görsel yollarını, boyutlarını ve ekran başına süreyi tutan bir screens.json manifestosu
  • Tanıtım videosu için oluşturulan Remotion bileşen dosyaları
  • Güncellenmiş Remotion proje yapılandırması
Örnek istemi görün ↗

Nasıl Çalışır

  1. 01
    MCP Sunucularını Bulun

    Sonraki çağrıların doğru şekilde adreslenebilmesi için list_tools'u çalıştırın ve Stitch ile Remotion sunucu ön eklerini belirleyin.

  2. 02
    Stitch'ten Ekranları Çekin

    Projeyi bulun, ekranlarını listeleyin, ardından ekran görüntüsü URL'sini, boyutlarını ve açıklamasını almak için her ekranın meta verilerini getirin.

  3. 03
    Ekran Görüntülerini Hazırlayın

    Her ekran görüntüsünü web_fetch veya curl ile, tanıtım videosunun akışına uygun sırayla bir hazırlık dizinine indirin.

  4. 04
    Remotion Projesini Oluşturun

    Mevcut bir Remotion projesi varsa onu yeniden kullanın, yoksa video/ dizininde boş bir TypeScript projesi oluşturun.

  5. 05
    Kompozisyonu Oluşturun

    Ekran başına animasyon için ScreenSlide.tsx, sıralama ve geçişler için WalkthroughComposition.tsx, ayrıca fps ve boyutlar için config.ts yazın.

  6. 06
    Önizleyin, Sonra Render Edin

    Zamanlama ve spring değerleri üzerinde Remotion Studio'da yineleme yapın, ardından son dosyayı CLI veya Remotion render aracı üzerinden render edin.

02 Uyumunuzu bulun

remotion Skill Ne Zaman Kullanılır

İş bu tür hareket ve video olduğunda Claude Code veya Codex'te remotion skill'ini kullanın. Aşağıdaki uygunluk ve sınırlar skill'in kendi dosyasından alınmıştır.

İyi Uyum

  • Zaten üzerinden geçilecek tasarlanmış ekranlar içeren bir Stitch projeniz var
  • Belirli UI öğelerinin animasyonlu işaretçiler ve hotspot halkalarıyla vurgulanmasını istiyorsunuz
  • Düz bir slayt gösterisi yerine adım adım bir kullanıcı yolculuğu videosu oluşturuyorsunuz
  • Remotion'ın video yeteneklerine zaten aşinasınız ve onun deyimlerine uyulmasını istiyorsunuz

Sınırları Bilin

  • Kesin bir ön koşul olan Stitch MCP Server'a erişiminiz yok
  • Ekipte kimse React bilmiyor, oysa Remotion React bileşenlerinden oluşuyor
  • Ekran görüntüleri tam çözünürlükte alınamıyor; dosya bunun bulanık çıktının nedeni olduğunu belirtiyor

Ne Sağlamalısınız

  • Stitch proje tanımlayıcısıZaten bilinen bir proje kimliği veya kimlik verilmediğinde ajanın arayabileceği bir başlık.
  • Videoya hangi ekranların dahil edileceğiProjenin ekran listesi, indirmeden önce yürütme için gereken tüm ekranların belirlenmesi amacıyla incelenir.
  • Ekran boyutlarıKompozisyonun ekran görüntüsünü doğru şekilde ölçeklendirmesi için her ekranın genişlik ve yüksekliği gereklidir.
  • Başlıklar ve açıklamalarEkran başlıkları ve açıklamaları, her karenin üzerinde gösterilen bağlamsal metne dönüşür.
  • Amaçlanan yürütme sırasıVarlıklar, Stitch'in döndürdüğü sırayla değil, izleyicinin karşılaşması gereken sırayla düzenlenir.

03 Skill'in içinde

Remotion Skill'in Claude Code ve Codex'e Verdiği Kurallar

SKILL.md'nin ajan için belirlediği 8 somut talimat, varsayılan ve sınır — dosyanın sonucu değiştiren kısmı.

  1. Ekranlar Varsayılan Olarak 3-5 Saniye

    Her ekran, belirtilen varsayılan olarak ekran başına 3-5 saniye olmak üzere yapılandırılabilir bir süre boyunca tutulur.

  2. 30 Fps'de Oluştur

    config.ts kare hızını belirler ve varsayılan değer 30 fps'dir.

  3. Hareket Kekeliyorsa 60fps'e Geçin

    Animasyonlar takılıyor gibi görünüyorsa, tasarımı değiştirmek yerine kare hızını 60fps'e yükseltin ve spring damping'i ayarlayın.

  4. Spring() ile Yakınlaştırın

    Yakınlaştırma efektleri, vurgulanan önemli UI öğelerine uygulanan spring animasyonları tarafından yönlendirilmelidir.

  5. Doğal En-Boy Oranını Koruyun

    Gerçek Stitch ekran boyutlarını kullanın veya orantılı olarak ölçeklendirin, düzeni asla germeyin.

  6. Yapımı Bir Manifesto ile Yönlendirin

    Ekran verileri bir manifesto dosyasında tutulur, böylece sıralama, başlıklar ve süreler bileşen koduna dokunmadan güncellenebilir.

  7. Zamanlamayı Sabit Tutun

    Belirli bir ekran özellikle vurgulanmadıkça ekran gösterim süresi anlatım boyunca tutarlı kalır.

  8. Geçişlerle Başlayın

    Basit kesme çalıştığından sonra karmaşık animasyonları eklemek yerine önce basit geçiş efektleriyle başlayın.

04 İşe koyun

Claude Code veya Codex içinde remotion yükleyin

Bir npx skills add komutu, ardından ajanınızda ilk görev ve sonuç için bir kontrol listesi.

Claude Code, Codex veya Ajanınıza remotion Ekleyin

Projenizde çalıştırın; kurulum aracı, bunun hangi ajana ekleneceğini sorar.

Terminal
npx skills add https://github.com/google-labs-code/stitch-skills --skill remotion

plugins/stitch-build/skills/remotion/SKILL.md için genel skills CLI biçimi; depo kendi yolunu belgeleyebilir.

Skill'e İlk Hareket ve Video Görevi Verin

Bu isteği kendi içeriğiniz ve kısıtlamalarınızla uyarlayın, ardından Claude Code veya Codex'te çalıştırın.

Example prompt
Look up the screens in my Stitch project "Calculator App" and build a remotion video that shows a walkthrough of the screens.

Kaynak: SKILL.md örneği (birebir).

İlk Sonucu Kontrol Edin

SKILL.md'nin doğru bir sonucun nasıl göründüğüne dair söyledikleri:

  • Render işlemine geçmeden önce kompozisyonu Remotion Studio'da önizleyin
  • Birlikte gelen tamamlama kontrol listesini işleyin
  • Metin katmanlarının her ekranda doğru anda göründüğünü kontrol edin
  • Ekran boyutlarının kompozisyon boyutuyla eşleştiğini doğrulayın ve metni gerçek ekran boyutuna göre yeniden konumlandırın
  • Katman metninin sadece ilk karede değil, süre boyunca okunabilir kaldığından emin olun
  • Hareket takır takır görünüyorsa, düzeltilmiş spring damping ile 60fps seçeneğini deneyin

OpenDesign'da remotion hazır gelir: Plugins → Skills, üst çubuktan seçin.

OpenDesign İndirHızlı başlangıcı okuyun

05 Açık kaynak, izlenebilir

Kaynak, Lisans ve Doğrulama

Bu sayfadaki bilgilerin nereden geldiği ve en son ne zaman kontrol edildiği.

Author
Google Labs
Repository
github.com/google-labs-code/stitch-skills Branch main
Skill dosyası
plugins/stitch-build/skills/remotion/SKILL.md İçerik sağlama toplamı doğrulamada kaydedildi; commit 0337446
License
Apache-2.0 LICENSE dosyasından.
Repository yıldızları
8.304 GitHub anlık görüntüsü 2026-09-14 tarihinde google-labs-code/stitch-skills deposunun tamamı için alınmıştır; bu depoda katalogda yer alan 12 skill bulunmaktadır. remotion için bir değerlendirme veya kullanım sayısı değildir.
OpenDesign tarafından doğrulandı
2026-09-14 Kaynak dosya, yol, lisans metni ve yıldız sayısı kontrol edildi. OpenDesign ana sürümünde paketlenmiştir (2026-08-28 tarihinde kontrol edildi); bu sayfada canlı bir çalıştırma kaydı bulunmamaktadır.

SKILL.md içinde

  1. Genel BakışStitch ve Remotion anlatım iş akışının genel olarak ne ürettiği
  2. Ön KoşullarGerekli MCP sunucuları, Node.js, npm ve ekranları olan bir Stitch projesi
  3. Alma ve Ağ İşlemleriMCP ön eklerini bulma, projeleri ve ekranları sorgulama, varlıkları indirme
  4. Video Kompozisyon StratejisiScreenSlide, WalkthroughComposition ve yapılandırmanın mimarisi, ayrıca geçişler ve katmanlar
  5. Uygulama AdımlarıVarlıkları toplayın, manifesti oluşturun, bileşenleri üretin, önizleyin, render edin
  6. Gelişmiş ÖzelliklerEtkileşimli hotspot'lar, seslendirme entegrasyonu ve Stitch HTML'den otomatik metin çıkarımı
  7. Dosya YapısıVideo projesi ve manifestin beklenen dizin düzeni
  8. Remotion Skill'leriyle EntegrasyonAnimasyon ve performans rehberliği için Remotion'ın kendi ajan skill'lerini kurma
  9. Yaygın KalıplarÜç tarif: basit slayt gösterisi, özellik vurgusu ve kullanıcı akışı
  10. Sorun GidermeBulanık ekran görüntüleri, hizasız metin, takır takır animasyon, derleme hataları ve zamanlama için çözümler
  11. En İyi UygulamalarEn boy oranı, tutarlı zamanlama, okunabilir metin, akıcı geçişler, önizleme, varlık optimizasyonu
  12. Başarı İçin İpuçlarıBasit başlayın, Remotion kalıplarını yeniden kullanın, manifestleri kullanın, sık önizleyin, erişilebilirlik, platform boyutlandırması
Skill'in Kendi Açıklaması
Stitch projelerinden Remotion kullanarak yumuşak geçişler, zum ve metin katmanlarıyla tanıtım videoları oluşturun

SKILL.md dosyasından ön bilgi açıklaması. Dosyanın tamamı yaklaşık 12.764 karakterdir. Dosyanın tamamını GitHub'da okuyun.

06 Kurmadan önce

remotion Skill Hakkında Sorular

Yanıtlar, 2026-09-14 tarihinde okunan SKILL.md üzerinden alınmıştır, kaydedilmiş bir çalıştırmadan değil.

Bu çalışmadan önce ne yüklü olmalı?

Stitch MCP Server erişimi ve ya Remotion MCP Server ya da Remotion CLI, ayrıca Node.js ve npm, ve zaten tasarlanmış ekranlara sahip bir Stitch projesi gerekir. Remotion ve React bileşenlerine aşinalık zorunlu olmasa da tavsiye edilir.

Remotion MCP server'ı kullanmak zorunda mıyım, yoksa CLI yeterli mi?

CLI yeterlidir. Remotion Studio'da önizledikten sonra npx remotion render WalkthroughComposition output.mp4 ile render alabilir, ya da o server mevcutsa Remotion render aracını kompozisyon detaylarıyla çağırabilirsiniz.

Her ekran ne kadar süre görüntülenir?

Varsayılan olarak ekran başına üç ile beş saniye; bu, manifestte ekran başına bir süre olarak saklanır, böylece tekil ekranları ayarlayabilirsiniz. Süre manifestte belirlenir ve Remotion Studio'da önizlenir.

Remotion

Gerçek bir Hareket ve Video Görevinde remotion çalıştırın.

remotion skill'i OpenDesign içinde gelir. Uygulamayı indirin, Plugins → Skills'de skill'i seçin, yukarıdaki promptu yapıştırın ve sonuçtan önce planı okuyun.

OpenDesign'ı İndirinTüm skill'lere göz atın
Terminal
npx skills add https://github.com/google-labs-code/stitch-skills --skill remotion