GraySilver/explainloop

O que explainloop faz?

Crie animações originais e legíveis que expliquem uma afirmação, sequência, comparação ou mudança no texto fornecido. Preserve o status factual da fonte e a seção, quantidade, estilo, tamanho e destino escolhidos pelo usuário. A referência visual é um vocabulário de design, não um template a ser copiado cena por cena.

Entradas e seleção

1. Leia o texto completo fornecido. Para uma URL, use as ferramentas de navegação disponíveis; se o corpo não puder ser recuperado, solicite o texto. Para Markdown/TXT local, leia o arquivo e as legendas adjacentes; scripts/outline.mjs --input /caminho/absoluto/artigo.md [--section "Título"] informa os intervalos de cabeçalhos, contagem de caracteres e se um esboço interno expandido é útil. Não infira o conteúdo do artigo a partir do título.
2. Se o usuário nomear um cabeçalho, parágrafo, citação ou intervalo, selecione apenas essa passagem para os tópicos do GIF; use o texto ao redor apenas para resolver contexto. Caso contrário, identifique até três relacionamentos distintos que valham a pena animar. Prefira um evento observável, antes/depois, causa/efeito, comparação ou mudança numérica em vez de um slogan. Produza de 1 a 3 GIFs; nunca preencha a contagem com tópicos fracos.
3. Construa um mapa de evidências compacto para cada GIF: passagem exata da fonte ou localização do parágrafo, status da afirmação (fato, medição, resultado relatado, proposta ou opinião), objeto focal, o que muda visivelmente e uma conclusão de uma frase. Mantenha unidades e qualificadores. Escolha um GIF apenas quando essa mudança ensinar algo que um quadro estático deixaria pouco claro. Não invente dados, UI de produtos, citações ou resultados. Várias versões de proporção de um mesmo tópico devem preservar este mapa.
4. Quando o corpo selecionado exceder 6000 caracteres após a remoção de marcação ou tiver mais de cinco seções de nível superior, faça um esboço interno expandido do tópico antes de escolher os 1-3 GIFs mais fortes. Continue automaticamente; pergunte apenas quando a passagem solicitada ou uma afirmação material permanecer ambígua após a leitura da fonte. Uma seção específica selecionada é medida por si só.

Leia content-planning.md ao selecionar tópicos ou lidar com incertezas. Esta skill não requer um script de vídeo narrado completo ou aprovação de locução.

Decisões visuais

• Leia scene-recipes.md e visual-quality.md antes de compor uma cena. Estabeleça o relacionamento suportado, objeto focal, ordem de leitura, hierarquia de tipos, estados dos widgets e batidas de movimento. Projete primeiro o quadro final completo, depois faça o movimento anterior levar a ele. Para uma nova cena, compare internamente duas composições de miniatura materialmente diferentes e escolha aquela que explica a fonte com menos detalhes concorrentes. Leia design-directions.md ao selecionar uma família visual específica do assunto e backgrounds.md ao selecionar o tratamento da tela. Um preset de estilo fornece tokens; a cena ainda precisa de um layout original. Não coloque todos os assuntos dentro do mesmo arranjo kit.page cabeçalho/corpo/rodapé.
• Comece pelas instruções visuais do usuário. Para uma solicitação que produz vários GIFs ou proporções, escolha um estilo de lote antes de escrever as cenas: um único preset de styles.md e fundo compartilhado, paleta, papéis de fonte, tratamento de linha/raio e caráter de movimento. Cada cena nesse lote usa o mesmo meta.style e styleOverrides principais compartilhados; varie a composição e os objetos semânticos para explicar cada tópico. Não escolha um novo preset para cada GIF. Use estilos mistos apenas quando o usuário os solicitar explicitamente.
• Quando a tipografia carregar a cena, leia font-catalog.md. Compare dois pares de fontes instalados em relação à passagem e registre os papéis escolhidos na cena. Verifique a face CJK real resolvida e os glifos antes de renderizar; não substitua silenciosamente uma fonte de exibição ausente. O catálogo também lista fontes abertas instaladas independentemente opcionais. A skill não baixa ou agrupa fontes.
• Componha objetos concretos usando components.md: pessoas, mensagens, documentos, tarefas, linhas do tempo, medições e seus relacionamentos. Use os widgets mais ricos de e-mail, calendário ou mensagem quando a explicação precisar de detalhes de UI; não invente a interface de um produto real. Use o subconjunto Lucide empacotado para ícones pequenos familiares. Consulte sources-and-licenses.md antes de adicionar qualquer arte externa.
• Padrão para objetos vetoriais originais. Use imagens fornecidas, uma ilustração licenciada adequadamente ou arte bitmap gerada apenas quando um assunto concreto não puder ser explicado claramente com componentes vetoriais. Mantenha as imagens consistentes com o estilo selecionado e registre sua fonte. Não substitua silenciosamente um ícone genérico por um assunto real específico.
• Cada ação visível deve responder o que mudou, para onde um objeto foi ou como o resultado segue. Revele partes relacionadas a partir de um progresso de movimento quando elas se moverem como uma unidade; deixe as informações importantes se estabelecerem em uma ordem deliberada e inverta essa ordem na saída. Escolha um dos dez tratamentos de tela em backgrounds.md somente após reservar uma área clara para o objeto focal e o texto; combine sua geometria com o relacionamento do artigo e use as condições de rejeição do catálogo. Mantenha o texto legível na largura do artigo. Não mostre valores de gráfico sem dados de origem. Evite pausas estáticas longas e um salto abrupto do primeiro/último quadro quando eles fizerem o loop parecer quebrado. Consulte failure-cases.md ao revisar um defeito semelhante.

