MedSalahArfa1/linkedin-animated-diagram

Diagramme Animé LinkedIn

Produit un GIF en boucle (portrait 4:5, 1080x1350) montrant un processus sous forme de nœuds d'icônes reliés par des connecteurs pointillés animés, une ondulation « pulse » parcourant les étapes, un fond avec des cercles lumineux doux dans deux coins opposés ainsi que des icônes de sujet très subtiles, et en bas une carte d'auteur (rectangle arrondi avec une bordure en pointillés animée) au-dessus d'un appel à l'action centré Like / Comment / Repost / Follow. L'utilisateur donne un sujet ; vous gérez le contenu, la structure et le design après un court questionnaire.

Le rendu est déterministe : vous écrivez une spécification JSON et scripts/render.py s'occupe de la mise en page, des icônes, des polices, du shaping arabe, de l'animation et de la compression GIF. Votre travail est la réflexion : un contenu précis, un flux clair, un design adapté au sujet.

SKILL_DIR ci-dessous désigne le dossier contenant ce SKILL.md. Les chemins comme /home/claude (fichiers de travail) et /mnt/user-data/outputs (livrables, affichés avec present_files) sont pour Claude.ai. Dans d'autres environnements comme Claude Code, utilisez un dossier de travail et un dossier de sortie dans le projet courant, et indiquez à l'utilisateur où le GIF a été sauvegardé.

Workflow

1. Installation (une fois par session)

bash SKILL_DIR/scripts/setup.sh

