/graph: seus números se tornam um gráfico animado
O usuário fornece números de qualquer forma: Mar 200K, Abr 650K, Nov 1.5M, uma tabela colada, um arquivo CSV, uma captura de tela ou uma frase. Você os transforma em uma pequena especificação, verifica um quadro, renderiza o vídeo e entrega um MP4 silencioso (cerca de 5 segundos).
${CLAUDE_SKILL_DIR} abaixo é a pasta deste skill (onde este SKILL.md está). Se seu ambiente não preencher isso, 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
Isso leva alguns segundos; execute se não tiver certeza de que este computador já foi configurado. "ready": true significa que está pronto. 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 o Google Chrome ou Edge não estiver instalado, cerca de 150 MB) e python3 -m pip install imageio-ffmpeg (apenas quando o ffmpeg estiver ausente). 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, depois ~/.animate-skills/bin/python -m playwright install chromium se necessário. No Windows, use py em vez de python3. Não é possível usar navegador aqui (por exemplo, no sandbox do aplicativo Claude)? Veja o final deste arquivo.
1. Escreva a especificação
Salve graph-<tópico>.json:
{
"title": "Meus seguidores no Instagram",
"subtitle": "2026",
"data": [["Mar", 200000], ["Abr", 650000], ["Nov", 1500000]],
"source": "Instagram",
"theme": "night"
}
Regras:
- Use os números exatos do usuário. Nunca invente, suavize, arredonde ou preencha valores. Se algo for realmente ambíguo (qual coluna, qual unidade), faça uma pergunta curta; caso contrário, siga em frente.
- Escreva números completos: 650K →
650000, 1.5M →1500000, 12% →12com"suffix": "%". - Mantenha os rótulos curtos (até ~8 caracteres fica melhor):
Mar,Q1,2024,Seg. - O título diz o que os números são, nas palavras do usuário quando possível (no máximo cerca de 30 caracteres;
|força uma quebra de linha). Adicionesubtitleesourceapenas quando o usuário os forneceu ou eles são óbvios a partir da solicitação ("meus seguidores no Instagram" → fonte Instagram); não os invente.
| Campo | O que faz |
|---|---|
title, subtitle | Título e uma pequena linha abaixo (período, unidade). |
data | [["rótulo", número], ...] ou [{"label": "...", "value": n}, ...], em ordem. |
type | Deixe de fora para automático: barras até 10 valores; uma linha para séries mais longas e para valores que mudam pouco em relação ao seu tamanho (um peso indo de 210 → 178, um preço, uma temperatura), onde a linha amplia a faixa. "bar" ou "line" para forçar. |
prefix, suffix | Unidades: "$", "€", "%", " kg". |
decimals | Forçar decimais. Padrão: cada valor mantém os seus. |
compact | O padrão mostra 10.000+ como 12K / 1.5M / 2B. false para números completos. |
callout | Deixe de fora para a tag de crescimento automática do primeiro ao último valor (↑ 7,5x; números inteiros a partir de 10x, ↑ 77x; ↑ 32%; ↓ 18%). Um texto curto de sua autoria ("De volta ao lucro"), ou null para nenhum. |
good | "down" quando menor é melhor (peso perdido, dívida paga, custos, tempos de corrida): uma queda recebe uma tag verde em vez de vermelha. |
highlight | Qual barra é dourada: "last" (padrão), "max", um índice ou "none". |
theme | night (azul marinho escuro, barras coral; padrão), light, sunset, mint. |
source | Pequena nota "Fonte: ..." abaixo do gráfico. |
size | "1080x1920" (vertical, padrão), "1080x1080", "1920x1080". |
duration, fps | Segundos (padrão ~5) e quadros por segundo (padrão 30; 60 é mais suave, mas mais lento). |
Exemplos: examples/instagram-followers.json (barras), examples/website-visitors-line.json (linha).
2. Verifique o último quadro
python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" graph-<tópico>.json --still end --out graph-<tópico>-check.png
Observe a imagem (leva 2-3 segundos para criar): rótulos legíveis, nada sobreposto, os números exatamente os do usuário. Corrija a especificação e verifique novamente se não estiver bom.
3. Renderize o vídeo
python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" graph-<tópico>.json --out graph-<tópico>.mp4
Cerca de 10-20 segundos. Exclua a imagem de verificação.
4. Entregue
Dê ao usuário o caminho do MP4 (mostre-o se seu ambiente puder exibir arquivos). Ele não tem som, pronto para música ou narração. Ofereça uma variação rápida (outro tema, tamanho quadrado, uma linha em vez de barras).
Sem navegador aqui? (por exemplo, no 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 alternativa: python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" graph-<tópico>.json --html graph-<tópico>.html. A página reproduz o gráfico em qualquer navegador (mostre-a como um artefato se possível). Informe ao usuário que o MP4 precisa do Claude Code em um computador ou de uma gravação de tela da página.