83.3K+Scarica
Vai alla guida all’uso
remotiondi Google Labs

Remotion Skill.

Una skill Claude Code e Codex per motion e video: video di walkthrough da progetti Stitch con transizioni e zoom Remotion.

  • Motion e video
  • Video
Scarica OpenDesignGuida all'uso
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
Front matter e intestazioni di sezione letti dal file upstream il 14/09/2026 · 12.764 caratteri in totale

01 Cosa fa

Cosa fa la Skill remotion in Claude Code e Codex

Sintesi, workflow e output, tutto letto dal SKILL.md della skill.

Dal SKILL.mdLetto il 14-09-2026 · non è un'esecuzione registrata

Nelle parole della skill

Trasforma un progetto Stitch esistente in un video walkthrough. L'agente elenca i progetti e le schermate di Stitch, scarica lo screenshot.downloadUrl di ogni schermata in assets/screens/, registra larghezza, altezza, titolo e descrizione in un manifest screens.json, poi costruisce una composizione Remotion a partire da ScreenSlide.tsx e WalkthroughComposition.tsx usando transizioni fade, slide e zoom guidato da spring, oltre a overlay di testo.

È pensata per designer e sviluppatori che hanno già progettato schermate in Stitch e hanno familiarità con Node.js e React, poiché Remotion renderizza componenti React. I frame sono impostati di default a 30 fps, le schermate durano 3-5 secondi, e il risultato viene visualizzato in anteprima in Remotion Studio prima del rendering in MP4.

Che cosa produce

  • Un manifest screens.json contenente nome del progetto, id delle schermate, titoli, descrizioni, percorsi delle immagini, dimensioni e durata per ogni schermata
  • File dei componenti Remotion generati per il walkthrough
  • Configurazione del progetto Remotion aggiornata
Vedi l'esempio di prompt ↗

Come funziona

  1. 01
    Individuare gli MCP Servers

    Eseguire list_tools e identificare i prefissi dei server Stitch e Remotion in modo che le chiamate successive vengano indirizzate correttamente.

  2. 02
    Estrarre le schermate da Stitch

    Trovare il progetto, elencare le sue schermate, poi recuperare i metadati di ogni schermata per ottenere l'URL dello screenshot, le dimensioni e la descrizione.

  3. 03
    Preparare gli screenshot

    Scaricare ogni screenshot con web_fetch o curl in una directory di staging, ordinandoli secondo il flusso previsto per il walkthrough.

  4. 04
    Impostare il progetto Remotion

    Riutilizzare un progetto Remotion esistente, se presente, altrimenti creare un progetto TypeScript vuoto in una directory video/.

  5. 05
    Costruire la composizione

    Scrivere ScreenSlide.tsx per l'animazione di ogni schermata, WalkthroughComposition.tsx per sequenziare e gestire le transizioni, oltre a config.ts per fps e dimensioni.

  6. 06
    Anteprima, poi rendering

    Iterare in Remotion Studio su timing e valori spring, poi renderizzare il file finale tramite CLI o lo strumento di rendering di Remotion.

02 Trova la tua applicazione

Quando usare la skill remotion

Usa la skill remotion in Claude Code o Codex quando il lavoro riguarda motion e video di questo tipo. Ambito e limiti di seguito sono presi dal file della skill stessa.

Buona applicazione

  • Avete già un progetto Stitch contenente schermate progettate da mostrare in un walkthrough
  • Volete che elementi UI specifici vengano evidenziati con puntatori animati e cerchi hotspot
  • State creando un video di percorso utente passo dopo passo piuttosto che una semplice presentazione di slide
  • Conoscete già le capacità video di Remotion e volete che i suoi idiomi siano rispettati

Conosci i limiti

  • Non avete accesso al Stitch MCP Server, che è un prerequisito indispensabile
  • Nessuno nel team conosce React, dato che Remotion compone componenti React
  • Gli screenshot non possono essere estratti a piena risoluzione, il che il file indica come causa dell'output sfocato

