VanillaSkyAi/skills

VanillaSky — vídeos sociais a partir de uma configuração

Um vídeo é um JSON VideoConfig: uma lista ordenada de cenas, cada uma referenciando um template curado pelo seu ID em camelCase. Componha e inspecione o config, depois entregue-o ao usuário no VanillaSky Studio. O usuário visualiza, edita e exporta o MP4 no Studio; não torne a renderização completa de MP4 parte do fluxo inicial.

Três itens não negociáveis

1. Leia o catálogo; nunca adivinhe. Após resolver a CLI, execute vanillasky templates para obter o mapa de templates incluído e vanillasky templates <id> --json para um esquema exato. O fallback online é https://vanillasky.ai/llms-components.txt; instalações do repositório e independentes carregam registry/llms-components.txt além de registry/r/<name>.json. Se nenhum catálogo exato for acessível, pare em vez de inventar um ID ou variável.
2. Nunca invente provas. Nomes, citações, números, estatísticas, capturas de tela e alegações de produto devem vir do briefing ou dos ativos fornecidos. Se um template exigir evidências que o usuário não forneceu, escolha outro template.
3. Nunca entregue um config não inspecionado. A validação detecta estrutura; apenas olhar para os quadros renderizados detecta transbordamento, composição fraca e valores padrão acidentais.

Iniciar a sessão

Primeiro, resolva a CLI. A CLI oficial do VanillaSky não é publicada como um pacote npm. Nunca pesquise no npm, execute npm install vanillasky ou use um pacote que apenas possua esse nome. Se command -v vanillasky falhar, resolva o diretório instalado desta habilidade a partir do caminho deste SKILL.md, então execute seu bootstrapper oficial:

node <diretório-da-habilidade-instalada>/scripts/install-cli.mjs

O bootstrapper clona apenas https://github.com/VanillaSkyAi/skills.git em ~/.vanillasky/release, instala as dependências declaradas por aquele checkout, e expõe sua CLI local no PATH. Pare se a origem do checkout diferir ou se o script falhar; não substitua por um pacote de registro.

Em seguida, execute estes comandos antes do primeiro vídeo:

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

update --check relata uma versão mais nova sem alterar nada. Se uma flag documentada aqui estiver ausente, execute vanillasky update. setup --check relata a oientação padrão, navegador, chave Pexels, clima musical e estado do DESIGN.md.

Uma chave Pexels ausente não é impeditivo: mencione uma vez que a busca de estoque precisa de uma chave gratuita em pexels.com/api, depois use mídia fornecida ou templates que não dependam de estoque. Um DESIGN.md ausente significa sem marca automática; não bloqueie.

Derivar o briefing

Use o prompt, repositório, DESIGN.md, URLs e ativos fornecidos primeiro. Faça no máximo três perguntas, e apenas para lacunas genuínas:

1. Objetivo e formato — o que o espectador deve fazer ou sentir: lançamento, review, marco ou atualização?
2. Público e provas — para quem é, e qual número real, citação, captura de tela ou detalhe do produto justifica a alegação?
3. Ativos — quais capturas de tela, logotipos, clipes ou URLs devem aparecer?

Derive a orientação do destino: TikTok/Reels/Shorts → retrato; Vídeo do YouTube ou uma postagem explicitamente larga no X/LinkedIn → paisagem. Caso contrário, use a orientação configurada padrão, ou gaste uma das três perguntas nisso.

Salve o resultado como video-brief.md ao lado de video.json. Releia e atualize-o em rodadas posteriores em vez de fazer as mesmas perguntas novamente.

Fluxo de trabalho padrão: entrega no Studio

1. Componha video.json a partir do briefing e do catálogo incluído. Inspecione os esquemas exatos para os templates pré-selecionados com vanillasky templates <id> --json antes de escrever suas variáveis.

