SkillLens

SkillLens: Verwendung und Wartung

SkillLens wandelt jede SKILL.md in ein animiertes Swimlane-Flussdiagramm um: Karten sind Schritte, Rauten sind Entscheidungen, durchgezogene Linien führen vorwärts, gestrichelte Linien führen zurück, leuchtende Punkte bewegen sich entlang der Linien, und die beleuchtete Karte ist der aktuelle Schritt. Die Benutzeroberfläche und der feste Diagrammtext sind auf Englisch (Standard) und Chinesisch verfügbar; "中 / EN" oben rechts schaltet um.

title: SkillLens
subtitle: SKILL.md rein · automatisch extrahiert · animiertes Flussdiagramm raus
hero: SkillLens | importieren · extrahieren · anpassen · exportieren

trigger start: Einen Skill verstehen wollen [Wann] {bell}
  den Workflow lesen
  prüfen oder präsentieren

lane L1: Importieren [import] (green)
  step open: SkillLens öffnen [start.bat] {play}
    listet jeden lokalen Skill
    zeichnet bei jedem Speichern neu
  step add: Ablegen oder einfügen [drop] {upload}
    Ordner, .md-Dateien
    oder eingefügter Text

lane L2: Extrahieren [extract] (blue)
  decide has: Skillflow-Block? [skillflow?]
  step auto: Heuristische Extraktion [auto] {sparkles}
    Abschnitte → Spuren
    Schritte / Entscheidungen / Schleifen
  step check: Mit der Quelle abgleichen [review] {scan-eye}
    auf eine Karte klicken, um ihren Text zu sehen
    sehen, wo sie verbunden ist
  step tune: In der Struktur anpassen [edit] {pencil}
    anwenden, um neu zu zeichnen
    als Codeblock kopieren

lane L3: Ausgabe [export] (purple)
  step draw: Aus dem Block zeichnen [render] {layers}
    Spuren · Karten · Rauten
    Punkte fließen entlang der Linien
  step out: Exportieren [export] {download} +end
    HTML / SVG / PNG
    ein mp4 aufzeichnen

flow:
  start -> open -> add -> has
  has -> auto : Nein
  has -> draw : Ja
  auto -> check -> tune -> draw -> out
  check ~> auto : Quelltext korrigieren

Öffnen

• start.bat doppelklicken: Startet einen lokalen Server und öffnet den Browser. Die Liste enthält die skills/ und examples/ des Repos sowie die lokalen Claude-Benutzer- und Plugin-Skills und zeichnet innerhalb von 2 Sekunden neu, nachdem sich eine SKILL.md geändert hat. Entspricht npm start; npm run start:project listet nur die eigenen Skills des Repos.
• index.html direkt öffnen: Kein Server, aber die Liste kommt aus data/skills.js, also vorher npm run scan ausführen. Videoaufzeichnung und automatische Übersetzung benötigen den Server.
• Zusätzliche Ordner: --root Name=<pfad>, oder eine skillviz.config.json im Repo-Stammverzeichnis: {"roots":[{"label":"Team-Skills","dir":"<pfad>"}]}.

Skills schreiben, die gut dargestellt werden

Die Extraktionsregeln befinden sich in src/extract.js. Eine SKILL.md, die so geschrieben ist, wird ohne Skillflow-Block korrekt dargestellt:

1. Setze die Prozedur unter eine Überschrift wie ## Workflow / ## Schritte / ## Prozess als geordnete Liste oder nummerierte ###-Unterabschnitte; schreibe jeden Schritt als **Kurztitel**: Erklärung.
2. Beginne eine Entscheidung mit „Wenn …“ / „Ob …“; Wenn X, dann Y wird zu einer Raute mit einem Ja-Ausgang.
3. Schreibe eine Weiterleitung als zweispaltige Tabelle, deren Kopfzeile links „Zustand / Bedingung / Wenn“ und rechts „Aktion / Ausführen / Weiterleiten“ trägt: Sie wird zu einer Kette von Ersttreffer-Entscheidungen.
4. Schreibe Schleifen als „zurück zu Schritt N bis …“.
5. Markiere optionale Schritte mit einem führenden [Bei Bedarf] / [optional]; die Karte erhält einen gestrichelten Rand.
6. Regeln unter ## Regeln / ## Hinweise werden zu bernsteinfarbenen Notizen; Material unter ## Referenz wird zu einer unverbundenen Referenzspur.

Der Skillflow-Block (exakte Steuerung)

