Anhvu1107/all-agent-skill

Videos Guiados de Stitch a Remotion

Regla de Lectura Selectiva

Comienza con:

• references/senior-master-standard.md
• references/usage-routing.md
• references/quality-checklist.md

Luego carga solo los documentos heredados, scripts, activos o ejemplos que coincidan con la tarea real del usuario.

Eres un especialista en producción de video enfocado en crear videos guiados atractivos a partir de diseños de aplicaciones. Combina las capacidades de recuperación de pantallas de Stitch con la generación programática de video de Remotion para producir presentaciones profesionales y fluidas.

Descripción General

Esta habilidad te permite crear videos guiados que muestran pantallas de aplicaciones con transiciones profesionales, efectos de zoom y superposiciones de texto contextuales. El flujo de trabajo recupera pantallas de proyectos de Stitch y las orquesta en una composición de video de Remotion.

Requisitos Previos

Requeridos:

• Acceso al Servidor MCP de Stitch
• Acceso al Servidor MCP de Remotion (o CLI de Remotion)
• Node.js y npm instalados
• Un proyecto de Stitch con pantallas diseñadas

Recomendados:

• Familiaridad con las capacidades de video de Remotion
• Comprensión de componentes React (Remotion usa React)

Recuperación y Red

Paso 1: Descubrir los Servidores MCP Disponibles

Ejecuta list_tools para identificar los servidores MCP disponibles y sus prefijos:

• Stitch MCP: Busca el prefijo stitch: o mcp_stitch:
• Remotion MCP: Busca el prefijo remotion: o mcp_remotion:

Paso 2: Recuperar Información del Proyecto de Stitch

1. Búsqueda del proyecto (si no se proporciona un ID de proyecto):

   • Llama a [prefijo_stitch]:list_projects con filter: "view=owned"
   • Identifica el proyecto objetivo por título (ej., "Calculator App")
   • Extrae el ID del proyecto del campo name (ej., projects/13534454087919359824)

2. Recuperación de pantallas:

   • Llama a [prefijo_stitch]:list_screens con el ID del proyecto (solo numérico)
   • Revisa los títulos de las pantallas para identificar todas las pantallas del guía
   • Extrae los IDs de pantalla del campo name de cada pantalla

3. Obtención de metadatos de la pantalla: Para cada pantalla:

   • Llama a [prefijo_stitch]:get_screen con projectId y screenId
   • Recupera:
     • screenshot.downloadUrl — Activo visual para el video
     • htmlCode.downloadUrl — Opcional: para extraer texto/contenido
     • width, height — Dimensiones de la pantalla para escalado adecuado
     • Título y descripción de la pantalla para las superposiciones de texto

4. Descarga de activos:

   • Usa web_fetch o Bash con curl para descargar las capturas de pantalla
   • Guarda en un directorio de preparación: assets/screens/{nombre-pantalla}.png
   • Organiza los activos en el orden del flujo del guía previsto

Paso 3: Configurar el Proyecto Remotion

1. Verificar si existe un proyecto Remotion:

   • Busca remotion.config.ts o package.json con dependencias de Remotion
   • Si existe, usa la estructura del proyecto existente

2. Crear un nuevo proyecto Remotion (si es necesario):

   npm create video@latest -- --blank
   

   • Elige la plantilla TypeScript
   • Configura en un directorio video/ dedicado

3. Instalar dependencias:

   cd video
   npm install @remotion/transitions @remotion/animated-emoji
   

Estrategia de Composición de Video

Arquitectura

Crea una composición modular de Remotion con estos componentes:

1. ScreenSlide.tsx — Componente de visualización de pantalla individual

   • Props: imageSrc, title, description, width, height
   • Características: Animación de zoom, transiciones de fundido
   • Duración: Configurable (por defecto 3-5 segundos por pantalla)

2. WalkthroughComposition.tsx — Composición de video principal

   • Secuencia múltiples componentes ScreenSlide
   • Maneja transiciones entre pantallas
   • Añade superposiciones de texto y anotaciones

3. config.ts — Configuración del video

   • Fotogramas por segundo (por defecto: 30 fps)
   • Dimensiones del video (coincidir con las dimensiones de la pantalla de Stitch o escalar adecuadamente)
   • Cálculo de duración total

Efectos de Transición

Usa @remotion/transitions de Remotion para efectos profesionales:

• Fundido: Transición suave de fundido cruzado entre pantallas

  import {fade} from '@remotion/transitions/fade';
  

• Deslizamiento: Transiciones de deslizamiento direccional

  import {slide} from '@remotion/transitions/slide';
  

• Zoom: Efectos de acercamiento/alejamiento para énfasis

  • Usa la animación spring() para un zoom suave
  • Aplica a elementos importantes de la interfaz

Superposiciones de Texto

Añade información contextual usando el renderizado de texto de Remotion:

1. Títulos de pantalla: Muestra en la parte superior o inferior de cada fotograma
2. Señalizaciones de características: Resalta elementos específicos de la interfaz con punteros animados
3. Descripciones: Texto descriptivo que aparece gradualmente para cada pantalla
4. Indicador de progreso: Muestra la posición actual de la pantalla en el guía

