show-me: Visual Explanations and Artifacts for AI Coding Assistants

X postAiden ClineTool

Aiden Cline highlights the show-me skill from the Humanlayer repository, which directs AI coding agents to communicate technical topics using concise visual artefacts rather than verbose text.

Key points

  1. The show-me skill cuts down explanatory prose and selects the smallest view that conveys the core idea clearly.
  2. Supported formats include pseudocode for algorithms, call trees for runtime control flow, and component trees for UI hierarchies.
  3. Folder responsibility and component interactions are depicted using shallow file trees and Mermaid sequence diagrams.
  4. Context-aware diff formats illustrate changes directly within call trees, component hierarchies, and file trees.
  5. For dense concepts or UI layouts, the agent produces styled HTML artefacts and opens them directly for the user.

Why it matters

Dense prose from AI coding agents often slows down code reviews and architecture discussions. Structuring agent output into visual trees, diffs, and lightweight HTML visualisations significantly speeds up comprehension.

Analysis

Cline notes that his team adopted the show-me prompt pattern with immediate success. Hosted in Humanlayer's skills collection, the definition focuses on cognitive legibility over generic explanations. By instructing the model to output call-tree diffs, Mermaid diagrams, or self-contained HTML files tailored to the product's UI styling, it turns standard LLM responses into structured developer artefacts.

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 replies1.5k bookmarks66.8k views

View on X
More posts in the thread (1)
  1. @ryanvogel mfer
Selected replies (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.

Mentioned links

Links and tools from this entry

Summary generated by AI (Gemini 3.8 Flash, 27 September 2026). It may contain errors – the original source is authoritative.

Related entries

Similar in content, found by the AI search.

  • Repository:display-dev/visualize

    visualize: On-Brand HTML Artifacts for AI Coding Agents

    visualize is an open-source skill for AI coding assistants such as Claude Code, Cursor, and Codex, designed to eliminate generic AI styling in generated HTML by applying persistent brand profiles and structured refinement commands.

    67starsHTML

    AI & LLMs· Tool

  • Repository:humanlayer/skills

    HumanLayer Skills: Modular Extensions for Claude Code

    HumanLayer's 'skills' repository delivers a curated set of modular extensions for Claude Code, focusing on configuration tuning, React type refinements, and automated agent loops.

    1.4kstarsTypeScript

    AI & LLMs· Tool

  • X post:Marco Ramilli

    Archify: Interactive Architecture Diagrams via AI Agents

    Marco Ramilli highlights Archify, an open-source skill for coding agents like Claude Code, Cursor, and Codex that turns codebases or system concepts into interactive HTML diagrams.

    1.1kbookmarks80.3kviews

    AI & LLMs· Tool

  • X post:Meng To

    Anatomy: Agent Skill for Animated Isometric SVG Explainers

    Meng To showcases 'Anatomy', an open-source agent skill by developer Ryan (@wheresryan22) that enables coding agents like Claude Code to generate interactive isometric SVG and WebGL visualisations.

    3.4kbookmarks101.5kviews

    AI & LLMs· Tool

Back to the knowledge base

Let's talk about your project

Get in touch

Locations

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

Parts of this content were created with the assistance of AI.