/stick-figure: um desenho explicativo com figuras de palito
O usuário dá uma ideia ou pergunta ("por que os bocejos são contagiosos?", "por que gatos derrubam coisas das mesas?", "por que procrastinamos?"). Você escreve a resposta em uma linha, monta uma pequena cena que a mostra, verifica alguns quadros, renderiza o vídeo e entrega um MP4 silencioso (5-7 segundos).
${CLAUDE_SKILL_DIR} abaixo é a pasta desta skill (a que contém este SKILL.md). Se seu ambiente não preenchê-la, 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 se este computador já foi configurado. "ready": true significa ok. 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 todos os comandos: 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. Sem navegador possível aqui (por exemplo, no sandbox do aplicativo Claude)? Veja o final deste arquivo.
1. Planeje a cena (brevemente)
- Título: a pergunta ou ideia, curto (até ~40 caracteres).
- Resposta: a explicação em uma linha, verdadeira e simples (até ~45 caracteres). Aparece cerca de um segundo depois.
- A cena: 1-4 personagens atuando a resposta em 3-8 movimentos ao longo de 5-7 segundos. Mostre acontecendo: bocejos se espalhando de pessoa para pessoa, um gato empurrando uma caneca da mesa, um cachorro acordando e abanando o rabo. O último movimento é a conclusão e fica na tela até o final.
2. Escreva a especificação
Salve stick-<topic>.json. Exemplo (examples/knock-things-off.json):
{
"title": "Por que os gatos derrubam coisas das mesas?",
"answer": "Instinto de caça, e chama sua atenção",
"scene": "sala",
"props": [{"type": "table", "x": 0.62}, {"type": "cup", "x": 0.70, "on": "table", "wobbleAt": 1.6, "fallAt": 2.15},
{"type": "plant", "x": 0.08}],
"figures": [{"id": "gato", "kind": "cat", "x": 0.52, "on": "table", "head": "#F4A261", "hatColor": "#F4A261"},
{"id": "voce", "x": 1.2, "label": "Você", "hat": "hair", "hatColor": "#6B4423"}],
"beats": [
{"who": "gato", "do": "look", "at": 0.0, "for": 1.0, "to": 0.7},
{"who": "gato", "do": "swipe", "at": 1.0, "for": 1.2, "to": 0.7, "say": "Tchau"},
{"who": "voce", "do": "run", "at": 2.3, "for": 0.8, "to": 0.86},
{"who": "voce", "do": "surprised", "at": 3.1, "for": 0.9, "say": "Minha caneca!"},
{"who": "gato", "do": "sit", "at": 3.3, "for": 1.0},
{"who": "voce", "do": "point", "at": 4.1, "for": 1.2, "to": "gato"},
{"who": "gato", "do": "love", "at": 4.4, "for": 1.0}
],
"arrows": [{"from": "gato", "to": "voce", "at": 3.6, "for": 0.4}]
}
Mais: examples/contagious-yawns.json (três pessoas), examples/procrastination.json (um escritório, alguém entrando), examples/dog-wags.json (um cachorro e uma criança no parque).
Cena: street (céu, calçada, rua), park (sol, colinas, grama), sala, office (janela com uma cidade), classroom (adicione "board": "texto" para o quadro-negro), night (estrelas e lua), plain (adicione "background": "#hex").
Figuras (x de 0 = borda esquerda a 1 = borda direita; use -0.2 ou 1.2 para começar fora da tela e entrar). Três pessoas cabem confortavelmente em um vídeo vertical (x 0.2, 0.5, 0.8); uma quarta precisa de scale ~0.85 e espaçamento ~0.22. Um cachorro ou gato de perfil tem cerca de 0.35 da largura do quadro (x é seu corpo; o nariz está ~0.2 à frente): pare um animal de estimação ~0.3 da pessoa para quem ele corre. Mantenha os rótulos de nome curtos ("João", não "O João"):
kind:person(padrão),cat,dog(de perfil, cerca de um terço da altura de uma pessoa).id,x,label(um nome sob seus pés: "Você", "Seu cérebro"),scale(0.6-0.8 para uma criança),facing(left/right; caso contrário, eles olham para o centro, depois para onde se moveram, apontaram ou balançaram por último).on: ficar em móveis:table,desk,bench,shelf,bed(coloque o móvel no mesmo x).- Pessoas:
hat(cap,tophat,beanie,crown,bow,hair),hatColor(também a cor do cabelo),head(cor da pele),glasses(true),tie(uma cor). Animais de estimação:head(cor do pelo),hatColor(cor da orelha).
Movimentos ({"who", "do", "at", "for", "to", "say"}, em segundos): to é o id de outra figura ou um x (0-1).
do (pessoas) | Como fica | do (pessoas) | Como fica |
|---|---|---|---|
walk, run | Move-se para to | talk | Boca mexendo, uma mão gesticulando |
wave | Acena, sorriso grande | yawn | Braços para cima, bocejo grande, olhos fechados |
look | Vira a cabeça para to | point | Aponta para to (a cabeça de uma figura, ou altura da mesa em um x) |
think | Mão no queixo (com say: um balão de pensamento) | shrug | "Quem sabe?" |
jump | Pula de alegria | cheer | Braços para cima em V |
surprised | Pula para trás, "!" | sad | Cabeça baixa, uma lágrima |
sleep | Olhos fechados, Zzz | laugh | Pulando, sorriso grande |
dance | Dançando, nota musical | idea | Braço para cima, lâmpada |
love | Coração | fall | Cai e fica caído |
raise | Uma mão para cima (votando, perguntando, "eu!") | write | Escrevendo ou assinando em uma mesa |
relabel | Muda o crachá: {"who": "joao", "do": "relabel", "at": 4, "text": "Lei"} |
Animais de estimação: walk, run, jump, sit, swipe (um balanço de pata para to, para derrubar coisas), sleep (enrolado, Zzz), meow/bark/talk (boca aberta; adicione say), surprised (costas arqueadas, "!"), look (vira-se para to), wag (feliz, rabo abanando), love, idea, sad.
say coloca um balão de fala sobre aquela figura durante aquele movimento (até 5 palavras; think faz um balão de pensamento; o balão substitui o pequeno ícone do movimento; balões ficam longe dos rostos das outras pessoas). O último movimento de cada figura mantém sua pose até o final (exceto andar, correr, falar e bocejar), e a última linha dita na cena também fica, então termine na conclusão. point aponta para a cabeça de uma figura distante e para o peito de uma próxima.
Adereços ({"type", "x", ...}): móveis e peças de cenário bus-stop, tree, bench, desk (com um laptop), table, door, sign (com text), car ("drive": 1 o faz passar), house, plant, lamp, tv, bed; e objetos pequenos cup, mug, glass, vase, bottle, plate, ball, book, phone, box, paper (um documento). Objetos pequenos ficam no chão ou "on": "table" (ou desk, bench, shelf, bed; dê a eles um x dentro da largura desse móvel, que é cerca de ±0.15 em torno de seu x); "wobbleAt": s faz um balançar, "fallAt": s o derruba ("fallDir": -1 para a esquerda); copos, copos altos, vasos, garrafas e pratos quebram com um CRASH ("sound": "SMASH!" muda a palavra), bolas quicam para longe. Também color, scale, front: true (desenhado na frente dos personagens).
Setas ({"from", "to", "at", "for", "color", "hold"}): uma seta pontilhada de uma cabeça a outra, como "passa adiante"; hold é quanto tempo ela fica após o desenho (padrão 0.9 s).
Outros campos: answer quebra onde couber (cerca de 24 caracteres por linha); coloque um | onde você quer a quebra. answerAt (segundos; padrão ~1.1), size ("1080x1920" padrão, "1080x1080", "1920x1080"), duration (padrão: o fim do último movimento + 1.3 s, no mínimo 5), fps (padrão 30).
Dicas de encenação: comece um movimento em 0.0 para que ninguém fique congelado no início; sobreponha os movimentos um pouco para que algo esteja sempre se movendo; cada movimento 0.8-1.6 s; coloque a derrubada ou o momento-chave no meio e a reação depois.
3. Verifique três quadros
python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" stick-<topico>.json --still 0.5 --out stick-<topico>-check1.png
python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" stick-<topico>.json --still 2.5 --out stick-<topico>-check2.png
python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" stick-<topico>.json --still end --out stick-<topico>-check3.png
--still recebe segundos, ou end; verifique também o tempo do momento-chave (a derrubada, a revelação). Olhe para eles: personagens na tela e virados para a direção certa, ninguém andando através de outro, balões não cobrindo rostos ou o título, a história legível sem som. Ajuste posições ou tempo e verifique novamente se não estiver.
4. Renderize o vídeo
python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" stick-<topico>.json --out stick-<topico>.mp4
Cerca de 10-25 segundos. Delete as imagens de verificação.
5. Entrega
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 final, outra cena).
Sem navegador aqui? (por exemplo, no sandbox do aplicativo Claude)
Se a verificação de configuração não conseguir rodar um navegador, escreva a animação como uma página: python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" stick-<topico>.json --html stick-<topico>.html. A página roda em qualquer navegador (mostre-a como um artefato, se possível). Diga ao usuário que o MP4 precisa do Claude Code em um computador, ou de uma gravação de tela da página.