/graph: deine Zahlen werden zu einem animierten Diagramm
Der Benutzer gibt Zahlen in beliebiger Form: Mär 200K, Apr 650K, Nov 1,5M, eine eingefügte Tabelle, eine CSV-Datei, einen Screenshot oder einen Satz. Du erstellst daraus eine kleine Spezifikation, überprüfst ein Einzelbild, renderst das Video und übergibst eine stumme MP4-Datei (ca. 5 Sekunden).
${CLAUDE_SKILL_DIR} unten ist der Ordner dieses Skills (der Ordner, in dem diese SKILL.md liegt). Wenn deine Umgebung ihn nicht ausfüllt, verwende den Pfad dieses Ordners. Speichere alles im aktuellen Ordner des Benutzers oder in dem von ihm benannten Ordner.
0. Setup-Prüfung
python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" --check
Dies dauert ein paar Sekunden; führe es aus, wenn du nicht sicher bist, ob dieser Computer eingerichtet ist. "ready": true bedeutet, es kann losgehen. Andernfalls führe die unter "fix" aufgeführten Befehle aus und teile dem Benutzer mit, dass es sich um eine einmalige Installation handelt: python3 -m pip install playwright (der Browser-Treiber), python3 -m playwright install chromium (nur wenn Google Chrome oder Edge nicht installiert ist, ca. 150 MB) und python3 -m pip install imageio-ffmpeg (nur wenn ffmpeg fehlt). Wenn pip sich mit "externally managed environment" weigert, erstelle einmal eine private Umgebung und verwende deren Python für alle Befehle: python3 -m venv ~/.animate-skills && ~/.animate-skills/bin/pip install playwright imageio-ffmpeg, dann ~/.animate-skills/bin/python -m playwright install chromium falls nötig. Verwende unter Windows py anstelle von python3. Ist hier kein Browser möglich (z. B. in der Sandbox der Claude-App)? Siehe Ende dieser Datei.
1. Spezifikation schreiben
Speichere graph-<thema>.json:
{
"title": "Meine Instagram-Follower",
"subtitle": "2026",
"data": [["Mär", 200000], ["Apr", 650000], ["Nov", 1500000]],
"source": "Instagram",
"theme": "night"
}
Regeln:
- Verwende die genauen Zahlen des Benutzers. Erfinde, glätte, runde oder ergänze niemals Werte. Wenn etwas wirklich mehrdeutig ist (welche Spalte, welche Einheit), stelle eine kurze Frage; ansonsten lege los.
- Schreibe vollständige Zahlen: 650K →
650000, 1,5M →1500000, 12% →12mit"suffix": "%". - Halte Bezeichnungen kurz (bis zu ~8 Zeichen sehen am besten aus):
Mär,Q1,2024,Mo. - Der Titel sagt, was die Zahlen sind, möglichst in den Worten des Benutzers (maximal ca. 30 Zeichen;
|erzwingt einen Zeilenumbruch). Fügesubtitleundsourcenur hinzu, wenn der Benutzer sie angegeben hat oder sie eindeutig aus der Anfrage hervorgehen ("meine Instagram-Follower" → Quelle Instagram); erfinde sie nicht.
| Feld | Bedeutung |
|---|---|
title, subtitle | Überschrift und eine kleine Zeile darunter (Zeitraum, Einheit). |
data | [["Label", Zahl], ...] oder [{"label": "...", "value": n}, ...], in Reihenfolge. |
type | Weglassen für automatische Auswahl: Balken bei bis zu 10 Werten; eine Linie bei längeren Reihen und bei Werten, die sich im Verhältnis zu ihrer Größe kaum ändern (Gewicht von 210 → 178, ein Preis, eine Temperatur), wo die Linie in den Bereich hineinzoomt. "bar" oder "line" zum Erzwingen. |
prefix, suffix | Einheiten: "$", "€", "%", " kg". |
decimals | Dezimalstellen erzwingen. Standard: Jeder Wert behält seine eigenen. |
compact | Standard zeigt 10.000+ als 12K / 1,5M / 2B. false für vollständige Zahlen. |
callout | Weglassen für den automatischen Wachstumshinweis vom ersten zum letzten Wert (↑ 7,5x; ganze Zahlen ab 10x, ↑ 77x; ↑ 32%; ↓ 18%). Ein eigener kurzer Text ("Wieder in der Gewinnzone") oder null für keinen. |
good | "down" wenn weniger besser ist (Gewichtsverlust, getilgte Schulden, Kosten, Rennzeiten): Ein Rückgang erhält ein grünes statt eines roten Etiketts. |
highlight | Welcher Balken gold ist: "last" (Standard), "max", ein Index oder "none". |
theme | night (dunkles Marineblau, Korallenbalken; Standard), light, sunset, mint. |
source | Kleine "Quelle: ..."-Notiz unter dem Diagramm. |
size | "1080x1920" (hochformat, Standard), "1080x1080", "1920x1080". |
duration, fps | Sekunden (Standard ~5) und Bilder pro Sekunde (Standard 30; 60 ist flüssiger, aber langsamer). |
Beispiele: examples/instagram-followers.json (Balken), examples/website-visitors-line.json (Linie).
2. Letztes Einzelbild überprüfen
python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" graph-<thema>.json --still end --out graph-<thema>-check.png
Betrachte das Bild (2-3 Sekunden zum Erstellen): Beschriftungen lesbar, nichts überlappend, die Zahlen exakt die des Benutzers. Korrigiere die Spezifikation und überprüfe ggf. erneut.
3. Video rendern
python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" graph-<thema>.json --out graph-<thema>.mp4
Dauert ca. 10-20 Sekunden. Lösche das Prüfbild.
4. Ausliefern
Gib dem Benutzer den Pfad der MP4-Datei (zeige sie an, wenn deine Umgebung Dateien anzeigen kann). Sie hat keinen Ton und ist bereit für Musik oder einen Voiceover. Biete eine schnelle Variante an (ein anderes Farbschema, das quadratische Format, eine Linie statt Balken).
Kein Browser hier? (z. B. die Sandbox der Claude-App)
Wenn die Setup-Prüfung keinen Browser zum Laufen bringen kann, schreibe die Animation stattdessen als Seite: python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" graph-<thema>.json --html graph-<thema>.html. Die Seite spielt das Diagramm in jedem Browser ab (zeige sie als Artefakt, wenn möglich). Teile dem Benutzer mit, dass die MP4 Claude Code auf einem Computer oder eine Bildschirmaufnahme der Seite benötigt.