Cosa fornire

  • Identificatore del progetto StitchUn ID di progetto già noto, oppure un titolo che l'agente può ricercare quando l'ID non viene fornito.
  • Quali schermate fanno parte del videoL'elenco delle schermate del progetto viene esaminato in modo da identificare tutte le schermate per il percorso guidato prima del download.
  • Dimensioni delle schermateLarghezza e altezza di ogni schermata sono necessarie affinché la composizione scali correttamente lo screenshot.
  • Titoli e descrizioniTitoli e descrizioni delle schermate diventano il testo contestuale mostrato sopra ogni fotogramma.
  • Ordine previsto del percorso guidatoGli asset sono organizzati nell'ordine in cui lo spettatore dovrebbe incontrarli, non nell'ordine restituito da Stitch.

03 Dentro la skill

Le regole che la skill remotion offre a Claude Code e Codex

8 istruzioni concrete, valori predefiniti e limiti che il SKILL.md imposta per l'agente — la parte del file che cambia il risultato.

  1. Le Schermate Durano di Default 3-5 Secondi

    Ogni schermata rimane visibile per una durata configurabile, con 3-5 secondi per schermata indicati come default.

  2. Componi a 30 Fps

    config.ts imposta il frame rate, e il default è 30 fps.

  3. Passa a 60fps Quando il Movimento è a Scatti

    Se le animazioni risultano a scatti, aumentate il frame rate a 60fps e regolate lo spring damping piuttosto che modificare il design.

  4. Zoom con Spring()

    Gli effetti di zoom devono essere guidati da animazioni spring applicate agli elementi UI importanti che si vogliono enfatizzare.

  5. Mantieni il Rapporto d'Aspetto Nativo

    Usate le dimensioni reali delle schermate Stitch o scalatele proporzionalmente, non deformate mai il layout.

  6. Guida la Build da un Manifest

    I dati delle schermate risiedono in un file manifest, così ordine, titoli e durate possono essere aggiornati senza toccare il codice dei componenti.

  7. Mantieni la Temporizzazione Costante

    La durata di visualizzazione delle schermate resta costante durante il walkthrough, salvo quando si vuole enfatizzare una schermata specifica.

  8. Iniziare con le Dissolvenze

    Iniziare con transizioni a dissolvenza di base e aggiungere animazioni complesse solo dopo che il taglio semplice funziona.

04 Mettila al lavoro

Installa remotion in Claude Code o Codex

Un comando npx skills add, poi un primo task nel tuo agente e una checklist per il risultato.

Aggiungi remotion a Claude Code, Codex o il tuo agente

Eseguitelo nel Suo progetto; l'installer chiede a quale agente aggiungerlo.

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

Forma CLI generica di skills per plugins/stitch-build/skills/remotion/SKILL.md; il repository potrebbe documentare un proprio percorso.

Dai alla Skill un Primo Compito di Motion e Video

Adatta questo prompt con i tuoi contenuti e vincoli, poi eseguilo in Claude Code o Codex.

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

Fonte: esempio SKILL.md (testuale).

Verifica il primo risultato

Ciò che il SKILL.md stesso indica come risultato corretto:

  • Visualizzare in anteprima la composizione in Remotion Studio prima di procedere al rendering
  • Seguire la checklist di completamento inclusa
  • Verificare che gli overlay di testo compaiano al momento giusto in ogni schermata
  • Confermare che le dimensioni della schermata corrispondano alla dimensione della composizione e riposizionare il testo in base alla dimensione reale della schermata
  • Assicurarsi che il testo dell'overlay resti leggibile per tutta la durata, non solo nel primo fotogramma
  • Se il movimento risulta a scatti, provare la via dei 60fps con uno smorzamento della spring rivisto

In OpenDesign remotion è incluso: Plugins → Skills, selezionarlo nella barra superiore.

Scarica OpenDesignLeggi il quickstart

05 Open source, tracciabile

Sorgente, licenza e verifica

Da dove provengono i dati di questa pagina e quando sono stati verificati l'ultima volta.

