MedSalahArfa1/linkedin-animated-diagram

LinkedIn Animated Diagram (Animiertes Diagramm für LinkedIn)

Erzeugt ein Endlos-GIF (Hochformat 4:5, 1080×1350), das einen Prozess darstellt: Icon-Knoten, verbunden durch animierte, gepunktete Verbinder, ein „Puls“-Welleneffekt, der durch die Schritte wandert, ein Hintergrund mit sanften leuchtenden Kreisen in zwei gegenüberliegenden Ecken sowie sehr dezenten Themen-Icons, und unten eine Autorenkarte (abgerundetes Rechteck mit beweglicher gestrichelter Umrandung) über einem zentrierten Like/Kommentar/Repost/Follow-Aktionsaufruf. Der Benutzer gibt ein Thema vor; Sie kümmern sich nach einer kurzen Erfassung um Inhalt, Aufbau und Design.

Das Rendering ist deterministisch: Sie schreiben eine JSON-Spezifikation und scripts/render.py erledigt Layout, Icons, Schriftarten, arabische Formgebung, Animation und GIF-Kompression. Ihre Aufgabe ist das Denken: genauer Inhalt, ein klarer Ablauf, ein Design, das zum Thema passt.

SKILL_DIR unten bezieht sich auf den Ordner, der diese SKILL.md enthält. Pfade wie /home/claude (Arbeitsdateien) und /mnt/user-data/outputs (Ergebnisse, angezeigt mit present_files) sind für Claude.ai vorgesehen. In anderen Umgebungen wie Claude Code verwenden Sie stattdessen einen Arbeitsordner und einen Ausgabeordner im aktuellen Projekt und teilen dem Benutzer mit, wo das GIF gespeichert wurde.

Arbeitsablauf

1. Einrichtung (einmal pro Sitzung)

bash SKILL_DIR/scripts/setup.sh

Installiert den Renderer, GIF-Tools, Schriftarten (Poppins, Bebas Neue, DM Serif Display, IBM Plex Mono, Tajawal für Arabisch) und etwa 2.300 Lucide-Icons. Warnungen sind nicht kritisch.

2. Erfassung (zwei kurze Runden)

Persönliche Entscheidungen beeinflussen die endgültige Datei, sammeln Sie sie daher vor dem Entwurf ein. Wenn eine Antwort bereits aus dem Gespräch bekannt ist (oder aus dem, was Sie über den Benutzer wissen), bestätigen Sie sie, anstatt sie neu zu erfragen, und verwenden Sie alle Antworten für spätere Diagramme in derselben Unterhaltung wieder. Erfinden Sie niemals einen Namen oder Link.

Runde 1: Fragen Sie nach Möglichkeit mit dem interaktiven Optionstool (ask_user_input_v0); es sind maximal 3 Fragen erlaubt, verwenden Sie daher genau diese:

1. Badge. Wenn Name und LinkedIn-Link bekannt sind, zeigen Sie sie in der Frage an und bieten Sie an: „Name + Link + mein Foto“ / „Name + Link, kein Foto“ / „Name oder Link ändern“ / „Kein Badge“. Falls unbekannt, fragen Sie im Nachrichtentext unmittelbar vor dem Tool nach Name und LinkedIn-Link und bieten an: „Mein Foto hinzufügen“ / „Kein Foto“ / „Kein Badge“.
2. Hintergrund: „Hell“ / „Dunkel“.
3. Sprache: zuerst die eigene Sprache des Benutzers, dann Englisch / Französisch / Arabisch (falls relevant), plus „Andere (ich tippe sie ein)“.

Ohne dieses Tool fragen Sie dasselbe in einer kurzen Nachricht.

Runde 2: Palette, angezeigt auf dem gewählten Hintergrund:

• Wählen Sie die 3 Paletten aus, deren Farben am besten zum Thema passen (render.py --palettes). Alle sind nach Farben benannt.

  • Premium (verfeinerte, kontrastreiche Kombinationen, die im LinkedIn-Feed gut aussehen): LinkedIn Blue, Navy & Gold, Indigo & Coral, Emerald & Slate, Burgundy & Gold, Teal & Coral, Plum & Rose, Charcoal & Electric Blue.
  • Standard: Blues, Teal & Cyan, Blue & Teal, Greens, Green & Brown, Reds & Oranges, Amber & Gold, Purples, Pink & Purple, Blue & Orange, Red & Purple, Multicolor, Grayscale.

  Für professionelle Themen (KI, Technologie, Wirtschaft, Karriere) nehmen Sie mindestens 2 Premium-Paletten in die 3 auf. Zweifarbige Premium-Paare (z. B. Indigo & Coral) eignen sich für „X vs. Y“-Vergleiche: Jede Seite erhält ihre eigene Farbe. Markieren Sie Premium-Optionen als solche, wenn Sie sie anbieten. Rendern und präsentieren Sie ein Farbmusterblatt:

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

