realjaymes/marketingagentskills

Cuándo Usar

Usa esta skill cuando:

• Estés creando un nuevo video de Remotion desde cero
• Generes variantes de un brief de video para un activo de contenido
• Modifiques una composición de Remotion existente
• Depures problemas de animación o renderizado en Remotion
• Trabajes con cualquier API o componente específico de Remotion

Proceso de Creación de Video

Al crear un nuevo video de Remotion, sigue este proceso de 8 pasos. El paso 2 selecciona de 3 a 5 conceptos del catálogo basándose en el brief y la optimización para audiencias frías. Los pasos 4 y 5 son puertas de aprobación. No escribas código hasta que ambos estén aprobados.

Para el documento completo del proceso con plantillas y matrices de decisión, lee references/video-creation-process.md.

Paso 0: Identificación de Marca

Antes de cualquier trabajo creativo, identifica la marca. Pregunta al usuario: "¿Para qué marca es este video?"

Si la marca tiene un preajuste a continuación, úsalo directamente. No se necesitan más preguntas sobre la marca.

Si la marca no está listada, pide al usuario que proporcione la URL del sitio web de la marca o las pautas de la marca. Extrae: color de fondo, acento primario, acento secundario, colores de texto, familia de fuentes y tema (claro/oscuro). Si no existen pautas, pide como mínimo: color primario, color de fondo y preferencia de fuente.

Paso 1: Brief Creativo

Recopila y fija antes de cualquier trabajo creativo:

Propósito: [Por qué existe este video]
Audiencia: [Quién está viendo]
Mensaje central: [Una frase]
Tipo de contenido: [blog-post, case-study, webinar, podcast, lead-magnet, product-update, tool-launch, industry-report, event-recap, client-testimonial, playbook, template, ai-demo, custom-gpt]
Canales: [Dónde se distribuirá]
CTA: [Qué debe hacer el espectador a continuación]
Activos fuente: [Archivos, componentes o URLs de referencia]
Tono: [Palabras descriptivas para la sensación]
Marca: [Nombre de la marca del Paso 0]

Paso 2: Selección de Concepto (3-5 Conceptos Recomendados)

Después de fijar el brief creativo, analízalo para seleccionar los mejores conceptos de video para este caso de uso específico. No presentes un conjunto fijo de variantes. Extrae del catálogo de conceptos en references/concept-catalog.md.

El catálogo contiene 18 conceptos principales, 8 modificadores de estilo visual y 5 patrones de gancho para audiencias frías. Léelo antes de generar recomendaciones.

Proceso de Selección

1. Puntúa los conceptos contra el brief. Para cada concepto del catálogo, evalúa:

   • ¿El "Mejor Para" del concepto coincide con el tipo de contenido?
   • ¿Puede el mensaje central aterrizar en 15-30 segundos con esta estructura?
   • ¿El concepto funciona con la duración y dimensiones objetivo?
   • ¿Proporciona el brief los datos/visuales que necesita este concepto?

2. Aplica el filtro de audiencia fría. Para cada concepto puntuado, evalúa:

   • ¿Puede un espectador con CERO contexto previo entender el valor en los primeros 3 segundos?
   • ¿Crea el concepto un movimiento visual que detenga el desplazamiento en el primer momento?
   • ¿Evita el concepto requerir conocimiento previo de la marca, producto o espacio del problema?
   • Si el concepto naturalmente adelanta un resultado o punto de datos (metric-counter, animated-infographic, before-after), es inherentemente más fuerte para audiencias frías que conceptos narrativos que necesitan tiempo de preparación.

3. Selecciona un patrón de gancho. Para cada concepto recomendado, combínalo con un patrón de gancho del catálogo:

   • Contenido con datos → result-first
   • Lanzamientos de productos y herramientas → pattern-interrupt
   • Liderazgo de pensamiento y educación → curiosity-gap
   • Contenido de creación de confianza → social-proof-hook
   • Contenido competitivo y de precios → loss-aversion

4. Presenta de 3 a 5 conceptos recomendados como briefs de una página. Para cada uno:

   • Nombre del concepto (del catálogo) y descripción de una frase
   • Por qué encaja con este brief (1-2 frases haciendo referencia al contenido y audiencia específicos)
   • Patrón de gancho recomendado y descripción del primer momento
   • Tabla escena por escena (de la plantilla del catálogo, personalizada para este contenido)
   • Modificador de estilo visual opcional si mejora el concepto

5. Clasifica las recomendaciones. Marca la recomendación principal y explica por qué.

6. El usuario selecciona uno (o un híbrido de dos). Fija el concepto seleccionado antes de proceder al Paso 3.

Reglas de Optimización para Audiencia Fría

Estas reglas se aplican a todas las recomendaciones de concepto y anulan los valores predeterminados del tipo de contenido cuando entran en conflicto:

