83.3K+Descargar
Ir a la guía de uso
remotionpor Google Labs

Remotion Skill.

Una skill de Claude Code y Codex para motion y video: videos explicativos desde proyectos Stitch con transiciones y zooms en Remotion.

  • Movimiento y video
  • Video
Descargar OpenDesignVer guía de 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
Encabezados de sección y metadatos leídos del archivo original el 14/09/2026 · 12 764 caracteres completos

01 Qué hace

Qué Hace el Skill remotion en Claude Code y Codex

Resumen, flujo de trabajo y resultados, todo leído del SKILL.md del skill.

Del SKILL.mdLeído 2026-09-14 · no es una ejecución registrada

En los propios términos del Skill

Convierte un proyecto de Stitch existente en un video de recorrido. El agente lista los proyectos y pantallas de Stitch, descarga el screenshot.downloadUrl de cada pantalla en assets/screens/, registra el ancho, alto, título y descripción en un manifiesto screens.json, y luego construye una composición de Remotion a partir de ScreenSlide.tsx y WalkthroughComposition.tsx usando transiciones de fade, deslizamiento y zoom impulsado por spring, además de superposiciones de texto.

Está dirigido a diseñadores y desarrolladores que ya tienen pantallas diseñadas en Stitch y que se sienten cómodos con Node.js y React, ya que Remotion renderiza componentes de React. Los fotogramas son de 30 fps por defecto, las pantallas duran entre 3 y 5 segundos, y el resultado se previsualiza en Remotion Studio antes de renderizar un MP4.

Qué produce

  • Un manifiesto screens.json que contiene el nombre del proyecto, los ids de pantalla, títulos, descripciones, rutas de imagen, dimensiones y duración por pantalla
  • Archivos de componentes de Remotion generados para el recorrido
  • Configuración actualizada del proyecto de Remotion
Ver el ejemplo de prompt ↗

Cómo funciona

  1. 01
    Localizar los MCP Servers

    Ejecute list_tools e identifique los prefijos de los servidores de Stitch y Remotion para que las llamadas posteriores se dirijan correctamente.

  2. 02
    Extraer Pantallas de Stitch

    Encuentre el proyecto, liste sus pantallas y luego obtenga los metadatos de cada pantalla para conseguir la URL de la captura, las dimensiones y la descripción.

  3. 03
    Preparar las Capturas de Pantalla

    Descargue cada captura con web_fetch o curl en un directorio de preparación, ordenadas según el orden en que debe fluir el recorrido.

  4. 04
    Armar el Proyecto de Remotion

    Reutilice un proyecto de Remotion existente si hay uno, o de lo contrario cree un proyecto en blanco de TypeScript en un directorio video/.

  5. 05
    Construir la Composición

    Escriba ScreenSlide.tsx para la animación por pantalla, WalkthroughComposition.tsx para secuenciar y hacer las transiciones, además de config.ts para los fps y las dimensiones.

  6. 06
    Previsualizar y Luego Renderizar

    Itere en Remotion Studio sobre los tiempos y los valores de spring, y luego renderice el archivo final a través de la CLI o la herramienta de renderizado de Remotion.

02 Encuentra tu caso de uso

Cuándo usar el remotion Skill

Usa el skill remotion en Claude Code o Codex cuando el trabajo sea motion y video de este tipo. El ajuste y los límites a continuación se toman del propio archivo del skill.

Buen caso de uso

  • Ya tiene un proyecto de Stitch que contiene pantallas diseñadas para recorrer
  • Quiere resaltar elementos específicos de la UI con punteros animados y anillos de hotspot
  • Está creando un video de recorrido de usuario paso a paso en lugar de una simple presentación de diapositivas
  • Ya está familiarizado con las capacidades de video de Remotion y quiere que se respeten sus convenciones

Conozca los límites

  • No tiene acceso al Stitch MCP Server, que es un requisito previo indispensable
  • Nadie en el equipo sabe React, ya que Remotion compone componentes de React
  • Las capturas de pantalla no se pueden obtener a resolución completa, lo que el archivo señala como la causa de la salida borrosa

