/minimal-graphics: uma ideia explicada com formas e pontos em movimento
O usuário dá uma ideia ("como uma ideia viraliza", "como um projeto de lei se torna lei", "o ciclo da água", "para onde vai sua atenção"). Você escolhe o padrão de movimento que a representa, escreve uma pequena especificação, verifica um frame, renderiza o vídeo e entrega um MP4 silencioso (5-7 segundos).
${CLAUDE_SKILL_DIR} abaixo é a pasta desta skill (a pasta onde este SKILL.md está). Se seu ambiente não preencher, use o caminho dessa pasta. Salve tudo na pasta atual do usuário, ou na pasta que ele nomear.
0. Verificação de configuração
python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" --check
Leva alguns segundos; execute se não tiver certeza de que este computador está configurado. "ready": true significa que pode prosseguir. Caso contrário, execute os comandos listados em "fix", informando ao usuário que é uma instalação única: python3 -m pip install playwright (o driver do navegador), python3 -m playwright install chromium (apenas quando Google Chrome ou Edge não estiver instalado, cerca de 150 MB) e python3 -m pip install imageio-ffmpeg (apenas quando ffmpeg estiver faltando). Se o pip recusar com "externally managed environment", crie um ambiente privado uma vez e use seu Python para cada comando: python3 -m venv ~/.animate-skills && ~/.animate-skills/bin/pip install playwright imageio-ffmpeg, então ~/.animate-skills/bin/python -m playwright install chromium se necessário. No Windows, use py ao invés de python3. Sem navegador possível aqui (por exemplo, no sandbox do aplicativo Claude)? Veja o final deste arquivo.
1. Escolha o padrão
| Padrão | Mostra | Adequado para | Campos |
|---|---|---|---|
spread | Um ponto alcança 2-4 outros, cada um destes alcança mais, anel por anel | Ideias virais, boca a boca, reações em cadeia, referências, coisas que dobram | branches (2-4, padrão 3), depth (2-5, padrão 4), sequence (opcional, rótulos curtos por anel, ex. ["1","3","9","27","81"] ou ["$1k","$2k","$4k"], exibidos em uma linha abaixo do título conforme cada anel acende; alguns caracteres cada) |
flow | Formas numeradas em ordem, um ponto viajando de cada uma para a próxima, depois um fluxo constante | Como algo funciona, um processo, um pipeline, uma receita | steps: 2-6 rótulos curtos; shapes (as formas são decoração: ["circle"] torna todas círculos) |
cycle | Passos em um loop com um ponto que orbita continuamente | Ciclo da água, loop de hábito, loops de feedback, estações, ciclos de sono | steps: 3-6 rótulos curtos; center: uma palavra no meio |
converge | Muitos pontos fluindo para um círculo que cresce (ou "direction": "out": um círculo enviando pontos para vários) | Para onde sua atenção, tempo ou dinheiro vão; muitas entradas em um resultado | sources: 2-6 rótulos (opcional); weights: quantos pontos cada um recebe; center: a palavra no círculo; count: pontos (padrão ~40) |
compare | Duas ou três quantidades lado a lado, como pontos (um por unidade) ou como círculos dimensionados pela quantidade | Quantidades "X vs Y": açúcar, custo, tempo, calorias | groups: [{"label": "...", "value": n, "unit": "..."}]; highlight: índice daquele a colorir |
Se nenhum se encaixar bem, use o mais próximo e diga isso em uma linha; não force uma imagem enganosa. Um padrão mostra a forma de uma ideia; a linha takeaway diz o ponto em palavras. Ideias sobre duas forças se equilibrando (oferta e demanda, equilíbrio trabalho-vida) não têm padrão próprio: mostre o loop que as estabiliza como um cycle, ou diga isso.
2. Escreva a especificação
Salve minimal-<topic>.json:
{
"title": "Como uma ideia viraliza",
"pattern": "spread",
"branches": 3,
"depth": 4,
"takeaway": "Cada pessoa conta para mais três",
"theme": "coral"
}
Campos comuns: title (a ideia como um título curto ou pergunta, até ~40 caracteres), subtitle (linha pequena opcional abaixo do título), takeaway (o ponto de uma linha; aparece abaixo do título quando a animação termina, e os longos encolhem para caber), theme (coral padrão, ink preto, paper off-white, blue, mint), size ("1080x1920" padrão, "1080x1080", "1920x1080"), duration (segundos; padrão 5-6, mais com um takeaway; um mais longo apenas segura o final por mais tempo), speed (0.7 = tudo 30% mais lento, 1.3 = mais rápido), fps (padrão 30).
Regras de escrita:
- Rótulos são minúsculos: até 4 palavras cada (rótulos de sequência: alguns caracteres). Sem jargão.
- Números devem ser verdadeiros. Se a ideia precisar de números que você não tem certeza, deixe-os de fora ou diga que são ilustrativos.
- Uma ideia por vídeo. Se a ideia do usuário tiver duas partes, faça dois vídeos (duas especificações).
Exemplos em examples/: idea-goes-viral.json, bill-becomes-law.json (flow), water-cycle.json (cycle), where-attention-goes.json (converge), soda-vs-apple.json (compare).
3. Verifique dois frames
python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" minimal-<topic>.json --still 2 --out minimal-<topic>-check1.png
python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" minimal-<topic>.json --still end --out minimal-<topic>-check2.png
--still leva segundos, ou end. Olhe para eles: rótulos legíveis e sem cortes, a imagem diz a ideia? Ajuste e verifique novamente se não.
4. Renderize o vídeo
python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" minimal-<topic>.json --out minimal-<topic>.mp4
Cerca de 10-25 segundos. Exclua as imagens de verificação.
5. Entregue
Dê ao usuário o caminho do MP4 (mostre-o se seu ambiente puder exibir arquivos). Não tem som, pronto para música ou narração. Ofereça uma variação (outro padrão ou tema).
Sem navegador aqui? (por exemplo, o sandbox do aplicativo Claude)
Se a verificação de configuração não conseguir executar um navegador, escreva a animação como uma página: python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" minimal-<topic>.json --html minimal-<topic>.html. A página é reproduzida em qualquer navegador (mostre-a como um artefato se puder). Informe ao usuário que o MP4 precisa do Claude Code em um computador, ou uma gravação de tela da página.