• Suposición predeterminada: audiencia fría. A menos que el brief indique explícitamente que la audiencia es cálida (retargeting, usuarios existentes, suscriptores de newsletter), asume cero conocimiento de marca.
• Requisitos de la primera escena para audiencias frías:
  1. Una interrupción de patrón visual (movimiento, contraste de color o cambio de escala)
  2. Texto que nombre un problema o resultado que el espectador reconozca SIN conocer la marca
  3. Sin identificación de marca en la escena 1 (guarda la tarjeta de marca para la escena 2 o posterior)
• Restricciones de patrón de gancho para audiencias frías: Usa pattern-interrupt, result-first o loss-aversion. Evita curiosity-gap a menos que la estadística/afirmación sea universalmente relatable sin contexto de marca.
• Flexibilidad de concepto: Si ningún concepto del catálogo encaja bien con el brief para una audiencia fría, crea un híbrido o adapta un concepto existente. El catálogo es una biblioteca de inicio, no una restricción.

Paso 3: Formato y Especificaciones

Resuelve a partir del brief y la variante seleccionada usando la matriz de decisión de formato:

Canal	Dimensiones	Duración
Feed de LinkedIn/Instagram	1080x1080	15-30 s
Sitio web/presentación	1920x1080	15-60 s
Reels/TikTok/Stories	1080x1920	15-60 s
Email (GIF)	600x600 o 800x450	5-10 s

FPS predeterminado: 30. Usa 60 solo si el movimiento suave es crítico.

Dimensiones: [ancho]x[alto]
Duración: [X] segundos ([X * fps] fotogramas)
FPS: 30
ID de composición: [PascalCase]
Bucle: [sí/no]
Formatos de salida: [mp4, gif, webm]
Concepto seleccionado: [concept-id del catálogo, o híbrido]

Paso 4: Desglose de Escenas (PUERTA DE APROBACIÓN)

Define cada escena antes de escribir código. Usa la plantilla de escena de la variante seleccionada como estructura de inicio, luego personaliza para el contenido específico.

Presenta la tabla de escenas para aprobación.

Formato de tabla de escenas:

#	Nombre	Tiempo	Copia	Animación	Propósito
1	Gancho	0-3 s	Texto exacto	Descripción del movimiento	Por qué existe

Pautas de temporización:

Duración	Número de Escenas	Promedio por Escena
10 s	3-4	2.5-3.3 s
15 s	4-6	2.5-3.75 s
30 s	8-12	2.5-3.75 s
60 s	12-20	3-5 s

Fija la copia, la temporización y la estructura narrativa antes de continuar.

Paso 5: Diseño Visual (PUERTA DE APROBACIÓN)

Fija antes de la implementación:

Paleta de colores (roles mínimos requeridos):

• Fondo, Acento primario, Acento secundario
• Texto primario, Texto secundario, Texto terciario
• Borde/divisor

Preajustes de tema de marca (usa para marcas conocidas, omite preguntas de color):

Marca	Fondo	Acento Primario	Acento Secundario	Texto Primario	Texto Atenuado	Fuente	Tema
FunnelEnvy	#FFFFFF / #1a1a2e (terminal)	#3B82F6 (Azul)	#8B5CF6 (Púrpura)	#000000	#6B7280	Inter, system	Claro
Reform	#FFFFFF / #1a1a2e (terminal)	#48EC80 (Verde)	#EDE630 (Amarillo)	#000000	#6B7280	Inter, system	Claro
GrowthNode	#0f0a1a (todas las escenas)	#8B5CF6 (Púrpura)	#3B82F6 (Azul)	#FFFFFF	#a1a1aa	Inter, system	Oscuro
MIA	#F7F4FA / #1c1422 (oscuro)	#F1DE71 (Amarillo)	#7184F1 (Púrpura)	#1c1422 / #f7f4fa (oscuro)	rgba(28,20,34,0.62)	system-ui, -apple-system, Segoe UI	Claro

Paleta de acentos de MIA: Azul #71C4F1, Púrpura #7184F1, Rosa #F171C4, Verde #71F19E

Marcas personalizadas: Si la marca no está listada arriba, define los colores a partir del sitio web de la marca o las pautas proporcionadas en el Paso 0. Completa los mismos roles: fondo, acento primario, acento secundario, texto primario, texto atenuado, fuente, tema.

Tipografía: Familia de fuentes, jerarquía de pesos, tamaños en la resolución objetivo.

Estilo de animación: Spring (elástico/suave/rápido), linear o basado en easing. Elige un estilo dominante.

Fuente de verdad: Si se ajusta a un diseño existente, referencia el archivo fuente.

Paso 6: Decisión de Arquitectura