Fonte da cena e renderização

A entrega padrão é um GIF silencioso de 1600×900, 16:9, 30 fps, 4–7 segundos. As preferências do usuário substituem esses padrões. Outros perfis de saída incorporados são 4:3 a 1200×900, 1:1 a 1200×1200 e 9:16 a 900×1600; aceite também um tamanho de pixel personalizado. Produza apenas as proporções solicitadas; se nenhuma for declarada, use 16:9. Não reduza silenciosamente a resolução ou fps para diminuir o tamanho do arquivo.

Escreva um arquivo .scene.mjs que exporte meta e draw(t, kit); meta.width/height são a tela de design lógica, enquanto --output-size define os pixels rasterizados. draw recebe segundos decorridos e retorna um SVG completo de kit.page(...) ou kit.svg(...). Coloque o mapa de evidências em meta.sourceRefs. A fonte deve ser determinística: mesma cena e tempo, mesmo SVG. Veja scene-format.md, assets/examples/message-filter.scene.mjs e assets/examples/multi-ratio/.

Para várias proporções em uma solicitação, crie uma cena editável separada para cada proporção e renderize cada versão solicitada. Recomponha o layout para espaço quadrado ou retrato; nunca estique, corte ou letterbox uma cena paisagem como resultado final. A cópia da tela pode ser encurtada para o quadro mais estreito, mantendo as mesmas evidências, números, status da afirmação e conclusão. Mantenha a sequência causal da animação consistente entre as versões.

A menos que o usuário escolha outro destino, salve <slug-do-artigo>-01.gif e <slug-do-artigo>-01.scene.mjs (e números de tópicos consecutivos) em generate/images/ sob o diretório de trabalho atual para uma saída única 16:9. Para uma solicitação com várias proporções, acrescente -16x9, -4x3, -1x1 ou -9x16 antes de ambas as extensões; use -LARGURAxALTURA para uma proporção personalizada. Mantenha os quadros de trabalho em um diretório temporário. A fonte da cena é a entrega editável; não deixe quadros PNG gerados ao lado dela.

Resolva o diretório desta skill como SKILL_ROOT a partir do caminho da skill carregada.

Para um lote de duas ou mais cenas, primeiro execute node "$SKILL_ROOT/scripts/check-batch.mjs" --scene /caminho/absoluto/primeira.scene.mjs --scene /caminho/absoluto/segunda.scene.mjs (repita --scene para cada cena). Corrija qualquer incompatibilidade de preset ou token compartilhado antes de renderizar. Isso verifica os metadados das cenas. Quando a percepção de imagem estiver disponível, execute scripts/preview-batch.mjs com os mesmos argumentos --scene e compare os quadros de saída reais para cores locais da cena, fontes, detalhes de widgets e tratamento de fundo. Pule a verificação de estilo de lote apenas quando o usuário solicitou explicitamente estilos mistos.

Renderize e inspecione cada GIF solicitado:

node "$SKILL_ROOT/scripts/render.mjs" --scene /caminho/absoluto/para/nome.scene.mjs --out /caminho/absoluto/para/nome.gif --output-size 1600x900
node "$SKILL_ROOT/scripts/inspect.mjs" /caminho/absoluto/para/nome.gif

render.mjs requer Node, rsvg-convert, ffmpeg e ffprobe; ele verifica a disponibilidade e relata uma ferramenta ausente em vez de instalá-la. O tamanho de saída solicitado deve ter a mesma proporção da tela lógica da cena, com cada dimensão de pixel no máximo 4096. Use --poster /caminho/absoluto/para/preview.png quando uma prévia estática for útil.

Para geração com foco em qualidade, siga o fluxo de trabalho de pré-visualização e revisão condicional em scene-recipes.md. Se este agente puder realmente ver pixels de imagem, execute node "$SKILL_ROOT/scripts/preview.mjs" --scene /caminho/absoluto/para/nome.scene.mjs --temporal-strip [--display-width 720], inspecione os quatro quadros-chave e oito quadros amostrados e corrija defeitos visuais concretos antes da renderização final. Faça no máximo duas rodadas de revisão visual. Se o agente não puder ver pixels de imagem, pule a revisão visual e a prévia; renderize e execute inspect.mjs apenas para verificações técnicas. Playwright não é necessário. inspect.mjs verifica dimensões, contagem de quadros, duração, decodificação completa, quadros repetidos e a execução estática exata mais longa; ele não pode julgar o polimento visual.

Entregue

Forneça links para cada GIF e sua fonte de cena. Indique qual passagem da fonte ele ilustra, qualquer inferência importante, o estilo escolhido e dimensões/fps/duração/tamanho do arquivo reais. Se uma seção de entrada foi especificada, confirme que cada cena vem dela. Não afirme saída renderizada ou revisão visual a menos que tenham sido realmente concluídas; quando a revisão visual não estava disponível, diga isso explicitamente.

Esta skill é para GIFs silenciosos curtos. Use um fluxo de trabalho de diagrama estático para uma única imagem de arquitetura imóvel e um fluxo de trabalho de vídeo para MP4 narrado.