Communitygithub.com

Vista Previa de Video de App

Convierte grabaciones de aplicaciones móviles en videos de lanzamiento Remotion editables o borradores de vista previa de App Store con verificación técnica. Útil para inspección de material, storyboarding, ediciones con subtítulos, renderizado local y comprobaciones de exportación; no para inventar pantallas de aplicaciones ni enviar activos a la tienda.

¿Qué es Vista Previa de Video de App?

Esta habilidad transforma grabaciones de pantalla de aplicaciones móviles en videos de lanzamiento profesionales o borradores de vista previa para App Store, utilizando Remotion como motor de renderizado. Está diseñada para desarrolladores y creadores de contenido que necesitan inspeccionar material grabado, crear storyboards, añadir subtítulos y realizar verificaciones técnicas antes de la entrega final. La habilidad admite los modos `launch` (lanzamiento) y `app-store` (App Store), cada uno con configuraciones predeterminadas específicas (30 segundos para lanzamiento, 25 para App Store). El flujo de trabajo incluye pasos cruciales como la inspección del material (`npm run inspect`), la detección de marca (colores, tipografía, logotipo), la creación de un plan de escenas con puntos de edición precisos, y el renderizado final (`npm run render`). Destaca por su rigor en la verificación: exige reproducir clips completos para validar acciones, datos sensibles y secuencias reales, prohibiendo explícitamente inventar funcionalidades de la app o sustituir metraje real con UI generada. Además, preserva la proveniencia de las capturas y genera informes separados para validación técnica, revisión manual y conformidad con los requisitos de Apple.

Compatible con~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/idilsaglam/app-preview-video/tree/HEAD

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación

Video de Vista Previa de App

Esta carpeta es tanto una habilidad instalable como la plantilla Remotion ejecutable. Lee README.md para la configuración y comandos probados. Lee la interfaz de plan de escenas al crear un plan y los requisitos de Apple para el modo App Store. Para capturas nuevas, usa la guía de captura.

Recepción y evidencia

Acepta carpeta de grabaciones, modo (launch o app-store), nombre de la app, activos de marca, idioma y brief creativo. Por defecto: inglés, vertical, 30 segundos para lanzamiento o 25 para App Store. Sigue el diseño propio de la app por defecto; no apliques silenciosamente los colores, fuente o estilo visual del ejemplo ficticio. Nunca inventes capacidades actuales de la app.

Ejecuta npm run doctor, luego inspecciona el material con npm run inspect -- --recordings DIR --out NEW_DIR. Lee el JSON de inspección y los fotogramas de referencia, y revisa los clips completos en busca de acciones, datos sensibles, UI de prueba, carga y secuencia veraz. Las imágenes fijas por sí solas no constituyen verificación de contenido. Si la reproducción completa no está disponible, registra esa limitación y mantén pendiente la revisión manual.

Recopila la versión de captura, dispositivo, fecha y condiciones simuladas. Mantén los activos reales de la app fuera del paquete público. Solicita el material faltante cuando un momento solicitado esté ausente. No lo reemplaces con UI generada, inviertas el tiempo para implicar un resultado diferente, ni etiquetes material de simulador como captura de dispositivo físico.

Descubrimiento de marca antes del renderizado

Primero inspecciona los activos suministrados y el proyecto de la app relevante, capturas de pantalla o grabaciones para el logotipo/icono real de la app, colores, tipografía, superficies, formas de esquinas y estilo de movimiento. Usa activos ya suministrados o verificablemente presentes; no pidas al usuario que los suba de nuevo. Si varias versiones del logotipo son plausibles, pregunta cuál es la actual. Si no hay logotipo disponible, solicita su archivo/ruta y espera antes de renderizar; continúa la inspección del material mientras esperas. Un usuario puede elegir explícitamente un tratamiento solo texto/sin logotipo. Nunca inventes ni omitas silenciosamente un logotipo.

Usa los tokens de diseño de la app cuando estén disponibles y compáralos visualmente con el material actual. Si la tipografía no está disponible localmente, explica la alternativa en lugar de afirmar una coincidencia exacta. Registra las fuentes de diseño y las decisiones en el plan de escenas privado o informe adjunto. Coloca el logotipo real en el campo logo del plan; establece colores y tokens design opcionales usando la referencia del plan de escenas. Mantén los activos de marca reales fuera de este repositorio distribuible.

Muestra una vista previa representativa del fotograma de apertura y el estilo de subtítulos antes de un renderizado completo. Invita a correcciones; no introduzcas una puerta de aprobación adicional si el usuario ya ha especificado el diseño y te ha pedido que renderices. Usa el tratamiento de lanzamiento design.layout: "app" contenido cuando se ajuste a la app, o adapta la composición al diseño suministrado. No sustituyas un marco oscuro genérico, una marca denominativa en mayúsculas o formas decorativas por la identidad de la app.

La proveniencia de la captura pertenece a provenance y capture y siempre se conserva en el informe. Para videos de lanzamiento, deja disclosure vacío por defecto a menos que se solicite una divulgación en pantalla o sea necesaria para evitar una afirmación engañosa. No quemes automáticamente metadatos de simulador/dispositivo/ubicación en el video de marketing. Esto no elimina divulgaciones significativas de inicio de sesión/pago, la etiqueta de demostración ficticia ni los requisitos de captura de App Store. Nunca presentes una ubicación simulada como un recorrido real completado ni etiquetes material de simulador como material de dispositivo.

Edición y renderizado

Crea un plan de escenas con puntos de edición reales del material, subtítulos breves legibles y una descripción de evidencia por escena. Usa un recorrido coherente con una acción útil en los primeros segundos. Preserva la legibilidad y las proporciones de entrada. Usa examples/launch.json o examples/app-store.json como punto de partida estructural, reemplazando cada afirmación ficticia y referencia de fuente.

El modo de lanzamiento permite un fotograma, titular, CTA y fondo con marca. El modo App Store muestra la app con subtítulos discretos y divulgaciones de acceso; sin interacción de dispositivo falsa ni UI fabricada. La demostración incluida es explícitamente ficticia, nunca un activo de envío a Apple. Esta v1 requiere proveniencia del dispositivo antes de llamar a una edición de app real orientada a envío; las comprobaciones técnicas por sí solas nunca establecen conformidad de contenido o aceptación.

Ejecuta npm run render -- --recordings DIR --plan PLAN.json --out NEW_DIR. Las carpetas de salida deben ser nuevas para preservar la evidencia. La herramienta normaliza el material recortado, renderiza a través de Remotion, codifica MP4, crea un póster y escribe proveniencia, hashes, temporización y comprobaciones técnicas. Las fuentes permanecen sin cambios. La música es opcional, proporcionada por el usuario, con licencia y al menos tan larga como la edición. El audio de origen por defecto está silenciado.

Revisión y entrega

Revisa el MP4 completo terminado con audio y silenciado al tamaño de un teléfono. Comprueba todos los cortes, divulgaciones, subtítulos, acciones reclamadas y audio. Si se encuentran problemas, revisa el plan de escenas y renderiza en otra carpeta; conserva el primer renderizado y describe la corrección real.

Informa por separado: validación técnica, revisión manual de reproducción/contenido, proveniencia de la fuente y aceptación de Apple. Nunca conviertas pending en passed basándote en unas pocas capturas de pantalla. Proporciona el MP4, póster, proyecto/plan de escenas editable, informe y limitaciones restantes. No se implica carga, envío, renderizado en la nube, activos de pago ni publicación.

Skills relacionados