MedSalahArfa1/linkedin-animated-diagram

Diagrama Animado para LinkedIn

Produz um GIF em loop (retrato 4:5, 1080x1350) mostrando um processo como nós de ícones conectados por conectores pontilhados animados, uma ondulação de "pulso" percorrendo as etapas, um fundo com círculos suaves brilhantes em dois cantos opostos mais ícones de assunto muito sutis, e na parte inferior um cartão de autor (retângulo arredondado com borda tracejada animada) acima de uma chamada para ação centralizada de Curtir / Comentar / Repostar / Seguir. O usuário fornece um assunto; você cuida do conteúdo, estrutura e design após uma breve coleta de informações.

A renderização é determinística: você escreve uma especificação JSON e o scripts/render.py faz o layout, ícones, fontes, formatação de árabe, animação e compressão do GIF. Seu trabalho é o raciocínio: conteúdo preciso, fluxo claro, um design que se adapte ao assunto.

SKILL_DIR abaixo significa a pasta que contém este SKILL.md. Caminhos como /home/claude (arquivos de trabalho) e /mnt/user-data/outputs (entregáveis, mostrados com present_files) são para o Claude.ai. Em outros ambientes como o Claude Code, use uma pasta de trabalho e uma pasta de saída no projeto atual e informe ao usuário onde o GIF foi salvo.

Fluxo de Trabalho

1. Configuração (uma vez por sessão)

bash SKILL_DIR/scripts/setup.sh

Instala o renderizador, ferramentas de GIF, fontes (Poppins, Bebas Neue, DM Serif Display, IBM Plex Mono, Tajawal para árabe) e ~2.300 ícones Lucide. Avisos são não fatais.

2. Coleta de Informações (duas rodadas rápidas)

Escolhas pessoais alteram o arquivo final, então colete-as antes de projetar. Se uma resposta já for conhecida de conversas anteriores (ou do que você sabe sobre o usuário), confirme-a em vez de perguntar do zero, e reutilize todas as respostas para diagramas posteriores na mesma conversa. Nunca invente um nome ou link.

Rodada 1: pergunte com a ferramenta interativa de opções (ask_user_input_v0) quando disponível; ela permite no máximo 3 perguntas, então use exatamente estas:

1. Badge. Se nome e link do LinkedIn forem conhecidos, mostre-os na pergunta e ofereça: "Nome + link + minha foto" / "Nome + link, sem foto" / "Alterar nome ou link" / "Sem badge". Se desconhecidos, peça nome e link do LinkedIn no texto da mensagem antes da ferramenta e ofereça: "Adicionar minha foto" / "Sem foto" / "Sem badge".
2. Fundo: "Claro" / "Escuro".
3. Idioma: o próprio idioma do usuário primeiro, depois Inglês / Francês / Árabe conforme relevante, mais "Outro (vou digitar)".

Sem essa ferramenta, pergunte as mesmas coisas em uma mensagem curta.

Rodada 2: paleta, mostrada no fundo escolhido:

• Escolha as 3 paletas cujas cores melhor se adequam ao assunto (render.py --palettes). Todas são nomeadas pela cor.

  • Premium (combinações refinadas e de alto contraste que parecem naturais no feed do LinkedIn): Azul LinkedIn, Azul Marinho & Dourado, Índigo & Coral, Esmeralda & Ardósia, Borgonha & Dourado, Verde-azulado & Coral, Ameixa & Rosa, Carvão & Azul Elétrico.
  • Padrão: Azuis, Verde-azulado & Ciano, Azul & Verde-azulado, Verdes, Verde & Marrom, Vermelhos & Laranjas, Âmbar & Dourado, Roxos, Rosa & Roxo, Azul & Laranja, Vermelho & Roxo, Multicolorido, Escala de Cinza.

  Para assuntos profissionais (IA, tecnologia, negócios, carreiras) inclua pelo menos 2 paletas premium entre as 3. Pares premium de duas cores (ex.: Índigo & Coral) são adequados para comparações "X vs Y": cada lado recebe sua própria cor. Marque opções premium como tal quando as oferecer. Renderize e apresente uma folha de amostras:

  python3 SKILL_DIR/scripts/render.py --swatches /mnt/user-data/outputs/palettes.png --mode dark --swatch-names indigo-coral navy-gold blue-teal
  

• Se o usuário quiser sua foto e ainda não a enviou: não use a ferramenta de opções (uma resposta tocada não pode carregar um anexo). Pergunte em texto simples: "Anexe sua foto de perfil e diga o número da paleta, ou digite seus próprios códigos hex."

• Caso contrário: pergunte com a ferramenta de opções: os 3 nomes das paletas mais "Personalizado (vou digitar códigos hex)".

