remotion

Descripción general de la skill remotion

Para qué sirve remotion

La skill remotion te ayuda a convertir datos de pantalla de Stitch en un video walkthrough pulido usando Remotion. Es ideal para quienes quieren un flujo instalable y repetible para Remotion for Video Editing, en lugar de un prompt puntual que solo genere un plan de edición aproximado.

Quién debería usarla

Usa esta skill remotion si ya tienes un proyecto de Stitch con pantallas y necesitas un video que explique el flujo de la interfaz, la secuencia de funciones o un recorrido del producto. Encaja bien en demos de producto, clips de onboarding, revisiones de diseño y videos internos de lanzamiento donde el orden de las pantallas, el tiempo y los subtítulos importan.

Por qué es diferente

Su valor principal está en el puente entre la recuperación de Stitch y la composición en Remotion. En vez de exportar capturas manualmente y montar transiciones a mano, la skill espera entradas estructuradas de pantallas y luego construye una línea de tiempo con transiciones, zoom y superposiciones de texto. Eso hace que remotion sea útil cuando importan la consistencia, la capacidad de volver a renderizar y la edición en código.

Cómo usar la skill remotion

Instala remotion e inspecciona el flujo de trabajo

Instala la skill remotion con npx skills add google-labs-code/stitch-skills --skill remotion. Luego lee primero SKILL.md y después README.md, examples/screens.json, examples/WalkthroughComposition.tsx, resources/composition-checklist.md y resources/screen-slide-template.tsx. Esos archivos muestran la forma esperada de la entrada, el flujo de renderizado y el patrón de componentes reutilizables.

Dale a remotion las entradas correctas

Una buena solicitud de uso de remotion debería incluir el nombre o ID del proyecto de Stitch, el objetivo del video, la audiencia objetivo, el orden de las pantallas si ya se conoce y cualquier necesidad de narración o texto superpuesto. Por ejemplo: “Crea un walkthrough de remotion de 45 segundos para el proyecto de Stitch Calculator App, usando las pantallas de inicio, historial y ajustes, con títulos breves, transiciones de fundido y tono de demo de producto”. Eso es mucho mejor que “haz un video con mis pantallas”.

Sigue el flujo práctico de construcción

La guía de remotion de este repositorio está pensada en torno a recuperación, creación de manifiesto, composición y renderizado. Primero identifica el proyecto de Stitch y descarga las pantallas; después conviértelas en un manifiesto estilo screens.json con duraciones y tipos de transición; luego conecta ese manifiesto a una composición de Remotion. Si vas a adaptar esto a tu propio proyecto, revisa scripts/download-stitch-asset.sh para el manejo de assets y resources/composition-checklist.md para los controles de calidad que evitan rutas rotas o ritmos desiguales.

Qué comprobar antes de renderizar

Valida que las rutas de imagen resuelvan correctamente, que las dimensiones de las pantallas estén registradas y que la duración total encaje con el ritmo previsto. La calidad de salida de Remotion depende mucho de la estructura de entrada: las pantallas breves necesitan tiempos de espera más cortos, las pantallas densas requieren un ritmo más lento y los subtítulos deben ser lo bastante específicos para explicar qué cambió en cada paso. Si una pantalla está visualmente cargada, conviene una transición más suave y dejar que la superposición haga el trabajo explicativo.

Preguntas frecuentes sobre la skill remotion

¿remotion es solo para proyectos de Stitch?

Esta skill remotion está centrada en flujos de trabajo de Stitch a Remotion, así que Stitch es la fuente prevista de las pantallas. Si solo tienes imágenes estáticas y ningún proyecto de Stitch, los prompts habituales de Remotion pueden ser más simples, salvo que quieras adoptar el mismo patrón de manifiesto y composición.

¿Qué debo esperar de la instalación de remotion?

La instalación de remotion te da una skill que guía una canalización de video estructurada, no un editor terminado. Aun así necesitas las pantallas de origen, un entorno de Remotion funcional y suficiente detalle para decidir duraciones, transiciones y texto superpuesto. La instalación aporta más valor cuando piensas reutilizar el flujo de trabajo.

¿remotion es apto para principiantes?

Sí, si te sientes cómodo dando entradas claras y siguiendo un flujo basado en archivos. No hace falta conocer de antemano cada detalle de la API de Remotion, pero sí estar listo para revisar la composición de ejemplo y ajustar tiempos, rutas y subtítulos. Normalmente los principiantes avanzan más rápido si empiezan con el patrón de screens.json de ejemplo.

¿Cuándo no debería usar esta skill?

No uses remotion si solo necesitas un mockup estático, un clip rápido para redes sin estructura de origen o una edición totalmente automática sin control sobre la línea de tiempo. La skill es más fuerte cuando te importa usar Remotion de forma repetible y quieres ediciones respaldadas por código para un walkthrough de pantallas.

Cómo mejorar la skill remotion

Aporta una intención más precisa por pantalla

La mayor mejora de calidad viene de una intención más clara a nivel de pantalla. Dile a la skill qué debe comunicar cada pantalla, no solo el título. Por ejemplo, “Pantalla de inicio: mostrar la calculadora principal y los operadores básicos” es mucho más útil que “Pantalla de inicio”. Una mejor intención se traduce en un mejor texto superpuesto y en un mejor ritmo en remotion.

Usa un manifiesto con decisiones reales de tiempo

En lugar de tratar todas las pantallas por igual, asigna duraciones según su complejidad e importancia. Una pantalla con muchas funciones puede necesitar 5–6 segundos, mientras que una pantalla simple de confirmación quizá solo 2–3. Esta es la forma más rápida de mejorar el resultado de remotion porque el tiempo influye más en la comprensión que el brillo visual.

Itera en transiciones y superposiciones

Los fallos más comunes son abusar del zoom, hacer que todo el texto superpuesto suene genérico y permitir que las transiciones distraigan del producto. Si el primer render se siente recargado, simplifica las transiciones, acorta el texto y elimina cualquier superposición que repita lo que ya muestra la pantalla. Después vuelve a renderizar cambiando una sola cosa cada vez para ver qué ajuste mejoró el resultado.

Reutiliza los ejemplos del repositorio

Si tu primer resultado está cerca pero no termina de pulirse, compáralo con examples/WalkthroughComposition.tsx y resources/screen-slide-template.tsx. Esos archivos muestran el estilo previsto de remotion: composición centrada en la pantalla, animación sutil y metadatos estructurados. Adaptar ese patrón suele ser más rápido que rehacer el flujo desde cero.