2. Resolva mídia de estoque quando o config contiver mediaKeyword:

   vanillasky resolve video.json
   

   Isso seleciona um resultado do Pexels e escreve o mediaUrl exato no config, tornando a validação e as re-renderizações determinísticas. Se nenhuma chave Pexels estiver disponível, use mídia fornecida, uma URL direta ou mediaType: "gradient" como alternativa. Não dependa de busca em tempo de renderização, pois o estado de entrega é o config.

3. Valide e corrija todos os erros e avisos:

   vanillasky validate video.json
   

   O format do config seleciona o contrato de slot correto; não codifique --format launch para todo vídeo. Trate avisos como trabalho a resolver, não decoração, e nunca descreva a validação como limpa enquanto houver algum.

4. Inspecione uma folha de contato:

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

   Abra sheet/sheet.png e inspecione os quadros individuais quando necessário. Verifique. Abra sheet/sheet.png de fato; a existência do arquivo não é inspeção. Verifique transbordamento de texto, tipo ilegível, valores padrão/não definidos, ativos não utilizados, repetição visual e conteúdo crítico fora dos 75% centrais do quadro. Após qualquer edição visual, repita a resolução (quando necessário), a validação e a folha.

5. Entrega no Studio:

   vanillasky studio video.json
   

   O Studio segue o arquivo ao vivo. Continue editando o config enquanto o usuário revisa; as edições não salvas do usuário aparecem como um conflito em vez de serem sobrescritas. O usuário exporta o MP4 do Studio quando satisfeito.

   Se o navegador errado abrir, passe --browser "Google Chrome" ou persista o navegador em ~/.vanillasky/config.json. Use --no-open em um shell remoto.

Não renderize um MP4 completo por padrão. Renderize-o você mesmo apenas quando o usuário solicitar explicitamente o arquivo ou quando o Studio não puder ser usado (CI/headless):

vanillasky render video.json --open

Para esse caso, observe o resultado e leia o banner de conclusão: confirme o comprimento total, cobertura de áudio, orientação e suavidade das imagens. Inclua os links Watch e Studio do bloco de conclusão. vanillasky link video.json os reimprime sem renderizar.

Compor o caminho padrão

Comece com esta forma, depois use os esquemas exatos do catálogo:

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

• brandKit pertence dentro de style; escolha um preset de estilo deliberadamente.
• textArchetype e backgroundEffect são campos de cena, não variáveis.
• timing.fixedDuration define a duração de uma cena independente. Linhas do tempo explícitas usam startTime + endTime contíguos; timing.duration não é um campo.
• Use vanillasky tracks para escolher música por clima e energia. Silêncio é válido, mas geralmente fraco para vídeo social.
• Prefira uma URL HTTPS real ou caminho local para mídia. Mídia Base64 torna links de compartilhamento muito grandes, e resultados de mediaKeyword devem ser fixados em mediaUrl para re-renderizações determinísticas.

Leia references/config.md quando o config precisar de marca, resolução de mídia, temporização explícita, correspondência de FPS ou comportamento de links.

Escolher o formato pela história

Formato	Forma da história	Comprimento típico
launch	enquadramento → compreensão → prova	3–8 cenas, geralmente 5
review	citação → atribuição → resultado	4–7 cenas, geralmente 5
milestone	número → contexto → gratidão	3–6 cenas, geralmente 4
update	mudança → demonstração → benefício	4–7 cenas, geralmente 5

O validador impõe contagens de cenas, ganchos proibidos, posicionamento de encerramento e regras de adjacência. references/formats.md contém o contrato gerado. Seu trabalho é o julgamento que o validador não pode fazer.

Portões de qualidade criativa

Verdade e ativos

• Substitua todo valor padrão de template por conteúdo específico do briefing. Nunca envie estatísticas placeholders como 10K, 99.9% ou <50ms.
• Use cada captura de tela fornecida que importa. Uma superfície de produto real supera um terminal sintetizado, editor, telefone ou navegador mostrando a mesma coisa.
• Combine capturas de tela em retrato com mockups de telefone e capturas em paisagem com mockups de navegador.