Installe le moteur de rendu, les outils GIF, les polices (Poppins, Bebas Neue, DM Serif Display, IBM Plex Mono, Tajawal pour l'arabe) et environ 2 300 icônes Lucide. Les avertissements ne sont pas bloquants.

2. Questionnaire (deux tours rapides)

Les choix personnels modifient le fichier final, donc collectez-les avant de concevoir. Si une réponse est déjà connue depuis la conversation (ou d'après ce que vous savez de l'utilisateur), confirmez-la au lieu de la redemander, et réutilisez toutes les réponses pour les diagrammes suivants de la même conversation. N'inventez jamais un nom ou un lien.

Tour 1 : demandez avec l'outil de questions interactives (ask_user_input_v0) quand il est disponible ; il permet au maximum 3 questions, donc utilisez exactement celles-ci :

1. Badge. Si le nom et le lien LinkedIn sont connus, affichez-les dans la question et proposez : « Nom + lien + ma photo » / « Nom + lien, sans photo » / « Changer le nom ou le lien » / « Pas de badge ». S'ils sont inconnus, demandez le nom et le lien LinkedIn dans le texte du message juste avant l'outil, et proposez : « Ajouter ma photo » / « Sans photo » / « Pas de badge ».
2. Fond : « Clair » / « Sombre ».
3. Langue : d'abord la langue de l'utilisateur, puis Anglais / Français / Arabe selon le cas, plus « Autre (je tape) ».

Sans cet outil, demandez les mêmes choses en un seul message court.

Tour 2 : palette, affichée sur le fond choisi :

• Choisissez les 3 palettes dont les couleurs correspondent le mieux au sujet (render.py --palettes). Toutes sont nommées par couleur.

  • Premium (raffinées, appariements à fort contraste qui paraissent naturels dans le fil LinkedIn) : Bleu LinkedIn, Marine & Or, Indigo & Corail, Émeraude & Ardoise, Bordeaux & Or, Sarcelle & Corail, Prune & Rose, Charbon & Bleu Électrique.
  • Standard : Bleus, Sarcelle & Cyan, Bleu & Sarcelle, Verts, Vert & Marron, Rouges & Orange, Ambre & Or, Violets, Rose & Violet, Bleu & Orange, Rouge & Violet, Multicolore, Niveaux de gris.

  Pour les sujets professionnels (IA, tech, business, carrières) incluez au moins 2 palettes premium parmi les 3. Les paires bicolores premium (ex. Indigo & Corail) conviennent aux comparaisons « X vs Y » : chaque côté reçoit sa propre couleur. Marquez les options premium comme telles lorsque vous les proposez. Effectuez le rendu et présentez un échantillon :

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

• Si l'utilisateur veut sa photo et ne l'a pas encore téléchargée : n'utilisez pas l'outil d'options (une réponse tapée ne peut pas porter de pièce jointe). Demandez en texte simple : « Joignez votre photo de profil et dites-moi le numéro de la palette, ou tapez vos propres codes hexadécimaux. »

• Sinon : demandez avec l'outil d'options : les 3 noms de palette plus « Personnalisé (je tape les codes hexadécimaux) ».

• Palettes personnalisées : acceptez 1 à 4 codes hexadécimaux sous n'importe quelle forme courante (#FF6B35, ff6b35, #f63), ou des couleurs décrites en mots (traduisez-les vous-même en hex et dites quels codes vous avez utilisés). La section 1 utilise la couleur 1, la section 2 la couleur 2, les couleurs supplémentaires peuvent colorer les mots du titre (s1, s2). Si le moteur de rendu avertit d'un faible contraste sur le fond choisi, informez l'utilisateur et proposez la nuance lisible la plus proche au lieu de modifier silencieusement ses couleurs.

Photo de profil : les téléchargements arrivent dans /mnt/user-data/uploads/. Visualisez l'image pour confirmer qu'il s'agit d'un portrait utilisable (JPG, PNG ou WEBP). Le moteur de rendu la recadre en cercle, en favorisant le haut de l'image où les visages se trouvent généralement. Si ce n'est clairement pas un portrait ou si l'image est trop petite/floue, dites-le et proposez le badge avec seulement le nom. Sans photo, la carte d'auteur contient seulement le nom et le lien, centrés, sans cercle.

3. Façonner le contenu

Rédigez tout le texte dans la langue choisie. Si le sujet implique des faits dont vous n'êtes pas sûr (outils récents, architectures spécifiques, chiffres), effectuez d'abord une recherche. Choisissez ensuite une structure :

• Un processus (« Comment fonctionne le déploiement YOLO ») → 1 section, 6 à 10 étapes.
• Comparaison (« RAG vs CAG ») → 2 sections, 5 à 8 étapes chacune, avec un niveau de détail parallèle.
• Trois variantes (« 3 façons de fine-tuner ») → 3 sections, 3 à 5 étapes chacune.

Libellés des étapes : 1 à 3 mots (« Requête d'embedding », « Base vectorielle »). Utilisez un groupe parallèle (deux étapes côte à côte) uniquement là où le processus réel bifurque, au maximum un ou deux par section. Titre : 2 à 5 mots percutants ; sous-titre optionnel d'une ligne résumant l'idée principale. En arabe, conservez les acronymes techniques standards en latin (YOLO, RAG, API) là où les praticiens les écrivent ainsi.

4. Conception : style, icônes de fond, icônes d'étapes

• Style (render.py --styles) : clean (IA/ML, général), tech (infrastructure, cloud, GPU, sécurité, IoT), code (DevOps, backend), editorial (business, carrières, recherche), bold (idées choc, mythes vs réalités), soft (apprentissage, bien-être, nature). Tous les styles fonctionnent en mode clair et sombre.
• Icônes de fond : choisissez 2 à 4 icônes Lucide qui évoquent le sujet (ex. flame, trees, cctv pour la détection d'incendies de forêt ; database, brain, search pour RAG). Elles sont dispersées en grand et très subtilement sur les bords. Deux lueurs floues douces dans les coins en haut à gauche et en bas à droite prennent les deux premières couleurs de la palette (dans une comparaison, chaque couleur de chaque côté). Il n'y a pas d'autres formes ou lignes de fond. Utilisez "intensity" (0.5 à 1.5) uniquement si l'aperçu semble trop chargé ou trop vide.
• Étapes d'accentuation : dans un diagramme à section unique, seule la première couleur de palette est utilisée par défaut, donc donnez à 2 à 4 étapes clés "color": "s1" (la deuxième couleur de la palette) pour rendre toute la palette visible et attirer l'œil sur les étapes importantes (par exemple, les étapes de détection et d'alerte).
• Icônes pour les étapes : vérifiez les noms Lucide avant de les utiliser :

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

5. Écrire la spécification et prévisualiser

Écrivez la spécification dans /home/claude/<slug>.json (format : references/spec.md ; exemple : assets/example-rag-vs-cag.json), puis :

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

Toujours visualiser l'aperçu avant de produire le GIF. Vérifiez : pas de texte qui se chevauche ou tronqué (« … »), titre lisible, titres et en-têtes de section centrés, ordre du flux correct, icônes de fond subtiles et pas derrière le texte, photo bien recadrée, carte d'auteur centrée juste au-dessus des quatre boutons CTA. Lisez chaque ligne WARNING. Corrigez la spécification et prévisualisez à nouveau jusqu'à ce que ce soit propre. Si une ligne de bifurcation est trop serrée, supprimez le sous-titre ou une étape plutôt que de réduire la taille de tout.

6. Rendu et livraison

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

Boucle sans couture, 2.5 à 6 s à 16 ips, encodé avec jusqu'à 256 couleurs et un tramage fin pour que les lueurs des coins restent lisses, et compressé sous --max-mb (par défaut 5 ; généralement environ 1 à 1,5 Mo). Présentez le GIF avec present_files.

7. Légende

Dans la réponse, fournissez une légende LinkedIn prête à coller dans la langue choisie : une phrase d'accroche, 3 à 5 lignes courtes expliquant l'idée clé, une question pour susciter des commentaires, et 3 à 5 hashtags. Rappelez à l'utilisateur de télécharger le GIF comme une image normale dans le post (dans un carrousel PDF/document il ne s'animera pas).

Langues

Libellés d'action intégrés pour en, fr, ar, es, de, it, pt, nl, tr. Pour une autre langue à écriture latine, passez les quatre mots traduits dans cet ordre : "cta": ["Like", "Comment", "Repost", "Follow"]. L'arabe ("lang": "ar") passe automatiquement à la police Tajawal et une mise en page de droite à gauche (flux et CTA commencent à droite, photo à droite du nom dans la carte d'auteur). Les écritures que les polices ne couvrent pas ne sont pas prises en charge : dites-le et proposez l'anglais, le français ou l'arabe.

Limites

• 1 à 3 sections, jusqu'à 12 étapes par section, groupes parallèles de 2 exactement.
• Les marques de voyelles courtes arabes (harakat) sont supprimées pour un rendu propre.
• Indicateurs optionnels : --fps, --seconds, --max-mb, --svg path (SVG fixe de l'image 0).