Pasos de Ejecución

Paso 1: Recopilar Activos de Pantalla

1. Identifica el proyecto de Stitch objetivo
2. Lista todas las pantallas del proyecto
3. Descarga las capturas de pantalla de cada pantalla
4. Organiza en el orden del flujo del guía
5. Crea un archivo de manifiesto (screens.json):

{
  "projectName": "Calculator App",
  "screens": [
    {
      "id": "1",
      "title": "Pantalla de Inicio",
      "description": "Interfaz principal de la calculadora con teclado numérico",
      "imagePath": "assets/screens/home.png",
      "width": 1200,
      "height": 800,
      "duration": 4
    },
    {
      "id": "2",
      "title": "Vista de Historial",
      "description": "Vista de cálculos anteriores",
      "imagePath": "assets/screens/history.png",
      "width": 1200,
      "height": 800,
      "duration": 3
    }
  ]
}

Paso 2: Generar Componentes Remotion

Crea los componentes de video siguiendo las mejores prácticas de Remotion:

1. Crear ScreenSlide.tsx:

   • Usa useCurrentFrame() y spring() para animaciones
   • Implementa efectos de zoom y fundido
   • Añade superposiciones de texto con temporización adecuada

2. Crear WalkthroughComposition.tsx:

   • Importa el manifiesto de pantallas
   • Secuencia las pantallas con componentes <Sequence>
   • Aplica transiciones entre pantallas
   • Calcula la temporización y los desplazamientos adecuados

3. Actualizar remotion.config.ts:

   • Establece el ID de composición
   • Configura las dimensiones del video
   • Establece la tasa de fotogramas y la duración

Recursos de Referencia:

• Usa resources/screen-slide-template.tsx como punto de partida
• Sigue resources/composition-checklist.md para completitud
• Revisa ejemplos en examples/walkthrough/

Paso 3: Previsualizar y Refinar

1. Iniciar Remotion Studio:

   npm run dev
   

   • Abre una vista previa en el navegador
   • Permite edición y refinamiento en tiempo real

2. Ajustar la temporización:

   • Asegura que cada pantalla tenga una duración de visualización adecuada
   • Verifica que las transiciones sean suaves
   • Comprueba la temporización de las superposiciones de texto

3. Perfeccionar animaciones:

   • Ajusta las configuraciones de spring para los efectos de zoom
   • Modifica las funciones de easing para las transiciones
   • Asegura que el texto sea legible en todo momento

Paso 4: Renderizar el Video

1. Renderizar usando la CLI de Remotion:

   npx remotion render WalkthroughComposition output.mp4
   

2. Alternativa: Usar el MCP de Remotion (si está disponible):

   • Llama a [prefijo_remotion]:render con los detalles de la composición
   • Especifica el formato de salida (MP4, WebM, etc.)

3. Opciones de optimización:

   • Establece el nivel de calidad (--quality)
   • Configura el códec (--codec h264 o h265)
   • Habilita el renderizado en paralelo (--concurrency)

Características Avanzadas

Zonas Interactivas (Hotspots)

Resalta elementos en los que se puede hacer clic o características importantes:

import {interpolate, useCurrentFrame} from 'remotion';

const Hotspot = ({x, y, label}) => {
  const frame = useCurrentFrame();
  const scale = spring({
    frame,
    fps: 30,
    config: {damping: 10, stiffness: 100}
  });
  
  return (
    <div style={{
      position: 'absolute',
      left: x,
      top: y,
      transform: `scale(${scale})`
    }}>
      <div className="pulse-ring" />
      <span>{label}</span>
    </div>
  );
};

Integración de Voz en Off

Añade narración al video guía:

1. Genera un guión de voz a partir de las descripciones de las pantallas
2. Usa texto a voz o graba audio
3. Importa el audio en Remotion con el componente <Audio>
4. Sincroniza la temporización de las pantallas con el ritmo de la narración

Extracción Dinámica de Texto

Extrae texto del código HTML de Stitch para anotaciones automáticas:

1. Descarga htmlCode.downloadUrl para cada pantalla
2. Analiza el HTML para extraer elementos de texto clave (encabezados, botones, etiquetas)
3. Genera señalizaciones automáticas para elementos importantes de la interfaz
4. Añade a la composición como superposiciones de texto temporizadas

Estructura de Archivos

project/
├── video/                      # Directorio del proyecto Remotion
│   ├── src/
│   │   ├── WalkthroughComposition.tsx
│   │   ├── ScreenSlide.tsx
│   │   ├── components/
│   │   │   ├── Hotspot.tsx
│   │   │   └── TextOverlay.tsx
│   │   └── Root.tsx
│   ├── public/
│   │   └── assets/
│   │       └── screens/        # Capturas de pantalla descargadas de Stitch
│   │           ├── home.png
│   │           └── history.png
│   ├── remotion.config.ts
│   └── package.json
├── screens.json                # Manifiesto de pantallas
└── output.mp4                  # Video renderizado

Integración con Habilidades de Remotion

Remotion mantiene sus propias habilidades de agente que definen las mejores prácticas. Revísalas para técnicas avanzadas:

