visalnaqvi/video-generator-skill

Kit de marca

Crea un kit reutilizable por cliente en studio/brands/<slug>/:

studio/brands/<slug>/
├── brand.json     colores por rol, fuentes, logotipo, voz, datos, equipo, ofertas, testimonios (+ comprobaciones calculadas)
├── assets.json    índice de la biblioteca de activos (qué muestra cada imagen, calidad, fuente)
├── assets/        personas/ ofertas/ testimonios/ lugares/ trabajo/ pruebas/
├── swatch.png     imagen de revisión de los colores
├── logo/          archivos de logotipo realmente usados
└── source/        resultados del escaneo en bruto (site.json, probe.json, candidates.json, contact sheets)

Los skills de storyboard y renderizado leen colores, fuentes, logotipo y calculado; el skill de escritura lee voz y datos. Esquema y reglas de roles: references/brand-schema.md.

Los scripts realizan las mediciones; Claude hace los juicios. Lee los JSON de los scripts y los resúmenes de consola — no leas HTML/CSS sin procesar ni tomes capturas de pantalla de página completa para encontrar colores. Ejecuta los scripts desde la raíz del estudio (node .claude/skills/brand-kit/scripts/...).

Paso 0 — ¿Kit existente?

Busca la marca entre los kits existentes antes de crear algo nuevo: compara las palabras del usuario con el slug, nombre, alias y el sitio web en fuentes de cada studio/brands/*/brand.json (por ejemplo, "Stargate", "Sanjay Aggarwal Classes" y "stargate.net.in" son el mismo kit). Solo si no hay coincidencias, elige un nuevo slug corto en kebab-case.

• Kit aprobado: responde desde brand.json y muestra swatch.png — sin escaneo, sin scripts. Para una pregunta simple ("¿cuáles son los colores de Stargate?") solo responde. Reconstruye solo cuando el usuario solicite actualizar o refrescar.
• Kit borrador: continúa en el Paso 7 (aprobación) con el swatch existente; no vuelvas a escanear.
• Kit aprobado sin biblioteca de activos (sin assets.json): ejecuta solo el Paso 5, luego vuelve a aprobar. Los storyboards solicitan esto cuando necesitan imágenes.
• Actualización: vuelve a ejecutar desde el Paso 1, conserva todo lo que el usuario haya configurado manualmente (from: "user") y aumenta version.

Paso 1 — Recopilar fuentes

Utiliza todo lo disponible, en este orden de autoridad:

1. Las instrucciones del usuario ("nuestro azul es #1F3C88") — siempre ganan.
2. Guía de marca / archivos de logotipo que el usuario proporcione o coloque en assets/ del video.
3. El sitio web.

Pregunta una vez si falta algo que cambiaría el resultado y no está disponible; generalmente solo: "¿Tienes el archivo del logotipo o una guía de marca? De lo contrario, los tomaré del sitio web." No te detengas en esto.

Paso 2 — Escanear el sitio web

1. Escaneo estático (siempre): node .claude/skills/brand-kit/scripts/site-extract.mjs <url> studio/brands/<slug>/source/site.json Proporciona colores CSS (conteos de sitio vs framework, variables CSS de marca), fuentes, candidatos a logotipo, meta, contactos y encabezados.
2. Sonda renderizada (cuando el navegador integrado esté disponible — es más precisa porque mide lo que realmente se ve en pantalla): abre el sitio, luego ejecuta el contenido de scripts/browser-probe.js con javascript_tool. Guarda su JSON en source/probe.json. Reporta colores de fondo por área de pantalla, colores de texto por cantidad de texto, colores de botones, fuentes de encabezados y cuerpo, e imágenes de logotipo.

Si el escaneo estático no encuentra colores del sitio (sitio completamente renderizado con JS) y no hay navegador disponible, confía en el logotipo y menciónalo.

Paso 3 — Logotipo

Elige el mejor candidato (puntuación score, alt, tamaño y los logos de la sonda); prefiere SVG o el PNG más grande, evita favicons a menos que no exista nada más. Luego:

node .claude/skills/brand-kit/scripts/logo-palette.mjs studio/brands/<slug>/logo <logo-url-o-ruta> [...]

Esto guarda los archivos y reporta los colores reales de cada uno por proporción (píxeles transparentes ignorados) y su tono (qué fondo necesita). Elimina cualquier archivo descargado que no resulte ser el logotipo. Si solo existe un favicon o una foto, informa al usuario y solicita un archivo de logotipo adecuado.

Paso 4 — Decidir los roles

Rellena brand.json (formato en la referencia del esquema). Reglas de juicio:

• Los colores de marca provienen de la marca, no de complementos. Ignora los colores del framework y los valores predeterminados del tema a menos que la sonda muestre que realmente dominan la página.
• Primario = el color cromático principal del logotipo, confirmado por el sitio (encabezado, bloques grandes, variables de marca). Si el logotipo y el sitio discrepan, prefiere el logotipo y anótalo.
• Acento = el color de los botones/CTAs principales del sitio si difiere del primario; de lo contrario, el segundo color del logotipo; de lo contrario, deriva uno (complementario o contraste cálido) y márcalo como derived.
• Secundario solo si la marca usa claramente un segundo color. No lo rellenes por rellenar.
• Fondo, superficie, tinta, atenuado a partir de los colores reales de fondo y texto del sitio, ajustados para pantallas: texto #000 puro → un negro cercano teñido hacia el primario está bien.
• Resaltado (opcional): un color claro y saturado para subrayados tipo marcador, si la marca tiene uno o encaja naturalmente.
• Fuentes de la sonda (o escaneo estático): título = lo que usan los títulos, cuerpo = texto corrido.
• Voz y datos de los encabezados, meta y contactos del sitio: eslogan, nombre hablado, CTA predeterminado y detalles de contacto, palabras de tono, afirmaciones a evitar (superlativos no comprobables, números que el sitio no muestra realmente). Cada dato tiene una fuente y fecha.

Establece status: draft, version: 1 (o aumenta), updated: <hoy>.

Paso 5 — Biblioteca de activos

Recopila las imágenes propias de la marca una vez, para que cada video pueda usar personas, productos y pruebas reales en lugar de escenas solo de texto. Funciona para cualquier negocio: los tipos son generales:

Tipo	Lo que cubre
personas	fundadores, equipo, personal, expertos (médicos, chefs, profesores, consultores…)
oferta	productos, servicios, cursos, elementos del menú, paquetes, planes
testimonio	fotos de clientes, capturas de reseñas, imágenes de resultados/pruebas de resultados
lugar	locales, tienda, clínica, aula, oficina, eventos
trabajo	portafolio, galería, proyectos, antes/después
prueba	premios, certificados, logotipos de socios/clientes, prensa

1. node .claude/skills/brand-kit/scripts/collect-assets.mjs studio/brands/<slug> <site-url> (añade --pages url1,url2 para páginas que no debe perderse). Recorre páginas de todos los tipos, descarga la versión más grande de cada imagen, elimina iconos/duplicados/archivos pequeños, y escribe source/candidates.json (tamaño, calidad, tipo estimado, alt, texto cercano) más una hoja de contactos source/candidates-sheet.png.
2. Mira la hoja una vez; usa el texto de candidates.json (nombres, citas, pies de foto) para identificar sujetos. Conserva lo que un video podría usar realmente; omite marcadores de posición, material de otras marcas y casi duplicados.
3. Escribe assets.json (formato en la referencia del esquema): para cada imagen conservada, su id de candidato candidate, archivo destino file (<tipo>/<nombre-descriptivo>.jpg), kind, subject, descripción de una línea description, bakedText (true si la imagen tiene texto/precios impresos), opcional crop para eliminar etiquetas o bordes incrustados, y source. Anota cualquier cosa sensible al tiempo (precios, fechas) en la descripción.
4. node .claude/skills/brand-kit/scripts/finalize-assets.mjs studio/brands/<slug> — copia/recorta los archivos seleccionados en assets/, registra tamaño y quality (full ≥ 700 px, card ≥ 300 px, avatar-only por debajo), elimina los candidatos.
5. Añade los datos de texto coincidentes a brand.json (cada uno con fuente + fecha): team (nombre, rol, credenciales, id de activo), offerings (nombre, detalle, id de activo), testimonials (nombre, cita textual corta, detalle, id de activo), y proof si los hay. Verifica las afirmaciones contra el texto de la página antes de guardar; las citas son textuales.

Indica al usuario que confirme los derechos de uso con el cliente para las fotos de clientes.

Paso 6 — Construir y verificar

node .claude/skills/brand-kit/scripts/build-kit.mjs studio/brands/<slug>

Calcula colores sobre el color, escalas de tinte, comprobaciones de contraste y disponibilidad de fuentes de Google, los escribe en calculado y renderiza swatch.png. Corrige cada advertencia que tenga solución (ajusta la luminosidad de atenuado/tinta, cambia una fuente por su Google Font más cercana manteniendo la original en original) y vuelve a ejecutar hasta que esté limpio o lo que quede esté explicado. Cada advertencia que aceptes en lugar de corregir se convierte en una regla de una línea en uso (por ejemplo, "el acento es un color de relleno; nunca uses acento como texto sobre blanco"), para que las etapas de storyboard y renderizado lo respeten. Luego mira swatch.png una vez — es la única imagen que este skill necesita ver.

Paso 7 — Aprobar

Muestra al usuario el swatch y un resumen breve:

• cada rol → hex, nombre del color, de dónde vino (marca cualquier cosa derived)
• fuentes (y cualquier sustitución)
• archivo de logotipo usado y qué fondo necesita
• eslogan, CTA predeterminado, contacto, lista de evitar
• biblioteca de activos: recuentos por tipo, cualquier cosa de baja resolución o con precios incrustados, nota de derechos
• cualquier advertencia restante

Aplica los cambios que solicite el usuario (los valores configurados por el usuario obtienen from: "user"), vuelve a ejecutar build-kit.mjs y, una vez aprobado, establece status: approved y ejecútalo una vez más para que el swatch muestre el estado final.

Entrega

Cuando el kit esté aprobado, pon brand: <slug> en el brief.md del video si hay un video en curso, e informa al usuario qué etapas lo usarán. Mantén el cierre breve: ruta del kit, primario/acento hex, fuentes.