visalnaqvi/video-generator-skill

Kit de Marca

Cria um kit reutilizável por cliente em studio/brands/<slug>/:

studio/brands/<slug>/
├── brand.json     cores por função, fontes, logotipo, tom, fatos, equipe, ofertas, depoimentos (+ verificações computadas)
├── assets.json    índice da biblioteca de ativos (o que cada imagem mostra, qualidade, origem)
├── assets/        pessoas/ ofertas/ depoimentos/ lugares/ trabalhos/ provas/
├── swatch.png     uma imagem de revisão para as cores
├── logo/          arquivos de logotipo realmente usados
└── source/        resultado bruto da varredura (site.json, probe.json, candidates.json, contact sheets)

As skills storyboard e render leem colors, fonts, logo e computed; a skill write lê voice e facts. Esquema e regras de função: references/brand-schema.md.

Os scripts fazem as medições; o Claude faz os julgamentos. Leia os resumos JSON e de console dos scripts — não leia HTML/CSS bruto nem tire screenshots de página inteira para encontrar cores. Execute os scripts a partir da raiz do estúdio (node .claude/skills/brand-kit/scripts/...).

Passo 0 — Kit existente?

Procure a marca entre os kits existentes antes de criar algo: compare as palavras do usuário com slug, name, aka e website em sources de cada studio/brands/*/brand.json (por exemplo, "Stargate", "Sanjay Aggarwal Classes" e "stargate.net.in" são o mesmo kit). Só se nada corresponder, escolha um novo slug curto em kebab-case.

• Kit aprovado: responda a partir de brand.json e mostre swatch.png — sem varredura, sem scripts. Para uma pergunta simples ("quais são as cores da Stargate?") apenas responda. Reconstrua apenas quando o usuário pedir para atualizar ou renovar.
• Kit rascunho: retome no Passo 7 (aprovação) com o swatch existente; não faça nova varredura.
• Kit aprovado sem biblioteca de ativos (sem assets.json): execute apenas o Passo 5 e depois re-aprove. Storyboards pedem isso quando precisam de imagens.
• Atualização: execute novamente a partir do Passo 1, mantenha tudo o que o usuário definiu manualmente (from: "user") e incremente version.

Passo 1 — Coletar fontes

Use tudo disponível, nesta ordem de autoridade:

1. As instruções do usuário ("nosso azul é #1F3C88") — sempre prevalecem.
2. Guia de marca / arquivos de logotipo que o usuário fornece ou coloca em assets/ do vídeo.
3. O site.

Pergunte uma vez por qualquer coisa que alteraria o resultado e não está disponível — geralmente apenas "Você tem o arquivo do logotipo ou um guia de marca? Caso contrário, vou extraí-los do site." Não bloqueie por isso.

Passo 2 — Escanear o site

1. Varredura estática (sempre): node .claude/skills/brand-kit/scripts/site-extract.mjs <url> studio/brands/<slug>/source/site.json Fornece cores CSS (contagens de site vs framework, variáveis CSS da marca), fontes, candidatos a logotipo, meta, contatos e títulos.
2. Sonda renderizada (quando o navegador integrado estiver disponível — é mais precisa, pois mede o que está realmente na tela): abra o site e execute o conteúdo de scripts/browser-probe.js com javascript_tool. Salve seu JSON em source/probe.json. Ele reporta cores de fundo por área da tela, cores de texto por quantidade de texto, cores de botões, fontes de títulos e corpo, e imagens de logotipo.

Se a varredura estática não encontrar cores do site (site totalmente renderizado em JS) e nenhum navegador estiver disponível, confie no logotipo e informe isso.

Passo 3 — Logotipo

Escolha o melhor candidato (score, alt, tamanho e logos da sonda); prefira SVG ou o maior PNG, evite favicons a menos que não exista mais nada. Então:

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

Isso salva os arquivos e reporta as cores reais de cada um por participação (pixels transparentes ignorados) e seu tom (qual fundo ele precisa). Remova qualquer arquivo baixado que não seja o logotipo. Se apenas um favicon ou uma foto existir, informe o usuário e peça um arquivo de logotipo adequado.

Passo 4 — Definir as funções

Preencha brand.json (formato na referência do esquema). Regras de julgamento:

• As cores da marca vêm da marca, não de plugins. Ignore cores de framework e padrões de tema, a menos que a sonda mostre que realmente dominam a página.
• Primária = a cor cromática principal do logotipo, confirmada pelo site (cabeçalho, grandes blocos, variáveis da marca). Se logotipo e site discordarem, prefira o logotipo e anote.
• Destaque (Accent) = a cor dos principais botões/CTAs do site, se diferente da primária; caso contrário, a segunda cor do logotipo; caso contrário, derive uma (complementar ou contraste quente) e marque como derived.
• Secundária apenas se a marca usar claramente uma segunda cor. Não a preencha por preencher.
• Fundo, superfície, tinta (ink), suave (muted) a partir das cores reais de fundo e texto do site, ajustadas para telas: texto #000 puro → um preto próximo tingido para a primária é aceitável.
• Realce (Highlight) (opcional): uma cor clara e saturada para traços de marcador, se a marca tiver uma ou se encaixar naturalmente.
• Fontes a partir da sonda (ou varredura estática): título = o que os títulos usam, corpo = texto corrido.
• Tom e fatos a partir dos títulos, meta e contatos do site: tagline, nome falado, CTA padrão e detalhes de contato, palavras de tom, alegações a evitar (superlativos não comprováveis, números que o site não mostra). Cada fato tem uma fonte e data.

Defina status: draft, version: 1 (ou incremente), updated: <hoje>.

Passo 5 — Biblioteca de ativos

Colete as imagens próprias da marca uma vez, para que cada vídeo possa usar pessoas, produtos e provas reais em vez de cenas só com texto. Funciona para qualquer negócio — os tipos são gerais:

Tipo	O que cobre
pessoas	fundadores, equipe, funcionários, especialistas (médicos, chefs, professores, consultores…)
oferta	produtos, serviços, cursos, itens de menu, pacotes, planos
depoimento	fotos de clientes, capturas de tela de avaliações, imagens de resultado/prova de resultado
lugar	instalações, loja, clínica, sala de aula, escritório, eventos
trabalho	portfólio, galeria, projetos, antes/depois
prova	prêmios, certificados, logotipos de parceiros/clientes, imprensa

1. node .claude/skills/brand-kit/scripts/collect-assets.mjs studio/brands/<slug> <site-url> (adicione --pages url1,url2 para páginas que não devem ser perdidas). Ele seleciona páginas em todos os tipos, baixa a maior versão de cada imagem, remove ícones/duplicatas/arquivos pequenos e escreve source/candidates.json (tamanho, qualidade, tipo adivinhado, texto alternativo, texto próximo) além de uma folha de contato source/candidates-sheet.png.
2. Olhe para a folha uma vez; use o texto de candidates.json (nomes, citações, legendas) para identificar os assuntos. Mantenha o que um vídeo poderia realmente usar; pule placeholders, material de outras marcas e quase duplicatas.
3. Escreva assets.json (formato na referência do esquema): para cada imagem mantida, seu id de candidate, file alvo (<tipo>/<nome-descritivo>.jpg), kind, subject, description de uma linha, bakedText (verdadeiro se a imagem tiver texto/preços impressos), crop opcional para remover rótulos ou bordas embutidas, e source. Anote qualquer coisa sensível ao tempo (preços, datas) na descrição.
4. node .claude/skills/brand-kit/scripts/finalize-assets.mjs studio/brands/<slug> — copia/recorta os arquivos escolhidos para assets/, registra tamanho e quality (full ≥ 700 px, card ≥ 300 px, avatar-only abaixo), remove os candidatos.
5. Adicione os fatos de texto correspondentes a brand.json (cada um com fonte + data): team (nome, função, credenciais, id do ativo), offerings (nome, detalhe, id do ativo), testimonials (nome, citação curta literal, detalhe, id do ativo) e proof, se houver. Verifique as alegações com o texto da página antes de salvar — citações são literais.

Informe o usuário para confirmar os direitos de uso com o cliente para fotos de clientes.

Passo 6 — Construir e verificar

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

Ele calcula sobreposições de cores, escalas de matiz, verificações de contraste e disponibilidade do Google Fonts, escreve-os em computed e renderiza swatch.png. Corrija cada aviso que tenha uma correção (ajuste a claridade de muted/ink, troque uma fonte pela sua Google Font mais próxima com a original mantida em original) e execute novamente até ficar limpo ou até que o que restou seja explicado. Cada aviso que você aceitar em vez de corrigir se torna uma regra de uma linha em usage (por exemplo, "destaque (accent) é uma cor de preenchimento; nunca use texto de destaque (accent) sobre branco"), para que os estágios de storyboard e render respeitem. Em seguida, olhe para swatch.png uma vez — é a única imagem que esta skill precisa visualizar.

Passo 7 — Aprovar

Mostre ao usuário o swatch e um breve resumo:

• cada função → hex, nome da cor, de onde veio (sinalize qualquer derived)
• fontes (e quaisquer substituições)
• arquivo de logotipo usado e qual fundo ele precisa
• tagline, CTA padrão, contato, lista de evitação
• biblioteca de ativos: contagens por tipo, qualquer coisa de baixa resolução ou com preços embutidos, nota de direitos
• quaisquer avisos restantes

Aplique as alterações solicitadas pelo usuário (valores definidos pelo usuário recebem from: "user"), execute build-kit.mjs novamente e, uma vez aprovado, defina status: approved e execute-o mais uma vez para que o swatch mostre o status final.

Transferência

Quando o kit estiver aprovado, coloque brand: <slug> no brief.md do vídeo, se um vídeo estiver em andamento, e informe ao usuário quais estágios o usarão. Mantenha o fechamento curto: caminho do kit, hex da primária/destaque (accent), fontes.