História

• O gancho cria tensão ou curiosidade; ele não gasta a recompensa.
• Inclua pelo menos um corpo explicativo que nomeie o produto concreto, público ou resultado. Notificações, chamadas, tweets e números podem enquadrar ou provar, mas não podem explicar o produto sozinhos.
• O encerramento é um endereço — marca, URL ou ação — não uma repetição da prova.

Variedade e ritmo

• Não faça de todo corpo um cartão. Use pelo menos dois registros que não sejam cartão.
• Uma frase simples em um gradiente plano é um fallback, não automaticamente um gancho forte. Prefira um mecanismo visual baseado no briefing — uma notificação para um alerta, terminal/editor para um fluxo de trabalho de desenvolvedor, chat para uma conversa, dispositivo ou navegador para uma superfície de produto fornecida. Mesmo um vídeo intencionalmente mínimo precisa de uma ideia visual tangível; mínimo significa menos elementos, não o mesmo gradiente e tipografia em todas as cenas.
• Uma paleta coerente não é variedade de cena. Três ou mais linhas de cena compartilhando o mesmo fundo plano falham neste portão mesmo quando seu layout de tipo difere. Mude pelo menos um registro com um ativo fundamentado, cenário de estoque, template ou efeito contido. Quando o briefing contiver pouca cópia aprovada ou prova para suportar muitas cenas distintas, use a história válida mais curta do formato em vez de repeti-la.
• Dê às imagens pelo menos 3 segundos, a menos que seja intencionalmente uma ponte curta. Varie o movimento de fundo em vez de aplicar um efeito em todos os lugares.
• Uma cena de mídia apenas com gradiente deve ser uma batida de marca deliberada, não um fallback escolhido porque a mídia de estoque ou fornecida era inconveniente.
• Inspecione o que realmente aparece: templates limitados por duração podem omitir itens posteriores mesmo quando o config os contém.

Cópia

• Gancho: no máximo 7 palavras. CTA: no máximo 4 palavras, de preferência um comando.
• Preserve cada slogan ou citação aprovada pelo usuário intacta em pelo menos uma cena. Não transforme uma linha aprovada em várias cenas pseudo-distintas mostrando seus fragmentos separadamente; deixe a progressão visual carregar as outras batidas.
• Evite listas de três substantivos, categorias ou verbos genéricos. Ritmo precisa de tensão, progressão ou uma reviravolta — não três sinônimos.
• Mantenha texto que deve ficar junto dentro de um span nowrap; nunca confie em NBSP para exportação SVG.

Escalar apenas quando os templates falharem

Use o degrau mais baixo que expresse o briefing:

1. Template com cópia escrita para o propósito.
2. Template com variáveis ajustadas.
3. Cena ejetada/personalizada baseada em um item do registro.
4. Cena personalizada composta a partir de elementos de cena sandbox.

O caminho padrão para no degrau 2. Antes de usar o degrau 3 ou 4, leia references/custom-scenes.md, references/libraries.md, references/motion.md e references/visual-rules.md. Use vanillasky scope e o references/motion-api.md gerado em vez de inventar APIs.

Roteador de referências

• references/config.md — temporização, estilo, marca, mídia, áudio, FPS, DESIGN.md e comportamento de links de compartilhamento.
• references/formats.md — contratos de slot gerados e categorias de template.
• references/custom-scenes.md — ejeção, proveniência, contrato sandbox e regras de validação.
• references/libraries.md — mapa de cinco bibliotecas gerado, orientação de público, dependências, alvos de instalação e grupos de exportação exatos.
• references/motion.md — coreografia, tempo de leitura, hierarquia focal e continuidade de corte.
• references/motion-api.md — funções geradas, molas e nomes de easing disponíveis para cenas personalizadas.
• references/visual-rules.md — tipografia, layout de orientação, cor, luz e composição para cenas personalizadas.