ajewoleOlugbenga/video-skills

Video Promocional Animado

Produce un video vertical listo para publicar a partir de una descripción en lenguaje natural de un negocio. Tú (Claude) actúas como redactor publicitario, diseñador de movimiento y editor: escribes el guion del anuncio, lo conviertes en un breve JSON y lo renderizas con la plantilla Remotion incluida en template/.

Salida: un MP4 (1080×1920 por defecto) más imágenes de vista previa, creado con código, sin necesidad de software de edición.

Requisitos

• Node.js 18+ y npm (la plantilla instala Remotion en la primera ejecución)
• ffmpeg es opcional (solo para recortar o convertir audio proporcionado por el usuario)
• La primera renderización descarga automáticamente un Chrome headless (~100 MB). Si las descargas están bloqueadas, usa REMOTION_BROWSER=/ruta/a/chrome.
• Licencia: Remotion es gratuito para individuos, empresas con hasta 3 empleados y organizaciones sin fines de lucro; las empresas con fines de lucro más grandes necesitan una Licencia Comercial de Remotion (remotion.dev/license). Menciona esto una vez si el usuario parece estar renderizando para una empresa grande. Las fuentes incluidas tienen licencia SIL OFL (consulta template/public/fonts/OFL.txt).

Flujo de trabajo

Sigue estos pasos en orden. No te saltes la comprobación de vista previa en el paso 5.

1. Recopilar la información

Necesitas: nombre del negocio, qué se vende, la oferta/precio, para quién es, cómo comprar (número de WhatsApp, usuario de IG, sitio web, ubicación). Información adicional útil: colores de marca, logotipo, fotos de productos, testimonios reales de clientes, cifras reales (clientes atendidos, años en el negocio).

Pregunta por lo esencial que falte en un mensaje corto (máximo 3 preguntas). No preguntes sobre cosas que puedas decidir bien tú mismo (colores, orden de escenas, redacción). Si el usuario no está disponible, toma decisiones sensatas y di qué supuestos asumiste.

2. Escribir el guion

Lee references/ad-scriptwriting.md y elige una estructura. Escribe el guion como una lista breve de escenas y muéstrasela al usuario en unas pocas líneas antes de renderizar, a menos que te haya pedido que sigas adelante. Las reglas más importantes:

• Gancho en los primeros 2 segundos, máximo 7 palabras. Que detenga el desplazamiento, que hable del espectador, no de la marca.
• Total de 15 a 30 segundos, de 5 a 8 escenas.
• Nunca inventes testimonios, recuentos de clientes, calificaciones ni precios. Solo usa escenas de testimonial y stat con datos que el usuario te haya proporcionado. De lo contrario, omítelas.
• Copia precios, números de teléfono y nombres de usuario exactamente como se te dieron.

3. Configurar el espacio de trabajo (una vez por proyecto)

cp -r <directorio-del-skill>/template ./promo-ads   # salta si ./promo-ads ya existe
cd promo-ads && npm install

<directorio-del-skill> es la carpeta donde reside este SKILL.md (el directorio base del skill, que se muestra cuando el skill se carga). Puede estar dentro de un caché de plugins o en ~/.claude/skills/; nunca edites archivos allí, siempre copia primero la plantilla.

Coloca el logotipo, las fotos de productos y el audio proporcionados por el usuario en promo-ads/public/assets/. Las fotos de productos cuadradas o en proporción 4:5 sobre un fondo limpio se ven mejor.

4. Escribir el JSON de configuración

Crea promo-ads/briefs/<slug-del-negocio>.json. Referencia completa de campos: references/brief-schema.md. Comienza desde template/briefs/example.json.

Puntos clave:

• Los colores deben ser hex de 6 dígitos. Elige un background, un primary fuerte (botones, marcador de resaltado), un accent (etiquetas, burst de precio, insignias) y un text con suficiente contraste contra el fondo.
• Envuelve 1–2 palabras clave por línea entre *asteriscos* para resaltarlas, por ejemplo, "¿Demasiado cansado para *cocinar* esta noche?".
• Tipos de escena: hook, problem, product, benefits, stat, price, testimonial, cta. Cada una acepta un seconds opcional.
• Iconos disponibles: check, star, truck, clock, shield, phone, chat, globe, tag, spark, heart, location, cash, bolt, gift, x.

5. Vista previa de fotogramas, luego revísalos

scripts/render.sh briefs/<slug>.json stills

Esto valida el brief y luego escribe un PNG por escena en out/<slug>-frames/. Abre cada fotograma y verifica:

• Que ningún texto se corte o se ajuste de manera incómoda (una palabra huérfana en su propia línea → acorta el texto)
• Que el texto sea claramente legible contra el fondo
• Que no haya nada importante cerca del 15% superior o el 22% inferior (los botones de las plataformas cubren estas áreas; la plantilla ya mantiene el contenido en la zona segura, por lo que esto importa principalmente para textos largos)
• Ortografía, precios y contactos exactamente correctos

Corrige el brief y vuelve a ejecutar los fotogramas hasta que estén limpios. Esto es rápido (≈1 min); una renderización completa no lo es.

6. Renderizar el video

scripts/render.sh briefs/<slug>.json

Escribe out/<slug>.mp4 (≈2–4 min para 30 s). Confirma que la duración sea de 15 a 30 s.

7. Entregar

Entrega al usuario el MP4 y una línea sobre lo que contiene. Ofrece un próximo paso útil, como:

• 2 o 3 ganchos alternativos como variantes A/B (copia el brief, cambia solo la escena del gancho)
• Otro formato: "format": "1:1" o "4:5" para publicaciones en el feed, "16:9" para YouTube/sitio web
• Una versión con voz en off (consulta references/voiceover.md)

Audio

• Los efectos de sonido (whoosh, pop, ding, impact) se reproducen automáticamente en los cambios de escena y en los elementos de lista. Desactívalos con "audio": {"sfx": false}.
• Por defecto se reproduce un ritmo inicial libre de derechos. Usa la propia pista del usuario con "audio": {"music": "assets/song.mp3"}, o false para ninguno. Nunca descargues ni uses canciones con derechos de autor; el usuario debe ser propietario o tener licencia de cualquier pista que proporcione.
• Voz en off: consulta references/voiceover.md.

Personalizar el aspecto

Para cambios más allá del brief (nuevo tipo de escena, animación diferente), edita archivos en promo-ads/src/:

• scenes/Scenes.tsx: un componente por tipo de escena
• components/Words.tsx: texto cinético y el marcador de resaltado
• components/Frame.tsx: fondo, chip de marca, zonas seguras, transición de salida de escena
• Ad.tsx: valores predeterminados de tiempo de escena y audio

Respeta las reglas de Remotion: toda animación debe ser impulsada por useCurrentFrame() (sin transiciones CSS, sin setTimeout), y los activos deben cargarse con staticFile().

Si algo falla, consulta references/troubleshooting.md.