• Paletas personalizadas: aceite de 1 a 4 códigos hex em qualquer forma comum (#FF6B35, ff6b35, #f63), ou cores descritas em palavras (traduza para hex você mesmo e diga quais códigos usou). A seção 1 usa a cor 1, a seção 2 a cor 2, cores extras podem colorir palavras do título (s1, s2). Se o renderizador avisar sobre baixo contraste no fundo escolhido, informe o usuário e proponha o tom legível mais próximo em vez de alterar silenciosamente as cores.

Foto de perfil: uploads vão para /mnt/user-data/uploads/. Veja a imagem para confirmar que é um retrato utilizável (JPG, PNG ou WEBP). O renderizador a corta em um círculo, tendendo para o topo da imagem onde os rostos geralmente estão. Se claramente não for um retrato ou for muito pequena/borrada, diga e ofereça o badge apenas com nome. Sem foto, o cartão do autor mostra apenas o nome e o link, centralizados, sem círculo.

3. Modelar o Conteúdo

Escreva todo o texto no idioma escolhido. Se o assunto envolver fatos sobre os quais você não tem certeza (ferramentas recentes, arquiteturas específicas, números), pesquise primeiro. Depois escolha uma estrutura:

• Um processo ("Como funciona a implantação do YOLO") → 1 seção, 6 a 10 etapas.
• Comparação ("RAG vs CAG") → 2 seções, 5 a 8 etapas cada, no mesmo nível de detalhe.
• Três variantes ("3 maneiras de ajustar fino") → 3 seções, 3 a 5 etapas cada.

Rótulos das etapas: 1 a 3 palavras ("Incorporar Consulta", "Banco Vetorial"). Use um grupo paralelo (duas etapas lado a lado) apenas onde o processo real se bifurca, no máximo uma ou duas por seção. Título: 2 a 5 palavras impactantes; opcional subtítulo de uma linha declarando a conclusão. Em árabe, mantenha siglas técnicas padrão em latim (YOLO, RAG, API) onde é assim que os praticantes as escrevem.

4. Design: estilo, ícones de fundo, ícones de etapas

• Estilo (render.py --styles): clean (IA/ML, geral), tech (infraestrutura, nuvem, GPUs, segurança, IoT), code (DevOps, backend), editorial (negócios, carreiras, pesquisa), bold (polêmicas, mitos vs fatos), soft (aprendizado, bem-estar, natureza). Todos os estilos funcionam nos modos claro e escuro.
• Ícones de fundo: escolha 2 a 4 ícones Lucide que evoquem o assunto (ex.: flame, trees, cctv para detecção de incêndios florestais; database, brain, search para RAG). Eles são espalhados grandes e muito sutis nas bordas. Dois brilhos suaves e desfocados nos cantos superior esquerdo e inferior direito usam as duas primeiras cores da paleta (em uma comparação, a cor de cada lado). Não há outras formas ou linhas de fundo. Use "intensity" (0.5 a 1.5) apenas se a pré-visualização parecer muito carregada ou muito vazia.
• Etapas de destaque: em um diagrama de seção única apenas a primeira cor da paleta é usada por padrão, então dê a 2 a 4 etapas principais "color": "s1" (a segunda cor da paleta) para tornar toda a paleta visível e chamar a atenção para os estágios que importam (ex.: as etapas de detecção e alerta).
• Ícones para etapas: verifique os nomes do Lucide antes de usá-los:

  python3 SKILL_DIR/scripts/render.py --icons database brain fire camera
  

5. Escrever a Especificação e Pré-visualizar

Escreva a especificação para /home/claude/<slug>.json (formato: references/spec.md; exemplo: assets/example-rag-vs-cag.json), depois:

python3 SKILL_DIR/scripts/render.py /home/claude/<slug>.json --preview /home/claude/<slug>.png

Sempre veja a pré-visualização antes de renderizar o GIF. Verifique: sem texto sobreposto ou truncado ("…"), título legível, título e cabeçalhos de seção centralizados, ordem do fluxo correta, ícones de fundo sutis e não atrás do texto, foto bem cortada, cartão do autor centralizado logo acima dos quatro botões de CTA. Leia cada linha de AVISO. Corrija a especificação e pré-visualize novamente até estar limpo. Se uma linha de bifurcação estiver apertada, remova o subtítulo ou uma etapa em vez de encolher tudo.

6. Renderizar e Entregar

python3 SKILL_DIR/scripts/render.py /home/claude/<slug>.json --gif /mnt/user-data/outputs/<slug>.gif

Loop contínuo, 2.5 a 6 s a 16 fps, codificado com até 256 cores e pontilhamento fino para que os brilhos dos cantos permaneçam suaves, e comprimido abaixo de --max-mb (padrão 5; tipicamente cerca de 1 a 1.5 MB). Apresente o GIF com present_files.

7. Legenda

Na resposta, forneça uma legenda pronta para colar no LinkedIn no idioma escolhido: uma linha de chamariz, 3 a 5 linhas curtas explicando o insight principal, uma pergunta para gerar comentários e 3 a 5 hashtags. Lembre ao usuário de fazer upload do GIF como uma imagem normal no post (dentro de um carrossel de PDF/documento ele não será animado).

Idiomas

Redação interna de CTA para en, fr, ar, es, de, it, pt, nl, tr. Para outro idioma de escrita latina, passe as quatro palavras traduzidas nesta ordem: "cta": ["Curtir", "Comentar", "Repostar", "Seguir"]. Árabe ("lang": "ar") muda para a fonte Tajawal e um layout da direita para a esquerda automaticamente (fluxo e CTA começam à direita, foto à direita do nome dentro do cartão do autor). Scripts que as fontes não cobrem não são suportados: diga e ofereça Inglês, Francês ou Árabe.

Limites

• 1 a 3 seções, até 12 etapas por seção, grupos paralelos de exatamente 2.
• Marcas de vogais curtas árabes (harakat) são removidas para renderização limpa.
• Flags opcionais: --fps, --seconds, --max-mb, --svg path (SVG estático do quadro 0).