VanillaSkyAi/skills

VanillaSky — videos sociales desde una configuración

Un video es un JSON VideoConfig: una lista ordenada de escenas, cada una haciendo referencia a una plantilla curada por su ID camelCase. Compón e inspecciona la configuración, luego entrégala al usuario en VanillaSky Studio. El usuario previsualiza, edita y exporta el MP4 ahí; no hagas del renderizado completo de MP4 parte del flujo inicial.

Tres reglas no negociables

1. Lee el catálogo; nunca adivines. Después de resolver la CLI, ejecuta vanillasky templates para obtener el mapa de plantillas incluido y vanillasky templates <id> --json para un esquema exacto. La alternativa en línea es https://vanillasky.ai/llms-components.txt; las instalaciones desde el repositorio y autónomas llevan registry/llms-components.txt además de registry/r/<name>.json. Si no hay ningún catálogo exacto alcanzable, detente en lugar de inventar un ID o variable.
2. Nunca inventes pruebas. Nombres, citas, números, estadísticas, capturas de pantalla y afirmaciones sobre productos deben provenir del brief o de los activos proporcionados. Si una plantilla requiere evidencia que el usuario no proporcionó, elige otra plantilla.
3. Nunca entregues una configuración sin inspeccionar. La validación detecta la estructura; solo mirar los fotogramas renderizados detecta desbordamiento, composición débil y valores predeterminados accidentales.

Inicia la sesión

Primero resuelve la CLI. La CLI oficial de VanillaSky no está publicada como un paquete npm. Nunca busques en npm, ejecutes npm install vanillasky ni uses un paquete que solo posea ese nombre. Si command -v vanillasky falla, resuelve el directorio de instalación de esta habilidad desde la ruta de este SKILL.md, luego ejecuta su arrancador oficial:

node <directorio-de-habilidad-instalada>/scripts/install-cli.mjs

El arrancador clona solo https://github.com/VanillaSkyAi/skills.git en ~/.vanillasky/release, instala las dependencias declaradas por ese clon y expone su CLI local en PATH. Detente si el origen del clon difiere o si el script falla; no sustituyas un paquete del registro.

Luego ejecuta lo siguiente antes del primer video:

vanillasky update --check
vanillasky setup --check
vanillasky templates

update --check informa si hay una versión más reciente sin cambiar nada. Si falta una bandera documentada aquí, ejecuta vanillasky update. setup --check informa la orientación predeterminada, navegador, clave de Pexels, estado de ánimo musical y estado de DESIGN.md.

Una clave de Pexels faltante no es bloqueante: menciona una vez que la búsqueda de stock necesita una clave gratuita de pexels.com/api, luego usa los medios proporcionados o plantillas que no dependan de stock. Un DESIGN.md faltante significa que no hay marca automática; no bloquees.

Deriva el brief

Usa primero el prompt, el repositorio, DESIGN.md, las URLs y los activos proporcionados. Haz como máximo tres preguntas, y solo para lagunas genuinas:

1. Objetivo y formato — qué debe hacer o sentir el espectador: lanzamiento, reseña, hito o actualización.
2. Audiencia y pruebas — para quién es, y qué número real, cita, captura de pantalla o detalle del producto justifica la afirmación.
3. Activos — qué capturas de pantalla, logotipos, clips o URLs deben aparecer.

Deriva la orientación del destino: TikTok/Reels/Shorts → vertical; video de YouTube o una publicación explícitamente ancha en X/LinkedIn → horizontal. De lo contrario, usa la configuración predeterminada o gasta una de las tres preguntas en ello.

Guarda el resultado como video-brief.md junto a video.json. Vuelve a leerlo y actualízalo en turnos posteriores en lugar de hacer las mismas preguntas otra vez.

Flujo de trabajo predeterminado: entrega en Studio

1. Compón video.json a partir del brief y el catálogo incluido. Inspecciona los esquemas exactos de las plantillas preseleccionadas con vanillasky templates <id> --json antes de escribir sus variables.

2. Resuelve medios de stock cuando la configuración contenga mediaKeyword:

   vanillasky resolve video.json
   

   Esto selecciona un resultado de Pexels y escribe la mediaUrl exacta en la configuración, haciendo que la validación y los re-renderizados sean deterministas. Si no hay clave de Pexels disponible, usa medios proporcionados, una URL directa o mediaType: "gradient" en su lugar. No te bases en la búsqueda en tiempo de renderizado ya que ese es el estado de entrega.

