show-me: Visuelle Erklärungen und Artefakte für KI-Coding-Assistenten

X-PostAiden ClineTool

Aiden Cline empfiehlt den Skill show-me aus dem Humanlayer-Repository, der KI-Assistenten anweist, technische Zusammenhänge mit prägnanten visuellen Artefakten anstelle langer Texte zu vermitteln.

Das Wichtigste

  1. Der Skill show-me minimiert erklärende Prosa und fokussiert sich auf die kleinste verständliche Visualisierung.
  2. Unterstützte Darstellungsformen umfassen Pseudocode für Logik, Call-Trees für Kontrollflüsse und Komponenten-Bäume für UI-Strukturen.
  3. Architektur, Modulzuständigkeiten und Interaktionen werden über schlanke Verzeichnisbäume oder Mermaid-Sequenzdiagramme illustriert.
  4. Für Änderungen nutzt der Prompt gezielte Diff-Darstellungen (z. B. auf Call-Tree-, Komponenten- oder Dateisystem-Ebene).
  5. Bei komplexen UI-Konzepten erzeugt der Agent eigenständige HTML-Dateien mit passendem Styling und öffnet diese direkt im Browser.

Warum das relevant ist

Große Textblöcke von Coding-Assistenten erschweren oft schnelles Erfassen von Refactorings oder Abläufen. Durch strukturierte visuelle Skizzen, Diffs und interaktive HTML-Artefakte wird die Zusammenarbeit mit KI-Assistenten deutlich effizienter und lesbarer.

Einordnung

Aiden Cline berichtet, dass sein Team den show-me-Skill produktiv einsetzt. Die Skill-Definition aus dem Humanlayer-Repository setzt auf gezielte visuelle Abstraktionen statt ausschweifender Chat-Antworten. Bemerkenswert ist die Flexibilität: Von einfachen textbasierten Diffs über Mermaid-Diagramme bis hin zu dynamisch erstellten lokalen HTML-Seiten wählt der Assistent stets das Format mit dem geringsten kognitiven Aufwand für Entwickler.

Original-Post

Aiden Cline

@rekram11 · 3. September 2026

We started using this the other day and the whole team is hooked t.co/rdMypbM6nY

675 Likes4 Antworten1462 Lesezeichen66.764 Aufrufe

Auf X ansehen
Weitere Posts im Thread (1)
  1. @ryanvogel mfer
Ausgewählte Antworten (5)
  • @ryanvogel @rekram11 uhhh well this is the first I am hearing of it, so not the ENTIRE team
  • @parkereimerl @ryanvogel @rekram11 t.co/YpEp0NCdcL
  • @thesherlocker @ryanvogel @rekram11 maybe Aiden is implying something
  • @chribjel @ryanvogel @rekram11 youre on the rebase team, prolly not the same team tbf
  • @OdysseyStack @rekram11 The detail I'd point at is in the call-tree diff. navigateToSession appears as both a - and a + — an unchanged line, restated on both sides, purely so you can see it gained a child. Diff semantics say leave it alone. Legibility says show it. The skill picks legibility every time.

Links und Tools aus diesem Beitrag

Zusammenfassung von KI erstellt (Gemini 3.8 Flash, 27. September 2026). Sie kann Fehler enthalten – maßgeblich ist die Originalquelle.

Inhaltlich ähnlich, ermittelt über die KI-Suche.

  • X-Post:Alice Kangro

    visualize: Markenkonforme HTML-Artefakte mit Coding-Agents erstellen

    Alice Kangro teilt das Open-Source-Projekt display-dev/visualize als persönliche Empfehlung. Das Werkzeug dient als Skill für AI-Coding-Agents, um individuelle und markenkonforme HTML-Dokumente anstelle von generischen Standard-Designs zu erzeugen.

    163Lesezeichen6274Aufrufe

    KI & AI· Tool

  • Repository:display-dev/visualize

    visualize: Markenkonforme HTML-Artefakte für KI-Coding-Agenten

    visualize ist ein Open-Source-Skill für KI-Coding-Assistenten wie Claude Code, Cursor oder Codex, um typische KI-Standard-Designs bei generierten HTML-Dokumenten durch markenkonforme Vorlagen und definierte Überarbeitungsbefehle zu ersetzen.

    67SterneHTML

    KI & AI· Tool

  • Repository:humanlayer/skills

    HumanLayer Skills: Erweiterungen für Claude Code

    Das GitHub-Repository 'skills' von HumanLayer bietet eine Sammlung modularer Erweiterungen für Claude Code. Die Befehle unterstützen bei der Optimierung von Konfigurationen, Typdefinitionen und agentischen Workflows.

    1387SterneTypeScript

    KI & AI· Tool

  • X-Post:Marco Ramilli

    Archify: Interaktive Architekturdiagramme per KI-Agent

    Marco Ramilli empfiehlt das Open-Source-Projekt Archify, das als Skill für Coding-Agenten wie Claude Code, Cursor und Codex dient und Codebasen oder Ideen in interaktive HTML-Diagramme verwandelt.

    1128Lesezeichen80.346Aufrufe

    KI & AI· Tool

  • X-Post:Meng To

    Anatomy: Agent-Skill für animierte, isometrische SVG-Erklärungen

    Meng To demonstriert das Open-Source-Agent-Skill 'Anatomy' von Entwickler Ryan (@wheresryan22). Damit können KI-Coding-Assistenten wie Claude Code interaktive, isometrische SVG- und WebGL-Visualisierungen erzeugen.

    3419Lesezeichen101.470Aufrufe

    KI & AI· Tool

Sprechen wir über Ihr Projekt.

Standorte

  • Mattersburg
    Johann Nepomuk Bergerstraße 7/2/14
    7210 Mattersburg, Austria
  • Wien
    Ungargasse 64-66/3/404
    1030 Wien, Austria

Ein Teil von diesem Inhalt wurde mit KI gemacht.