amir-motion

¿Qué hace amir-motion?

Reglas de Amir para vídeos de producto. El vídeo explica un producto a un tomador de decisiones no técnico en 30 a 60 segundos: una frase por paso, el producto hablando, sonido sincronizado con la imagen, un corte limpio en cada formato e idioma, y nada que no sea nuestro.

<skill-dir> a continuación es la carpeta de este archivo: ~/.claude/skills/amir-motion para Claude Code, ~/.agents/skills/amir-motion para Pi y otros agentes.

"Invocar un skill" a continuación significa: la herramienta Skill en Claude Code, /skill:<name> en Pi, o bien leer <skills folder>/<name>/SKILL.md y seguirlo.

Tres skills, una película. amir-motion posee las reglas, la plantilla, el sonido y la puerta de auditoría. Llama a dos skills en pasos fijos:

Skill	Posee	Se llama en
stageshow	cómo se ve la UI del producto: moderación, encuadre, recorte, objeto focal, historia del cursor, fotograma de póster	pasos 1, 4
remotion-best-practices	cómo se usa Remotion: proyecto, marcado, Estudio, render, subtítulos, actualización (enruta a remotion-*)	pasos 2, 5, 8

Cuando uno de ellos contradice una regla a continuación, la regla prevalece (por ejemplo, la API Act basada en tiempo de stageshow nunca entra en una película: regla 6).

Las 10 reglas (vinculantes)

#	Regla	Límite estricto
1	Menos hablar	Una frase por paso, máximo 10 palabras, palabras sencillas para un tomador de decisiones. Una cosa se mueve a la vez. Total 30-60 s.
2	Tiempo para leer	Cada frase permanece en pantalla ≥ 1.5 s + 0.3 s por palabra, ≤ 17 caracteres por segundo, en segundos reales después del ritmo. El texto nunca se mueve mientras se lee.
3	Mostrar, no escribir	El producto explica; el título solo nombra el paso. Reconstruir la UI del producto en React (nunca una captura de pantalla). Integraciones = logotipos. Números = contadores o gráficos, solo reales.
4	Tipografía acorde al tema	Máximo 3 familias (serifa display, sans UI, mono). 3 tamaños de texto (display, título, etiqueta) desde theme.ts. Título ≥ 48 px, cualquier palabra de UI a la que apunte la historia ≥ 30 px o acercada por la cámara.
5	Sin rojo, un acento	Rojo solo para error o acción destructiva, a menos que esté en la paleta de la marca. Un color de acento, y significa algo (el resultado, el cambio). Los colores viven solo en theme.ts.
6	Un reloj	Cada beat es un número en el reloj de su propia escena. Imagen, títulos y sonido leen los mismos números. Todo deriva del fotograma: sin animación CSS, temporizador, Math.random, Date, ni tiempo de ejecución de stageshow Act.
7	Viajar, no disolver	Las escenas se mueven como una cámara (elevar, hundir, empujar hacia adentro, retroceder), nunca un fundido encadenado gris. Inicios y paradas suaves (solo tokens), salidas ≈ mitad de una entrada, un momento heroico por película.
8	El sonido es la mitad de la película	Partitura sintetizada original en una tonalidad, construida en la línea de tiempo; una señal para cada llegada, clic y recompensa, ninguna para movimiento ocioso. Master a -14 LUFS integrado, pico ≤ -1 dBFS.
9	Cada formato es otro corte	Máster 16:9 más un 9:16 recomponido (no un recorte), FR y EN desde un archivo de copia. El fotograma 0 es una miniatura real. Legible sin sonido. Texto dentro del 80% del fotograma.
10	Nada que no sea nuestro	Ningún cliente anterior, herramienta interna o marca de terceros en ninguna parte (código, copia, nombres de archivo, imágenes, metadatos). Cada activo tiene una fuente en ASSETS.md. Sin número, logotipo o testimonio inventado.

Detalle completo y números: references/rules.md. De dónde vienen: references/source.md.

Flujo de trabajo