3. Valida y corrige cada error y advertencia:

   vanillasky validate video.json
   

   El format de la configuración selecciona el contrato de ranura correcto; no codifiques --format launch para cada video. Trata las advertencias como trabajo por resolver, no como decoración, y nunca describas la validación como limpia mientras quede alguna.

4. Inspecciona una hoja de contactos:

   vanillasky render video.json --sheet --out ./sheet
   

   Abre sheet/sheet.png e inspecciona los fotogramas individuales cuando sea necesario. Verifica realmente abriendo sheet/sheet.png; la existencia del archivo no es inspección. Verifica desbordamiento de texto, tipografía ilegible, valores predeterminados o sin establecer, activos no utilizados, repetición visual y contenido crítico fuera del 75% medio del fotograma. Después de cualquier edición visual, repite la resolución (cuando sea necesario), la validación y la hoja.

5. Entrega en Studio:

   vanillasky studio video.json
   

   Studio sigue el archivo en vivo. Sigue editando la configuración mientras el usuario revisa; sus ediciones no guardadas aparecen como un conflicto en lugar de ser sobrescritas. El usuario exporta el MP4 desde Studio cuando esté satisfecho.

   Si se abre el navegador equivocado, pasa --browser "Google Chrome" o persiste el navegador en ~/.vanillasky/config.json. Usa --no-open en una shell remota.

No renderices un MP4 completo por defecto. Renderízalo tú mismo solo cuando el usuario lo solicite explícitamente o cuando no se pueda usar Studio (CI/headless):

vanillasky render video.json --open

Para esa rama, mira el resultado y lee el banner de finalización: confirma la duración total, cobertura de audio, orientación y suavidad del metraje. Incluye los enlaces de Watch y Studio del bloque de finalización. vanillasky link video.json los reimprime sin renderizar.

Compón la ruta predeterminada

Empieza desde esta forma, luego usa los esquemas exactos del catálogo:

{
  "format": "launch",
  "orientation": "portrait",
  "style": {
    "font": "Inter",
    "preset": "bold",
    "brandKit": { "accent": "#6D5EF8", "secondary": "#F8B45E" }
  },
  "audio": { "trackId": "<de vanillasky tracks>" },
  "scenes": [
    {
      "id": "s0",
      "templateId": "media",
      "variables": { "texts": "Envíalo hoy", "mediaType": "gradient" },
      "timing": { "fixedDuration": 3 }
    }
  ]
}

• brandKit va dentro de style; elige un preset de estilo deliberadamente.
• textArchetype y backgroundEffect son campos de escena, no variables.
• timing.fixedDuration establece la duración de una escena independiente. Las líneas de tiempo explícitas usan startTime + endTime contiguos; timing.duration no es un campo.
• Usa vanillasky tracks para elegir música por estado de ánimo y energía. El silencio es válido pero generalmente débil para video social.
• Prefiere una URL HTTPS real o una ruta local para los medios. Los medios en Base64 hacen que los enlaces compartidos sean demasiado grandes, y los resultados de mediaKeyword deben fijarse a mediaUrl para renderizados deterministas.

Lee references/config.md cuando la configuración necesite marca, resolución de medios, temporización explícita, coincidencia de FPS o comportamiento de enlaces.

Elige el formato según la historia

Formato	Forma de la historia	Duración típica
launch	encuadre → comprensión → prueba	3–8 escenas, generalmente 5
review	cita → atribución → resultado	4–7 escenas, generalmente 5
milestone	número → contexto → gratitud	3–6 escenas, generalmente 4
update	cambio → demostración → beneficio	4–7 escenas, generalmente 5

El validador impone recuentos de escenas, ganchos prohibidos, ubicación del cierre y reglas de adyacencia. references/formats.md contiene el contrato generado. Tu trabajo es el juicio que el validador no puede hacer.

Puertas de calidad creativa

Verdad y activos