Author
Google Labs
Repository
github.com/google-labs-code/stitch-skills Branch main
File della skill
plugins/stitch-build/skills/remotion/SKILL.md Checksum del contenuto registrato alla verifica; commit 0337446
License
Apache-2.0 Da LICENSE.
Stelle del repository
8.304 Snapshot GitHub del 2026-09-14 per l'intero repository google-labs-code/stitch-skills, che contiene 12 skill in questo catalogo. Non è una valutazione o conteggio di utilizzo per remotion.
Verificato da OpenDesign
14 settembre 2026 Il file sorgente, il percorso, il testo della licenza e il conteggio delle stelle sono stati verificati. Incluso nella build principale di OpenDesign (verificato il 28 agosto 2026); non è stata registrata un'esecuzione live su questa pagina.

All'interno di SKILL.md

  1. PanoramicaChe cosa produce nel complesso il workflow di walkthrough Stitch più Remotion
  2. PrerequisitiServer MCP richiesti, Node.js, npm e un progetto Stitch con schermate
  3. Recupero e ReteIndividuazione dei prefissi MCP, ricerca di progetti e schermate, download degli asset
  4. Strategia di Composizione VideoArchitettura di ScreenSlide, WalkthroughComposition e configurazione, oltre a transizioni e overlay
  5. Passaggi di EsecuzioneRaccogliere gli asset, creare il manifest, generare i componenti, visualizzare in anteprima, eseguire il rendering
  6. Funzionalità AvanzateHotspot interattivi, integrazione della voce fuori campo ed estrazione automatica del testo dall'HTML di Stitch
  7. Struttura dei FileStruttura delle directory prevista per il progetto video e il manifest
  8. Integrazione con gli Skill di RemotionInstallazione degli skill agente propri di Remotion per indicazioni su animazione e prestazioni
  9. Pattern ComuniTre ricette: semplice slide show, evidenziazione di una funzionalità e flusso utente
  10. Risoluzione dei ProblemiCorrezioni per screenshot sfocati, testo disallineato, animazione a scatti, build fallite, tempistiche
  11. Best PracticeProporzioni, tempistiche costanti, testo leggibile, transizioni fluide, anteprima, ottimizzazione degli asset
  12. Consigli per il SuccessoIniziare in modo semplice, riutilizzare i pattern di Remotion, usare i manifest, visualizzare spesso in anteprima, accessibilità, dimensionamento per piattaforma
Descrizione della skill
«Genera video walkthrough da progetti Stitch usando Remotion con transizioni fluide, zoom e sovrapposizioni di testo»

Descrizione del front-matter da SKILL.md. Il file completo è di circa 12.764 caratteri. Leggi il file completo su GitHub.

06 Prima di installare

Domande sullo Skill remotion

Le risposte provengono dal SKILL.md letto il 2026-09-14, non da un'esecuzione registrata.

Che cosa devo avere installato prima che questo possa funzionare?

Accesso al Stitch MCP Server e al Remotion MCP Server oppure alla Remotion CLI, oltre a Node.js e npm, e un progetto Stitch che abbia già schermate progettate. È consigliata, ma non richiesta, familiarità con Remotion e con i componenti React.

Devo usare il server MCP di Remotion, o basta la CLI?

La CLI è sufficiente. Dopo l'anteprima in Remotion Studio, è possibile renderizzare con npx remotion render WalkthroughComposition output.mp4, oppure chiamare lo strumento di render di Remotion con i dettagli della composizione, se quel server è disponibile.

Per quanto tempo resta a schermo ogni schermata?

Da tre a cinque secondi per schermata come impostazione predefinita, memorizzata come durata per singola schermata nel manifest, così è possibile regolare ogni schermata singolarmente. La durata viene impostata nel manifest e visualizzata in anteprima in Remotion Studio.

Remotion

Esegui remotion su un vero task di Motion e Video.

La skill remotion è inclusa in OpenDesign. Scarica l'app, seleziona la skill in Plugins → Skills, incolla il prompt qui sopra e leggi il piano prima del risultato.

Scarica OpenDesignEsplora tutte le skill
Terminale
npx skills add https://github.com/google-labs-code/stitch-skills --skill remotion