El agente resuelve esto según la complejidad de la escena:

Condición	Enfoque
Menos de 15 escenas	Archivo único
15+ escenas o partes reutilizables	Múltiples archivos con directorio scenes/
Elementos compartidos entre escenas	Capa persistente con envolvente de opacidad

Siempre usa una constante de temporización centralizada (const T = { ... }).

Paso 7: Implementación

Escribe código según las decisiones fijadas. Toda la animación debe seguir las reglas de Remotion (consulta la Referencia Técnica a continuación).

Paso 8: Documentación de Salida

Genera un documento de referencia que cubra: especificaciones, variante seleccionada, comandos de previsualización/renderizado, desglose de escenas, paleta de colores, configuración de temporización, notas de arquitectura, guía de iteración.

---

Referencia Técnica

Lee los archivos de reglas individuales para obtener detalles de API y ejemplos de código.

Animación y Temporización Central

• rules/animations.md - Fundamentos de animación. Todo movimiento mediante useCurrentFrame(). Sin transiciones CSS
• rules/timing.md - interpolate(), spring(), funciones de easing, configuraciones de spring
• rules/sequencing.md - <Sequence> y <Series> para control de temporización, retraso y duración
• rules/trimming.md - Recortar inicios (from negativo) y finales (durationInFrames)
• rules/transitions.md - <TransitionSeries> con fundido, deslizamiento, barrido, giro, cortinilla de reloj

Medios

• rules/assets.md - staticFile() para activos en la carpeta public/
• rules/videos.md - <Video> con recorte, volumen, velocidad, bucle, tono
• rules/audio.md - <Audio> con recorte, volumen, velocidad, tono
• rules/images.md - Componente <Img> (asegura la carga antes del renderizado)
• rules/gifs.md - <AnimatedImage> para GIF/APNG/AVIF/WebP
• rules/fonts.md - Google Fonts mediante @remotion/google-fonts, fuentes locales mediante @remotion/fonts

Texto y Subtítulos

• rules/text-animations.md - Máquina de escribir, patrones de resaltado de palabras
• rules/measuring-text.md - measureText(), fitText(), fillTextBox()
• rules/display-captions.md - Subtítulos estilo TikTok, resaltado palabra por palabra
• rules/import-srt-captions.md - Analizar archivos .srt con parseSrt()
• rules/transcribe-captions.md - Whisper.cpp, Whisper Web, OpenAI API

Composición y Metadatos

• rules/compositions.md - <Composition>, <Still>, <Folder>, defaultProps
• rules/calculate-metadata.md - Duración, dimensiones y props dinámicos

Avanzado

• rules/3d.md - <ThreeCanvas> con React Three Fiber
• rules/charts.md - Gráficos SVG/D3.js animados mediante useCurrentFrame()
• rules/lottie.md - Componente <Lottie> con @remotion/lottie
• rules/tailwind.md - TailwindCSS (sin clases transition-* ni animate-*)

Utilidades de Medios (Mediabunny)

• rules/extract-frames.md - Extraer fotogramas de video en marcas de tiempo
• rules/can-decode.md - Verificar decodificabilidad de video/audio
• rules/get-video-duration.md - Duración del video en segundos
• rules/get-video-dimensions.md - Ancho y alto del video
• rules/get-audio-duration.md - Duración del audio en segundos

Diseño

• rules/measuring-dom-nodes.md - useCurrentScale() para mediciones precisas

---

Referencias

• references/concept-catalog.md - Catálogo de conceptos con 18 conceptos principales, 8 modificadores de estilo visual, 5 patrones de gancho para audiencias frías, criterios de selección y matriz de afinidad por tipo de contenido
• references/video-creation-process.md - Documento completo del proceso con plantillas, matrices de decisión y guía detallada

---

Reglas Estrictas

Estas se aplican a todo el código de Remotion. Las infracciones producirán resultados incorrectos.

1. Toda la animación impulsada por useCurrentFrame(). Sin transiciones CSS, sin clases de Tailwind animate-* o transition-*, sin useFrame() de React Three Fiber
2. Usa componentes de Remotion (<Img>, <Video>, <Audio>) en lugar de elementos HTML nativos
3. Usa staticFile() para todos los activos en la carpeta public/
4. Tiempo en segundos: multiplica por fps de useVideoConfig() para obtener fotogramas
5. Sin bibliotecas de animación de terceros que impulsen el movimiento (deshabilita sus animaciones, usa useCurrentFrame() en su lugar)
6. Cada concepto debe ser autoexplicativo. Un espectador que se desplaza sin contexto debe entender el valor solo con el video. Ninguna escena debe depender de conocimiento externo. La copia debe llevar el mensaje completo de forma independiente. Siempre asume una audiencia fría a menos que el brief indique lo contrario.