• Reemplaza cada valor predeterminado de plantilla con contenido específico del brief. Nunca envíes estadísticas de marcador de posición como 10K, 99.9% o <50ms.
• Usa cada captura de pantalla proporcionada que sea relevante. Una superficie de producto real supera a un terminal, editor, teléfono o navegador sintetizado que muestre lo mismo.
• Haz coincidir capturas de pantalla verticales con maquetas de teléfono y capturas de pantalla horizontales con maquetas de navegador.

Historia

• El gancho crea tensión o curiosidad; no gasta el desenlace.
• Incluye al menos un cuerpo explicativo que nombre el producto, audiencia o resultado concreto. Las notificaciones, llamadas, tweets y números pueden encuadrar o probar, pero no pueden explicar el producto solos.
• El cierre es una dirección (marca, URL o acción), no una repetición de la prueba.

Variedad y ritmo

• No hagas que cada cuerpo sea una tarjeta. Usa al menos dos registros que no sean de tarjeta.
• Una oración simple sobre un gradiente plano es un recurso de respaldo, no automáticamente un gancho fuerte. Prefiere un mecanismo visual fundamentado en el brief: una notificación para una alerta, terminal/editor para un flujo de trabajo de desarrollador, chat para una conversación, dispositivo o navegador para una superficie de producto proporcionada. Incluso un video intencionalmente mínimo necesita una idea visual tangible; mínimo significa menos elementos, no el mismo gradiente y tipografía en cada escena.
• Una paleta coherente no es variedad de escenas. Tres o más filas de escenas que compartan el mismo fondo plano fallan esta puerta incluso si su diseño de tipo difiere. Cambia al menos un registro con un activo fundamentado, fondo de stock, plantilla o efecto moderado. Cuando el brief contenga muy poca copia o prueba aprobada para soportar muchas escenas distintas, usa la historia válida más corta del formato en lugar de repetirla.
• Dale al metraje al menos 3 segundos a menos que sea intencionalmente un puente corto. Varía el movimiento de fondo en lugar de aplicar un efecto en todas partes.
• Una escena de medios solo con gradiente debe ser un latido de marca deliberado, no un recurso de respaldo elegido porque el stock o los medios proporcionados eran inconvenientes.
• Inspecciona lo que realmente aparece: las plantillas con duración limitada pueden omitir elementos posteriores incluso cuando la configuración los contiene.

Copia

• Gancho: como máximo 7 palabras. CTA: como máximo 4 palabras, preferiblemente un comando.
• Conserva cada eslogan o cita aprobada por el usuario intacta en al menos una escena. No conviertas una línea aprobada en varias escenas pseudo-distintas mostrando sus fragmentos por separado; deja que la progresión visual lleve los otros latidos.
• Evita listas de tres sustantivos, categorías o verbos genéricos. El ritmo necesita tensión, progresión o un giro, no tres sinónimos.
• Mantén el texto que debe permanecer unido dentro de un span nowrap; nunca confíes en NBSP para la exportación SVG.

Escala solo cuando las plantillas fallen

Usa el escalón más bajo que exprese el brief:

1. Plantilla con copia escrita a propósito.
2. Plantilla con variables ajustadas.
3. Escena expulsada/personalizada basada en un elemento del registro.
4. Escena personalizada compuesta a partir de elementos de escena de zona de pruebas.

La ruta predeterminada se detiene en el escalón 2. Antes de usar el escalón 3 o 4, lee references/custom-scenes.md, references/libraries.md, references/motion.md y references/visual-rules.md. Usa vanillasky scope y el archivo generado references/motion-api.md en lugar de inventar APIs.

Enrutador de referencias

• references/config.md — temporización, estilo, marca, medios, audio, FPS, DESIGN.md y comportamiento de enlaces compartidos.
• references/formats.md — contratos de ranura generados y categorías de plantillas.
• references/custom-scenes.md — expulsión, procedencia, contrato de zona de pruebas y reglas de validación.
• references/libraries.md — mapa de cinco bibliotecas generado, orientación de audiencia, dependencias, objetivos de instalación y grupos de exportación exactos.
• references/motion.md — coreografía, tiempo de lectura, jerarquía focal y continuidad de corte.
• references/motion-api.md — funciones generadas, nombres de resortes y easing disponibles para escenas personalizadas.
• references/visual-rules.md — tipografía, diseño de orientación, color, luz y composición para escenas personalizadas.