---
name: remotion-video
version: 0.1.0
description: "Creazione e rendering di video Remotion nel progetto locale configurato. Usa questa skill quando un agent deve progettare, scrivere o aggiornare composizioni React/Remotion, gestire asset del video e renderizzare un output mp4 tramite il workspace Remotion."
tools:
  - name: remotion.getProjectState
    description: "Legge lo stato del progetto Remotion, i file chiave e la struttura corrente prima di modificare o renderizzare"
    input:
      type: object
      properties: {}
  - name: remotion.saveFiles
    description: "Crea o aggiorna uno o piu file nel progetto Remotion"
    input:
      type: object
      properties:
        files:
          type: array
          items:
            type: object
            properties:
              path: { type: string, description: "Path relativo nel progetto Remotion, per esempio src/PromoVideo.tsx" }
              content: { type: string, description: "Contenuto UTF-8 del file" }
            required: [path, content]
      required: [files]
  - name: remotion.listCompositions
    description: "Elenca le composizioni Remotion disponibili tramite CLI locale"
    input:
      type: object
      properties: {}
  - name: remotion.renderVideo
    description: "Renderizza una composizione Remotion in un file video"
    input:
      type: object
      properties:
        compositionId: { type: string, description: "ID della composition Remotion da renderizzare" }
        outputFile: { type: string, description: "Path relativo di output nel progetto, opzionale" }
        props: { type: object, description: "Props serializzabili passate alla composition" }
        codec: { type: string, description: "Codec opzionale, ad esempio h264" }
        imageFormat: { type: string, description: "Formato immagine opzionale, ad esempio jpeg o png" }
        overwrite: { type: boolean, description: "Se true sovrascrive l'output esistente" }
      required: [compositionId]
---

# Regole d’uso
- Prima di toccare il progetto usa `remotion.getProjectState` o `remotion.listCompositions` per capire entrypoint, composition ID e file gia presenti.
- Lavora nel progetto Remotion configurato dal sistema: crea o aggiorna file in `src/` per componenti e composizioni, usa `public/` per asset statici e salva gli output renderizzati in `renders/` salvo richiesta diversa.
- Ogni video deve avere una `Composition` registrata nel root con `id`, `durationInFrames`, `fps`, `width` e `height` espliciti. Se introduci una nuova composition, aggiorna anche `src/Root.tsx`.
- Mantieni i video parametrizzabili: preferisci props serializzabili, `defaultProps` e schema Zod quando il video deve essere riutilizzato con varianti di testo, colori, immagini, audio o CTA.
- Ragiona sempre in frame. Per orchestrare scene usa `Sequence`, `useCurrentFrame`, `interpolate` e `spring`; evita timing impliciti o dipendenti dal clock reale.
- Per testi e grafiche privilegia layout semplici, leggibili e robusti al resize. Evita dipendenze da misure DOM fragili se non strettamente necessarie.
- Per immagini, video e audio usa componenti Remotion dedicati e mantieni un timing esplicito: trim, volume, transizioni e sovrapposizioni devono essere controllati in frame.
- Quando il task richiede sottotitoli, voiceover, transizioni o audio-reactive effects, costruisci una timeline chiara per scene e overlay invece di accumulare logica dispersa nello stesso componente.
- Se il task richiede un nuovo video da zero, crea almeno: un componente di composition dedicato in `src/`, l'aggiornamento di `src/Root.tsx` e un render di prova con `remotion.renderVideo`.
- Dopo avere salvato i file, esegui sempre un render draft con `remotion.renderVideo` e restituisci il path dell'output insieme ai file modificati.