• Wenn der Benutzer sein Foto möchte und es noch nicht hochgeladen hat: Verwenden Sie nicht das Optionstool (eine angetippte Antwort kann keinen Anhang übertragen). Fragen Sie im Klartext: „Hängen Sie Ihr Profilfoto an und teilen Sie mir die Palettennummer mit, oder geben Sie Ihre eigenen Hex-Codes ein.“

• Andernfalls: Fragen Sie mit dem Optionstool: die 3 Palettennamen plus „Benutzerdefiniert (ich gebe Hex-Codes ein)“.

• Benutzerdefinierte Paletten: Akzeptieren Sie 1 bis 4 Hex-Codes in jeder gängigen Form (#FF6B35, ff6b35, #f63) oder Farben, die in Worten beschrieben werden (übersetzen Sie sie selbst in Hex und sagen Sie, welche Codes Sie verwendet haben). Abschnitt 1 verwendet Farbe 1, Abschnitt 2 Farbe 2, zusätzliche Farben können Titelwörter einfärben (s1, s2). Wenn der Renderer vor geringem Kontrast auf dem gewählten Hintergrund warnt, teilen Sie dies dem Benutzer mit und schlagen Sie den nächstgelegenen lesbaren Farbton vor, anstatt seine Farben stillschweigend zu ändern.

Profilfoto: Uploads landen in /mnt/user-data/uploads/. Zeigen Sie das Bild an, um zu bestätigen, dass es sich um ein brauchbares Porträt handelt (JPG, PNG oder WEBP). Der Renderer beschneidet es zu einem Kreis, bevorzugt den oberen Bildbereich, wo sich normalerweise Gesichter befinden. Wenn es eindeutig kein Porträt ist oder zu klein/unscharf, sagen Sie dies und bieten Sie den Badge nur mit Namen an. Ohne Foto enthält die Autorenkarte nur den Namen und den Link, zentriert, ohne Kreis.

3. Inhalt gestalten

Schreiben Sie den gesamten Text in der gewählten Sprache. Wenn das Thema Fakten betrifft, bei denen Sie sich nicht sicher sind (aktuelle Tools, spezifische Architekturen, Zahlen), suchen Sie zuerst. Wählen Sie dann eine Struktur:

• Ein Prozess („Wie YOLO-Deployment funktioniert“) → 1 Abschnitt, 6 bis 10 Schritte.
• Vergleich („RAG vs. CAG“) → 2 Abschnitte, jeweils 5 bis 8 Schritte, mit parallelem Detaillierungsgrad.
• Drei Varianten („3 Möglichkeiten zum Feintuning“) → 3 Abschnitte, jeweils 3 bis 5 Schritte.

Schrittbezeichnungen: 1 bis 3 Wörter („Einbettungsabfrage“, „Vektor-DB“). Verwenden Sie parallele Gruppen (zwei Schritte nebeneinander) nur, wo der tatsächliche Prozess verzweigt, maximal ein- oder zweimal pro Abschnitt. Titel: 2 bis 5 prägnante Wörter; optional eine einzeilige Unterüberschrift, die die Kernaussage formuliert. Behalten Sie bei Arabisch gängige technische Akronyme in lateinischer Schrift bei (YOLO, RAG, API), wo Praktiker sie so schreiben.

4. Design: Stil, Hintergrundsymbole, Schrittsymbole

• Stil (render.py --styles): clean (KI/ML, allgemein), tech (Infrastruktur, Cloud, GPUs, Sicherheit, IoT), code (DevOps, Backend), editorial (Wirtschaft, Karriere, Forschung), bold (heiße Themen, Mythen vs. Fakten), soft (Lernen, Wohlbefinden, Natur). Alle Stile funktionieren sowohl im hellen als auch im dunklen Modus.
• Hintergrundsymbole: Wählen Sie 2 bis 4 Lucide-Symbole, die das Thema assoziieren (z. B. flame, trees, cctv für Waldbranderkennung; database, brain, search für RAG). Sie werden groß und sehr dezent an den Rändern verteilt. Zwei sanfte, verschwommene Leuchter in der oberen linken und unteren rechten Ecke verwenden die ersten beiden Palettenfarben (bei einem Vergleich die Farbe jeder Seite). Es gibt keine weiteren Hintergrundformen oder Linien. Verwenden Sie `