Qué proporcionar

  • Identificador del proyecto de StitchYa sea un ID de proyecto conocido de antemano, o un título que el agente puede buscar cuando no se proporciona el ID.
  • Qué pantallas forman parte del videoSe revisa la lista de pantallas del proyecto para identificar todas las pantallas del recorrido antes de descargarlas.
  • Dimensiones de la pantallaSe necesita el ancho y el alto de cada pantalla para que la composición escale correctamente la captura de pantalla.
  • Títulos y descripcionesLos títulos y descripciones de las pantallas se convierten en el texto contextual que se muestra sobre cada fotograma.
  • Orden previsto del recorridoLos recursos se organizan en el orden en que el espectador debe encontrarlos, no en el orden en que Stitch los devuelve.

03 Dentro del skill

Reglas que el skill de remotion da a Claude Code y Codex

8 instrucciones concretas, valores por defecto y límites que SKILL.md fija para el agente: la parte del archivo que cambia el resultado.

  1. Las pantallas duran de 3 a 5 segundos por defecto

    Cada pantalla se mantiene durante una duración configurable, con 3-5 segundos por pantalla como valor predeterminado indicado.

  2. Componer a 30 fps

    config.ts establece la velocidad de fotogramas, y el valor predeterminado es 30 fps.

  3. Pase a 60fps cuando el movimiento tartamudee

    Si las animaciones se ven entrecortadas, aumente la velocidad de fotogramas a 60fps y ajuste el amortiguamiento del spring en lugar de cambiar el diseño.

  4. Haga zoom con spring()

    Los efectos de zoom deben impulsarse mediante animaciones spring aplicadas a los elementos de UI importantes que se están destacando.

  5. Mantenga la relación de aspecto nativa

    Use las dimensiones reales de la pantalla de Stitch o escálelas proporcionalmente, nunca deforme el diseño.

  6. Impulse la construcción desde un manifiesto

    Los datos de las pantallas residen en un archivo de manifiesto para que el orden, los títulos y las duraciones puedan actualizarse sin tocar el código de los componentes.

  7. Mantenga el tiempo estable

    La duración de visualización de las pantallas se mantiene constante durante todo el walkthrough, salvo que se quiera enfatizar una pantalla en concreto.

  8. Empiece con fundidos

    Comience con transiciones de fundido básicas y añada las animaciones complejas solo una vez que el corte simple funcione.

04 Ponlo a trabajar

Instalar remotion en Claude Code o Codex

Un comando npx skills add, luego una primera tarea en tu agente y una lista de verificación para el resultado.

Agregar remotion a Claude Code, Codex o tu agente

Ejecútelo en su proyecto; el instalador pregunta a qué agente añadirlo.

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

Formato genérico de la CLI de skills para plugins/stitch-build/skills/remotion/SKILL.md; el repositorio puede documentar su propia ruta.

Dale al Skill una Primera Tarea de Motion y Video

Adapta esta instrucción con tu propio contenido y restricciones, luego ejecútala en 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.

Fuente: ejemplo de SKILL.md (textual).

Revisa el primer resultado

Lo que el propio SKILL.md indica que debe ser un resultado correcto:

  • Previsualice la composición en Remotion Studio antes de proceder con el render
  • Revise la lista de verificación de finalización incluida
  • Compruebe que las superposiciones de texto aparecen en el momento correcto en cada pantalla
  • Confirme que las dimensiones de la pantalla coinciden con el tamaño de la composición y reposicione el texto según el tamaño real de la pantalla
  • Asegúrese de que el texto de superposición se mantenga legible durante todo el recorrido, no solo en el primer fotograma
  • Si el movimiento se ve entrecortado, pruebe la vía de 60fps con un damping de spring revisado

En OpenDesign remotion viene incluido: Plugins → Skills, selecciónelo en la barra superior.

Descargar OpenDesignLeer la guía de inicio rápido

05 Código abierto, rastreable

Fuente, Licencia y Verificación

De dónde provienen los datos de esta página y cuándo se verificaron por última vez.