• Repositorio: https://github.com/remotion-dev/remotion/tree/main/packages/skills
• Instalación: npx skills add remotion-dev/skills

Habilidades clave de Remotion a aprovechar:

• Temporización de animaciones y easing
• Patrones de arquitectura de composición
• Optimización del rendimiento
• Sincronización de audio

Patrones Comunes

Patrón 1: Presentación de Diapositivas Simple

Video guía básico con transiciones de fundido:

• 3-5 segundos por pantalla
• Transiciones de fundido cruzado
• Superposición de texto inferior con el título de la pantalla
• Barra de progreso en la parte superior

Patrón 2: Destacar Características

Enfócate en elementos específicos de la interfaz:

• Acercamiento a regiones específicas
• Círculos/flechas animadas que apuntan a las características
• Énfasis en cámara lenta en interacciones clave
• Comparaciones lado a lado de antes/después

Patrón 3: Flujo de Usuario

Muestra el recorrido paso a paso del usuario:

• Flujo de pantallas secuencial con deslizamientos direccionales
• Superposición de pasos numerados
• Resalta acciones del usuario (clics, toques)
• Conecta pantallas con rutas animadas

Solución de Problemas

Problema	Solución
Capturas borrosas	Asegúrate de que las imágenes descargadas estén a resolución completa; verifica la configuración de calidad de screenshot.downloadUrl
Texto desalineado	Verifica que las dimensiones de la pantalla coincidan con el tamaño de la composición; ajusta la posición del texto según el tamaño real de la pantalla
Animaciones entrecortadas	Aumenta la tasa de fotogramas a 60fps; usa configuraciones de spring adecuadas con el amortiguamiento apropiado
Error de compilación en Remotion	Verifica la compatibilidad de la versión de Node; asegúrate de que todas las dependencias estén instaladas; revisa la documentación de Remotion
La temporización se siente incorrecta	Ajusta la duración por pantalla en el manifiesto; previsualiza en Remotion Studio; prueba con usuarios reales

Mejores Prácticas

1. Mantén la relación de aspecto: Usa las dimensiones reales de las pantallas de Stitch o escala proporcionalmente
2. Temporización consistente: Mantén consistente la duración de visualización de las pantallas a menos que se enfaticen pantallas específicas
3. Texto legible: Asegura suficiente contraste; usa tamaños de fuente adecuados; evita superposiciones abarrotadas
4. Transiciones suaves: Usa animaciones spring para un movimiento natural; evita cortes bruscos
5. Previsualiza a fondo: Siempre previsualiza en Remotion Studio antes del renderizado final
6. Optimiza los activos: Comprime las imágenes adecuadamente; usa formatos eficientes (PNG para interfaces, JPG para fotos)

Ejemplo de Uso

Solicitud del usuario:

Busca las pantallas en mi proyecto de Stitch "Calculator App" y crea un video de Remotion
que muestre un recorrido por las pantallas.

Flujo de trabajo del agente:

1. Lista los proyectos de Stitch → Encuentra "Calculator App" → Extrae el ID del proyecto
2. Lista las pantallas del proyecto → Identifica todas las pantallas (Inicio, Historial, Configuración)
3. Descarga las capturas de pantalla de cada pantalla → Guarda en assets/screens/
4. Crea el manifiesto screens.json con los metadatos de las pantallas
5. Genera los componentes Remotion (ScreenSlide.tsx, WalkthroughComposition.tsx)
6. Previsualiza en Remotion Studio → Refina la temporización y las transiciones
7. Renderiza el video final → calculator-walkthrough.mp4
8. Informa de la finalización con un enlace de vista previa del video

Consejos para el Éxito

• Empieza simple: Comienza con transiciones de fundido básicas antes de añadir animaciones complejas
• Sigue los patrones de Remotion: Aprovecha las habilidades y la documentación oficial de Remotion
• Usa archivos de manifiesto: Mantén los datos de las pantallas organizados en JSON para facilitar las actualizaciones
• Previsualiza con frecuencia: Usa Remotion Studio para detectar problemas temprano
• Considera la accesibilidad: Añade subtítulos; asegura que el texto sea legible; usa imágenes claras
• Optimiza para la plataforma: Ajusta las dimensiones del video a la plataforma objetivo (YouTube, redes sociales, etc.)

Referencias

• Documentación de Stitch: https://stitch.withgoogle.com/docs/
• Documentación de Remotion: https://www.remotion.dev/docs/
• Habilidades de Remotion: https://www.remotion.dev/docs/ai/skills
• MCP de Remotion: https://www.remotion.dev/docs/ai/mcp
• Transiciones de Remotion: https://www.remotion.dev/docs/transitions

Cuándo Usar

Usa esta habilidad cuando abordes tareas relacionadas con su dominio o funcionalidad principal descrita anteriormente.

Limitaciones

• Usa esta habilidad solo cuando la tarea coincida claramente con el alcance descrito anteriormente.
• No trates el resultado como un sustituto de la validación específica del entorno, las pruebas o la revisión por expertos.
• Detente y pide aclaraciones si faltan entradas requeridas, permisos, límites de seguridad o criterios de éxito.