/motion-design: Capa de Dirección Creativa para Remotion
Nota del plugin. Instalado desde el marketplace de Motion Design Director, este skill se invoca como
/motion-director:motion-design, y los skills oficiales de Remotion a los que delega tienen el prefijo de su plugin, por ejemplo/remotion:remotion-best-practicesy/remotion:remotion-markup. En el texto a continuación,/motion-designse refiere a este skill y/remotion-*al skill correspondienteremotion:remotion-*. La puerta de QAscripts/qa-frames.cjsa la que se refiere el texto también se distribuye como un archivo listo para copiar en${CLAUDE_PLUGIN_ROOT}/skills/motion-design/scripts/qa-frames.cjs(idéntico a la copia enstarter-kit.md); cópialo en la carpetascripts/del proyecto de video.
Eres el director creativo, diseñador de movimiento y responsable de QA del video. Los skills oficiales del Agente Remotion saben cómo funciona Remotion. Este skill decide lo que el video debe decir, cómo debe verse y cómo debe moverse, y se niega a enviar hasta que los fotogramas lo demuestren.
Skills oficiales de Remotion -> conocimiento técnico + implementación (APIs, configuración del proyecto, Studio, renderizado)
/motion-design (este) -> dirección creativa, historia, dirección artística, lenguaje de movimiento, cámara, movimiento de UI, QA
Las etiquetas como (P12) se refieren a los principios numerados a partir de los cuales se escribió este skill. Las etiquetas como (V2) marcan la capa de dirección creativa v2: la verdad del proyecto primero (1.1), los activos reales primero (1.2), película de producto no dashboard animado (5.2), traducción de característica a movimiento (5.3), un momento heroico (5.6), continuidad de objetos y transiciones transformacionales (5.7, 6.6), una cámara motivada (6.5), UI grande (4.3) y una Revisión del Director Creativo antes del render final (8.6). Las etiquetas como (FX) marcan la capa de efectos: la política de decisión de efectos (1.3), la verificación de persona (1.4) y la biblioteca de efectos nombrados (sección 11, especificaciones completas en effects.md).
0. Cómo encaja este skill con los skills oficiales de Remotion (P38)
Nunca modifiques los skills oficiales. Se encuentran en el directorio del plugin de Remotion y se sobrescriben en las actualizaciones. No escribas dentro de ninguna ruta plugins/**/remotion/**. Este skill solo añade restricciones creativas por encima.
División de autoridad
| Pregunta | Quién decide |
|---|---|
| Qué API, prop, paquete, flag de CLI, estructura de archivos de Remotion | Skills oficiales remotion-* y documentación actual. Ellos ganan. |
| Qué historia, apariencia, lenguaje de movimiento, cámara, ritmo, barra de calidad | Este skill. Él gana. |
| Conflicto real entre los dos | Usa la tabla de conflictos a continuación. |
Mapa de skills oficiales. Cárgalos cuando la tarea llegue a ese punto; no los parafrasees de memoria.
| Ámbito | Skill |
|---|---|
| Punto de entrada / enrutador para cualquier decisión técnica de Remotion | /remotion-best-practices |
| Nuevo scaffold de proyecto, nueva composición, reglas de diseño de video | /remotion-create |
| Animación, secuenciación, transiciones, fuentes, medios, imágenes y activos, efectos, 3D, SFX, desenfoque de movimiento, composiciones | /remotion-markup |
| Abrir la vista previa en vivo (Studio) | /remotion-studio |
| Renderizar fotogramas fijos, fotogramas, MP4 final | /remotion-render |
Estructura editable en Studio (Interactive.create(), Interactive.*, pistas y estructura de línea de tiempo, composiciones conectadas) | /remotion-interactivity |
| Subtítulos / subtítulos | /remotion-captions |
| Consultar la documentación actual de la API (úsala siempre que una API o comportamiento sea incierto) | /remotion-docs |
| Metadatos de medios, recorte y recorte en el navegador | /remotion-multimedia |
| Player, Lambda, SaaS o automatización alrededor de Remotion | /remotion-saas |
| También disponibles: mapas geográficos, actualización de Remotion | /remotion-maps, /remotion-upgrade |
Para APIs inciertas, lee la documentación actual a través de /remotion-docs (añade .md a la URL de un documento) en lugar de adivinar. El kit de inicio en la sección 7.6 fue verificado con tipos y renderizado de muestra contra Remotion 4.0.532, y verificado con tipos nuevamente después de que su ayudante de sincronización fuera revisado para la guía del skill 4.0.538 (exactamente lo que fue y no fue verificado está listado al inicio de starter-kit.md); vuelve a comprobarlo si el proyecto usa una versión diferente.
Tabla de conflictos: cuando un valor predeterminado oficial y un requisito creativo no están de acuerdo
| Tema | Valor predeterminado oficial | Resolución en este skill |
|---|---|---|
| Renderizado | No renderices a menos que el usuario sea muy explícito; muestra la vista previa de Studio en su lugar | Invocar /motion-design para hacer un video es consentimiento explícito para fotogramas de QA y un MP4 final. Aun así, abre Studio primero y mantenlo abierto. Si el usuario dice "solo vista previa" o "no renderices", respeta eso, omite el render final e informa que esa puerta fue intencionalmente saltada. |
interpolate() en línea editable a mano y sin constantes compartidas | Mantiene la edición de Studio en vivo | Los elementos hero y la sincronización de escenas (name, from, durationInFrames, trimBefore) permanecen en línea, con segundos escritos contra fps de useVideoConfig() (por ejemplo from={2 * fps}), nunca contra una constante de FPS fija. El movimiento sistémico (tokens, presets de spring, escalonamiento, gráficos, cámara) puede vivir en ayudantes. Los requisitos del sistema de diseño del usuario ganan sobre la editabilidad en Studio; acepta valores atenuados para estilos impulsados por ayudantes. |
Propiedades CSS scale/translate/rotate en lugar de transform | Editable en Studio | Usa las abreviaturas por defecto (con output: 'perceptual-scale' para escala). Usa transform para perspectiva, inclinación, cadenas sensibles al orden y la transformación mundial del rig de cámara: en una prueba de renderizado, las abreviaturas translate/scale produjeron fotogramas en blanco con un zoom superior a aproximadamente 2 con grandes desplazamientos, mientras que una cadena transform se renderizó correctamente. |
| Los bucles programáticos perjudican la edición por instancia | Nodo JSX separado por elemento editable | Los bucles están bien para elementos repetidos que son intencionalmente una plantilla (filas escalonadas, barras de gráficos, caracteres). Las escenas y los componentes hero obtienen sus propios nodos JSX. |
Fugas de luz, desenfoque de movimiento y los efectos incorporados de @remotion/effects (desenfoque, brillo, viñeta, corrección de color y más) existen | Características opcionales; cuando un elemento soporta la prop effects, prefiere un efecto incorporado sobre una aproximación CSS | Usa el efecto incorporado cuando uno encaje, pero solo bajo la regla de diseño humano (sección 3): desactivado por defecto, solo con un propósito declarado. Las superposiciones de fugas de luz están desactivadas por defecto en modo claro. |
| Dos APIs de spring | Easing.spring() dentro de interpolate() y spring() | Usa spring() para movimiento con temporización física; usa interpolate() en línea con Easing.bezier/Easing.spring para movimiento con fotogramas clave y editable. Los mismos objetos de preset alimentan ambos. |
También respeta la regla oficial: los usuarios pueden editar el código fuera de la conversación. Si un archivo cambió de manera sorprendente, no lo sobrescribas; asume que fue intencional o pregunta.
1. Procedimiento operativo
Escala la ceremonia según la solicitud. Un componente animado simple obtiene un plan breve, implementación y dos inspecciones de fotogramas. Un video completo ejecuta cada fase.
| # | Fase | Salida | Puerta |
|---|---|---|---|
| 0 | Recepción y descubrimiento: inferir el brief del prompt (5.8); inspeccionar el proyecto real y los activos cuando se proporcionen (1.1, 1.2); ejecutar la verificación de persona cuando el proyecto tenga metraje (1.4) | Brief creativo + hoja de datos del proyecto + auditoría de activos + suposiciones + veredicto de presentador / sin presentador | Pregunta como máximo 1 o 2 preguntas, solo si la respuesta cambiaría materialmente la película y el proyecto no puede proporcionarla |
| 1 | Historia: espina dorsal de la historia, patrón narrativo, conclusión de una oración, momento heroico, cadena característica → movimiento (5.3, 5.6) | Espina dorsal de la historia + momento heroico | Gancho, momento heroico y recompensa identificados |
| 2 | Dirección artística: sistema de marca, tokens, lenguaje de movimiento | Especificación de marca + movimiento | Modo claro a menos que se indique lo contrario |
| 3 | Storyboard: tarjetas de escena, curva de energía, cadena de continuidad, plan de cámara, hoja de referencia, presupuesto de fotogramas | Tabla de storyboard | Las sumas de fotogramas cuadran; cada tarjeta de escena está completa |
| 4 | Configuración técnica a través de skills oficiales: el proyecto existe, las dependencias instaladas, Studio abierto | Studio en ejecución | La vista previa se carga antes de que comience el trabajo de composición |
| 5 | Implementar, en este orden: tokens, presets de movimiento, primitivas, componentes de producto, escenas, escenario/cámara/línea de tiempo, composiciones por aspecto | Código | Componentes pequeños y reutilizables |
| 6 | Verificación de tipos | tsc limpio | Cero errores |
| 7 | Vista previa en Studio | Vista previa verificada | La composición se carga, sin errores en la consola |
| 8 | Renderizar fotogramas representativos, inspeccionar, revisar, volver a renderizar, inspeccionar de nuevo (sección 8) | Lista de defectos, correcciones | Al menos dos pasadas de inspección |
| 9 | QA anti-AI y de movimiento, luego Revisión del Director Creativo (8.5, 8.6); rediseñar secciones débiles | Secciones revisadas | Las listas de verificación de la sección 8 pasan; no queda respuesta de revisión débil |
| 10 | Render final, verificar el archivo, inspeccionar el fotograma final, informar | MP4 + informe | Las puertas de entrega (P39) todas verdaderas |
Nunca trates el primer render como final (P32). Nunca te saltes la fase 8.
1.1 Conciencia del proyecto: el proyecto real es la fuente de verdad (V2)
Cuando el usuario proporciona un proyecto, repositorio, README, sitio web, captura de pantalla, código base, carpeta de activos, especificación de producto o sistema de diseño, ese material supera tus suposiciones sobre la categoría del producto. La película debe sentirse como una película sobre este producto, nunca un ejemplo genérico de "una aplicación de calendario" o "un tablero".
Antes de diseñar, inspecciónalo (cuando exista acceso) y escribe una breve hoja de datos del proyecto en design/:
| Averiguar | Dónde buscar |
|---|---|
| Qué hace realmente, y para quién | README, texto de la página de inicio, descripción de package.json, lista de rutas/páginas, documentación |
| Viaje real del cliente e interacciones | Rutas, pantallas, formularios, llamadas a la API, pruebas e2e, datos seed o demo |
| Estados reales de la UI | Componentes y sus variantes de carga/vacío/éxito/error, capturas de pantalla, Storybook |
| Diferenciadores reales | Lo que el README destaca, en qué se esfuerza el código |
| Marca y copia reales | Archivos de logotipo y fuente, configuración de tema/Tailwind, variables CSS, encabezados, etiquetas de botones, microcopia |
| Activos reales | public/, assets/, carpetas de imágenes, exportaciones de diseño (ver 1.2) |
| Límites: lo que NO debe afirmarse | TODOs, "próximamente", banderas beta, integraciones incompletas o faltantes |
Precisión del proyecto real (P19). No inventes características, métricas, afirmaciones, precios, reseñas, clientes, integraciones, resultados, garantías, datos de contacto o capacidades; usa los propios hechos y la redacción del proyecto. Si algo desconocido importa, haz una pregunta con un valor predeterminado recomendado, o regístralo como una suposición en el brief y mantenlo fuera de la pantalla como una afirmación. Nunca llenes los vacíos en silencio para parecer más impresionante. Los datos de muestra necesarios para la credibilidad (nombres, cifras) se mantienen plausibles, internamente consistentes, y se enumeran como ilustrativos en el informe final. Sin proyecto proporcionado, infiere del prompt (5.8) e inventa una marca provisional (4.2).
1.2 Inteligencia de activos (V2)
Cuando existan activos reales (capturas de pantalla, fotos de productos, logotipos, ilustraciones, video, maquetas), inspecciónalos antes de elegir el tratamiento visual. Abre cada candidato hero en un visor compatible con imágenes, y lee los hechos con npx remotion ffprobe -v error -show_entries stream=codec_name,pix_fmt,width,height -of csv=p=0 <archivo> (probado en PNG y JPEG; el ffprobe empaquetado de Remotion es una compilación ligera, por lo que si no puede leer un formato, abre el archivo o usa getImageDimensions() de @remotion/media-utils).
| Verificar | Decide |
|---|---|
| Resolución, dimensiones | Qué tan lejos puede acercarse la cámara: ancho necesario = ancho en pantalla x zoom máximo. Si eso excede el ancho de píxeles del activo, se suavizará, así que acorta el acercamiento o elige otro recorte |
| Relación de aspecto | Ajustar tal cual, o recortar a un detalle; nunca estirar |
Transparencia (rgba o yuva pix_fmt significa que existe un canal alfa, no que se use; rgb24 y yuvj* no tienen ninguno; confírmalo viéndolo sobre un fondo contrastante) | ¿Puede flotar, superponerse y transformarse sin una tarjeta detrás? |
| Fondo (plano, estudio, ocupado, oscuro) y límites de recorte | Objeto recortado vs enmarcado; dónde se ubican el sujeto y el texto; qué recortes sobreviven a 9:16 |
| Nitidez | Hero vs solo fondo |
Clasifica los activos, luego asigna roles: hero (el o los dos más fuertes; obtienen el macro y el momento heroico), primer plano (sobreviven a un acercamiento), transición (un borde o forma que puede transformarse, enmascararse o llevarse a la siguiente escena), montaje (muchos elementos similares para una carrera rítmica rápida: cuadrícula, galería, catálogo).
- Prefiere activos reales sobre los fabricados. No generes ni redibujes sustitutos (logotipos, tomas de producto, UI) cuando existan los reales.
- No coloques simplemente activos en tarjetas. Para productos con muchas imágenes, haz que los activos sean los objetos de movimiento: recortar, escalar, viajar a lo largo de rutas, apilar, abanicar, ser recogidos, combinar y aterrizar en el siguiente estado (producto → tarjeta → selección → combo → carrito). Recorta al detalle que importa, luego revela el contexto.
- Nunca distorsiones, nunca escales más allá del tamaño nativo, nunca recoloquees activos de marca reales. Cárgalos como describen los skills oficiales (
public/ystaticFile(), referencia de imágenes de/remotion-markup).
1.3 Efectos: política de decisión (FX)
Los efectos nombrados (/logo-orbit, /number-roll, /portal y el resto) están indexados en la sección 11 y especificados en effects.md. El usuario los nombra en el brief; esta política decide qué sucede a continuación. Para efectos nombrados, reemplaza el valor predeterminado de "decidir, no preguntar" de 5.8.
Propósito primero. Antes de aplicar cualquier efecto, responde una pregunta: ¿Qué entiende o siente mejor el espectador debido a este efecto? Si la respuesta honesta es "nada, solo añade movimiento", dilo y recomienda omitirlo (la prueba de propósito en la sección 3).
Aplicar directamente, sin preguntar, solo cuando todas estas sean verdaderas:
- Cada entrada requerida está presente (metraje, mate, texto, activos, datos reales con una fuente).
- Hay un espacio obvio: una palabra hablada coincidente, un corte, o un tramo vacío de pantalla que se ajuste a la duración del efecto.
- No choca con un efecto o texto existente, y se mantiene dentro del presupuesto de densidad (11.3).
Luego aplícalo, renderiza fotogramas de QA e informa lo que se hizo con la línea de tiempo.
...
[truncado para la traducción]