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.

Erwähnte Links

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.

Ähnliche Einträge

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

  • Repository:tt-a1i/archify

    Archify: Interaktive Architektur- und Systemdiagramme für KI-Coding-Agenten

    Archify ist ein quelloffenes Node.js-Rendering- und Validierungssystem, das als Skill für Coding-Agenten wie Cursor, Claude Code, Codex CLI und OpenCode dient. Agenten erzeugen eine typisierte JSON-Zwischendarstellung (IR), die Archify deterministisch in interaktive, eigenständige HTML- und SVG-Dateien sowie Bild- und Videoformate kompiliert.

    45.490SterneJavaScript

    KI & AI· Tool

  • X-Post:Trending GitHub Repositories

    diagram-design: Redaktionelle SVG- und HTML-Diagramme für KI-Coding-Agenten

    Das GitHub-Repository diagram-design von Cathryn Lavery bietet ein Plugin für Claude Code, Codex und kompatible Agenten, um 39 typografisch ansprechende Diagrammtypen als autarkes HTML und SVG zu generieren. Ziel ist der Verzicht auf unästhetische Standard-Boxen im Mermaid-Stil und aufwändiges manuelles Nachbearbeiten in Design-Tools.

    1225Lesezeichen86.333Aufrufe

    KI & AI· Tool

Zurück zur Wissensbasis

Lassen Sie uns über Ihr Projekt sprechen

Kontakt aufnehmen

Standorte

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

Dieser Inhalt wurde teilweise mithilfe von KI erstellt.