0. Doctor. node <skill-dir>/scripts/doctor.mjs. Comprueba Node (22.18+) e instala stageshow y los skills de Remotion desde sus fuentes oficiales si faltan. Instala para Claude Code y Pi; --agent <id> para otro agente. Si instaló algo, dígalo: los nuevos skills se cargan en la próxima sesión; mientras tanto, lea sus archivos SKILL.md directamente.
1. Brief. Rellena BRIEF.md con el usuario: objetivo, audiencia, promesa (≤ 8 palabras), formatos, duración, marca y sus fuentes, prueba. Luego la hoja de beats: una fila por paso (título, lo que muestra el producto, sonido). Arco narrativo y ejemplos: references/brief.md. Para cada escena de producto, planifíquela a la manera de stageshow: invoca stageshow y escribe, por escena, el objeto focal, la acción, la recompensa, lo que se omite, y el ejemplo dorado más cercano (hero-demo, payout-flow, choreography, table-edit, loading…). Muestra la hoja de beats y obtén un sí antes de cualquier escena (Amir decide el contenido).
2. Scaffold. Invoca remotion-best-practices y mantén su enrutador abierto durante toda la construcción. Luego:

   node <skill-dir>/scripts/new.mjs <folder> --name "Product" --forbid "Former Client,internal.host" --install
   cd <folder> && npm run score && npm run dev
   

   La plantilla reemplaza el paso "crear un nuevo proyecto" del enrutador; sigue su paso "abrir la vista previa" (remotion-studio) para que el usuario observe la construcción. Usa una ruta corta en Windows (C:/Users/<me>/<name>-motion): Chrome sin cabeza falla después de 260 caracteres. Mapa de la plantilla: references/architecture.md.
3. Marca. Coloca la paleta, fuente display y logotipo del producto en theme.ts y public/, cada uno con su línea de fuente en ASSETS.md. Mapa los tokens propios del producto como lo hace references/looks.md de stageshow. ¿Sin fuente de marca? Preguntar. Nunca inventar una.
4. Escenas de producto (stageshow). Para cada escena que muestre el producto: abre el ejemplo dorado que nombraste en el paso 1 (<stageshow>/examples/<gold>/) y lee references/craft.md de stageshow (moderación, tipo, espaciado, iconos), references/framing.md (recorte, márgenes, diseños) y references/motion.md (historia, cursor, valores que cambian). Constrúyelo en Remotion con theme.ts, AppWindow, cursorAt y toStage, traduciendo cada movimiento de stageshow con la tabla en references/faux-ui.md. Copia la estructura y proporciones del ejemplo dorado, nunca su identidad de producto.
5. Marcado de Remotion. Antes de escribir código de escena, carga remotion-markup a través del enrutador; usa remotion-captions para subtítulos a nivel de palabra, remotion-multimedia para metraje real, remotion-maps para mapas, remotion-interactivity para exponer props en Studio. Bajo estas reglas.
6. Sonido. Escribe señales en cues.ts en los mismos números de beat, configura el arreglo en scripts/score.mts, ejecuta npm run score. Detalle: references/sound.md.
7. Diarios. npm run stills renderiza una hoja de contactos por corte (cada escena después de que aterriza, su punto medio, antes de que salga, más el fotograma 0). Abre los PNGs y míralos, con el ojo de revisión de stageshow (references/review.md allí): ¿dónde aterriza el ojo primero, es el resultado, hay algo encajonado, plano o vacío? Corrige y repite. Nunca juzgues el movimiento en un navegador en una máquina con movimiento reducido activado.
8. Puerta de auditoría y render. npm run lint, luego npm run audit. Corrige cada FALLO, evalúa cada ADVERTENCIA. Luego npm run finish (opciones de render: remotion-render a través del enrutador) y npm run audit de nuevo: mide la sonoridad, tamaño y FPS de cada MP4. Las reglas 1, 3, 4 y 7 necesitan un ojo humano: references/checklist.md.
9. Revisión y entrega. Entrega las hojas y el brief a un revisor con contexto limpio antes de que salga algo. Entrega los MP4, las hojas, las ADVERTENCIAS restantes y lo que no se revisó. Formatos y nomenclatura: references/delivery.md.

Banderas rojas, detente y corrige

• Un título de más de 10 palabras, o dos títulos en pantalla que el espectador deba leer a la vez.
• Una frase que explique lo que el producto podría mostrar al hacerlo.
• Una captura de pantalla del producto, un nombre de cliente real, un número de ticket real, un logotipo que no sea nuestro.
• Un Act de stageshow, a.click() o setTimeout pegado en una escena en lugar de traducido a beats.
• Una escena de producto construida sin un ejemplo dorado de stageshow nombrado.
• Un valor hexadecimal o un tamaño de fuente escrito dentro de una escena.
• interpolate() sin suavizado en algo que comienza o se detiene; todo desvaneciéndose junto.
• Un número de fotograma escrito en Soundtrack.tsx, o un sonido que cae entre dos beats.
• Un fundido encadenado entre dos ventanas oscuras (niebla gris).
• El corte 9:16 hecho recortando el 16:9.
• Un fotograma 0 en blanco o medio dibujado.
• "Se ve bien en Studio": nada está hecho antes de la hoja de contactos y la auditoría.