Author
Google Labs
Repository
github.com/google-labs-code/stitch-skills Rama main
Archivo de skill
plugins/stitch-build/skills/remotion/SKILL.md Suma de comprobación de contenido registrada en la verificación; commit 0337446
License
Apache-2.0 De LICENSE.
Estrellas del repositorio
8.304 Instantánea de GitHub tomada el 14-09-2026 para todo el repositorio google-labs-code/stitch-skills, que contiene 12 skills en este catálogo. No es una calificación ni un recuento de uso para remotion.
Verificado por OpenDesign
14-09-2026 Se verificaron el archivo fuente, la ruta, el texto de licencia y el recuento de estrellas. Incluido en OpenDesign main (verificado el 28-08-2026); no se ha registrado una ejecución real en esta página.

Dentro del SKILL.md

  1. ResumenQué produce en conjunto el workflow del walkthrough de Stitch más Remotion
  2. Requisitos previosServidores MCP necesarios, Node.js, npm, y un proyecto de Stitch con pantallas
  3. Recuperación y redesDescubrimiento de prefijos MCP, búsqueda de proyectos y pantallas, descarga de recursos
  4. Estrategia de composición de videoArquitectura de ScreenSlide, WalkthroughComposition y configuración, además de transiciones y superposiciones
  5. Pasos de ejecuciónReunir recursos, crear el manifiesto, generar componentes, previsualizar, renderizar
  6. Funciones avanzadasPuntos de acceso interactivos, integración de voz en off y extracción automática de texto desde el HTML de Stitch
  7. Estructura de archivosDiseño de directorios esperado del proyecto de video y del manifiesto
  8. Integración con las skills de RemotionInstalación de las skills de agente propias de Remotion para orientación sobre animación y rendimiento
  9. Patrones comunesTres recetas: presentación de diapositivas simple, destacado de funciones y flujo de usuario
  10. Resolución de problemasSoluciones para capturas borrosas, texto desalineado, animación entrecortada, fallos de build, problemas de tiempos
  11. Buenas prácticasRelación de aspecto, tiempos consistentes, texto legible, transiciones fluidas, previsualización, optimización de recursos
  12. Consejos para el éxitoEmpiece simple, reutilice patrones de Remotion, use manifiestos, previsualice a menudo, accesibilidad, dimensionado por plataforma
La descripción propia del Skill
"Genera videos de recorrido desde proyectos Stitch usando Remotion con transiciones suaves, zoom y superposiciones de texto"

Descripción del front-matter desde SKILL.md. El archivo completo tiene alrededor de 12.764 caracteres. Lee el archivo completo en GitHub.

06 Antes de instalar

Preguntas sobre la skill remotion

Las respuestas provienen del SKILL.md tal como se leyó el 2026-09-14, no de una ejecución registrada.

¿Qué necesito tener instalado antes de que esto pueda ejecutarse?

Acceso al Stitch MCP Server y al Remotion MCP Server o a la Remotion CLI, además de Node.js y npm, y un proyecto de Stitch que ya tenga pantallas diseñadas. Se recomienda estar familiarizado con Remotion y con los componentes de React, aunque no es obligatorio.

¿Tengo que usar el servidor MCP de Remotion, o basta con la CLI?

La CLI es suficiente. Después de previsualizar en Remotion Studio puede renderizar con npx remotion render WalkthroughComposition output.mp4, o llamar a la herramienta de renderizado de Remotion con los detalles de la composición si ese servidor está disponible.

¿Cuánto tiempo aparece cada pantalla en la escena?

De tres a cinco segundos por pantalla de forma predeterminada, almacenados como una duración por pantalla en el manifiesto para que pueda ajustar pantallas individuales. La duración se define en el manifiesto y se previsualiza en Remotion Studio.

Remotion

Ejecuta remotion en una tarea real de Motion y Video.

El skill remotion viene incluido dentro de OpenDesign. Descarga la aplicación, selecciona el skill en Plugins → Skills, pega el prompt anterior y lee el plan antes del resultado.

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