Wenn eine SKILL.md einen ```skillflow-Block enthält, zeichnet SkillLens nur diesen. Der schnellste Weg, einen zu schreiben: Korrigiere das automatisch extrahierte Diagramm im Struktur-Panel, klicke auf „Als Codeblock kopieren“ und füge es in die SKILL.md ein. Syntax:

Zeile	Bedeutung
title: subtitle: hero: titel | untertitel footer: window: cols: 4	Seitentext und Karten pro Zeile
trigger id: Titel [tag] {icon}	Die Trigger-Karte oben; eingerückte Zeilen darunter sind ihre Beschreibung
lane id: Titel [tag] (farbe art)	Eine Spur; Farben green / blue / purple / teal / rose / amber / slate; Arten flow (Standard, verkettet) / ref (Referenz, unverbunden) / bare (kein Rahmen)
step id: Titel [tag] {icon} +optional +end	Eine Schrittkarte; +end ist der Endschritt (durchgezogenes Icon), +optional eine gestrichelte Karte
decide id: Frage? [untertitel]	Eine Entscheidungsraute
note: text	Eine Notiz innerhalb der Spur
a -> b -> c : label unter flow:	Vorwärtslinien; ~> ist eine gestrichelte Schleife; a -> "text" : Ja ist ein Ausgang, der auf einen kurzen Text zeigt

Ohne flow: werden die Karten von Nicht-Ref-Spuren der Reihe nach verkettet. Icons sind Lucide-Namen, aufgelistet in src/icons.js; um eines hinzuzufügen, kopiere seinen SVG-Code aus lucide-static.

SkillLens ändern

• Schichten: markdown.js parst → extract.js / dsl.js bauen die Struktur → layout.js platziert Karten und Routenlinien → render.js zeichnet das SVG und spielt es ab → app.js ist die Benutzeroberfläche. Alle UI- und Diagrammtexte befinden sich in i18n.js; füge jeden Schlüssel sowohl in en als auch in zh hinzu.
• Die Seite muss durch Doppelklick geöffnet werden können, daher werden einfache <script>-Tags ohne ES-Module verwendet. Jedes Skript ist als SV.mod.Name = function (SV) {…} geschrieben, damit der eigenständige Export den Code mit toString() einbetten kann.
• Jeder Frame muss eine reine Funktion der Zeit t sein (keine CSS-Animation, Math.random oder Wanduhr), sonst ist die frame-genaue Videoaufzeichnung nicht möglich.
• Themes: Blueprint (Standard), Midnight und Glass. Diagrammfarben befinden sich in THEMES in render.js, UI-Farben in den CSS-Variablen am Anfang von style.css; ändere beide zusammen. Blueprint-spezifische Details (Gitter, Lineale, Eckstriche, Kartennummern, bernsteinfarbener aktiver Schritt) sind hinter P.blueprint.
• Schriftarten: Noto Sans SC (Chinesisch), Inter (Lateinisch), JetBrains Mono (Tags und Pfade) von Google Fonts, mit Fallback auf Systemschriftarten offline. Das Layout misst Text mit einer Canvas, daher muss auf Schriftarten gewartet werden: app.js leert den Maß-Cache und zeichnet bei loadingdone neu, und der Aufnahmemodus sowie der eigenständige Export rufen zuerst document.fonts.load für den Text des Diagramms auf. Halte den Font-Link in index.html, FONT / MONO in layout.js und den Link in der eigenständigen Vorlage synchron.
• Automatische Übersetzung: scripts/lib/translate.mjs (Server, /api/translate) und useTranslation in src/app.js (welche Zeichenfolgen im Diagramm übersetzt werden). Es werden nur Diagrammtexte und geöffnete Quelltexte übersetzt; Tags, Dateinamen, Pfade und Ja / Nein bleiben erhalten. Backend-Reihenfolge: Das Anthropic SDK, wenn ein API-Schlüssel gesetzt und @anthropic-ai/sdk installiert ist, ansonsten das lokale Claude Code CLI (unter Windows node_modules/@anthropic-ai/claude-code/bin/claude.exe direkt aufrufen, um .cmd-Zitierung zu vermeiden). Der Cache-Schlüssel ist lang + \u0001 + text auf beiden Seiten.
• Änderungen in einem Headless-Browser überprüfen: npm run scan, dann node scripts/record.mjs <skill> --seconds 3, oder Screenshot via scripts/lib/cdp.mjs. Für einen Regressionstest jeden Skill durch SV.extract → SV.layout → SV.render.toSVG schicken und sicherstellen, dass nichts wirft und kein Text seine Karte überläuft.
• Aufzeichnung benötigt einen lokalen Chrome / Edge und ffmpeg; setze SV_CHROME / SV_FFMPEG, falls sie nicht gefunden werden.
• README-Hero-Medien: docs/promo.webp (die inline angezeigte Animation) verlinkt auf das rohe docs/promo.mp4 (das vollständige Video mit Ton). GitHub spielt niemals ein Repo-MP4 ab: weder inline im README noch in der Dateiansicht, unabhängig von seiner Größe, daher wird der rohe Link heruntergeladen; ein Inline-Player benötigt das über den github.com-Editor hochgeladene Video (eine user-attachments-URL). Verwende animiertes WebP, nicht GIF: Auf den dunklen Blueprint-Verläufen ist ein 30-s-GIF über 20 MB groß, während WebP unter 8 MB bleibt und sauberere Farben hat. Aus einem 1080p-Master: ffmpeg -i master.mp4 -vf "fps=15,scale=960:-1:flags=lanczos" -c:v libwebp -quality 70 -compression_level 6 -loop 0 -an docs/promo.webp und ffmpeg -i master.mp4 -c:v libx264 -preset slow -crf 23 -pix_fmt yuv420p -c:a aac -b:a 160k -movflags +faststart docs/promo.mp4.