/show-me: compact visual representations for coding agents
tl;dr make your agent converse visually instead of in walls of prose.
npx skills add humanlayer/skills --skill show-meLighter and faster than HTML, good enough for most dev-work shaped problems.
Coding agents are pretty much unreadable
The former CEO of reddit:
Mario Zechner, creator of pi:
Connor from Replicas:
Dillon Mulroy even made a skill, /bro to ask the model to simplify language.
The contents are:
Restate your last message. Stop using jargon and speak coherently.
State it more simply and concisely, like one human talking to another.
i am so sick of this
agents got more intelligent on paper, but the experience of using them got noticeably worse along this dimension
the thing people used to love about claude - its voice, it's personality, its "soul" has been flushed out in the RL dungeon
sol is somewhat less cringe but still regularly hits us with walls of jargon that make eyes glaze over
here's a response i got recently. this happens multiple times a day
my proposal: show me
We've been playing with internal tools to make this better, specifically for coding, and publishing them in a skill we call show-me.
It's live in humanlayer today, and if you want it in any other coding agent - you can get it here:
npx skills add humanlayer/skills --skill show-meOr, get the built-in humanlayer version that includes inline html and diagrams first-class:
brew trust humanlayer/humanlayer
brew tap humanlayer/humanlayer
brew install humanlayerIf you ever watched coda hale's talk on intuition vs. attention in infrastructure systems, it's somewhat inspired:
Just as an axe must fit the human hand to be useful, software must fit the human mind to be useful
/show-me prompts the agent to use concise visuals to explain what's happening, instead of walls of prose.
This is really good for program design - the phase many folks skip these days, but that I think is essential. You should be discussing the shape of the code (the types, the signatures, the call stacks) before agents get to work on writing it.
The same techniques can also be used to explore large diffs post-hoc to understand what to dig into during review.
What's inside
component trees
Same idea on the frontend, with the state hooks and module boundaries that matter kept in and everything else left out.
I shared this one on twitter back in December 2025:
call stacks
For orchestration or control-flow work, or just any backend-shaped problem, dillon gave us this "call stack" shape.
Tanishq even wrote a tool to compute them straight from the AST
diagrams
A classic. If your chat interface supports inline mermaid, these can help a lot. (Sometimes they're still slop, but it's usually better than reading words)
Lots of options here. we like state diagrams and sequence diagrams the most.
file layouts
A shallow file tree, one line of responsibility per entry. Good for "where does this live" and for scoping a refactor.
pseudocode
Especially for algorithmic stuff, pseudocode can be more concise.
types and signatures
The shape of the code before any of it exists - the stuff that's too internal for an architecture doc but that an agent can still get wrong.
interface Item {
id: ItemId
parentId: ItemId | null
// ...
}
interface Cursor {
position: ItemId
direction: 'up' | 'down'
// ...
}
resolveTarget(items: Item[], cursor: Cursor) -> ItemId | nulldiff syntax
You can also use diff syntax for this, if most of the content is unchanged:
For a component change:
For a call-tree change:
For a file-layout change:
And for a state or control-flow change, where the shape is pseudocode rather than real code:
html mockups
HTML has replaced figma for a lot of our prototyping work. (tbh i never really was super handy with figma anyway)
html diagrams
Sometimes a diagram or explainer is what you need.
In humanlayer we let the agent include HTML directly in assistant responses.
But you can also just open it in your browser.
other inspiration
I also wanna hat tip @mattpocockuk for the html explainers that are generated by his /teach skill - very good.
go try it
npx skills add humanlayer/skills --skill show-meAfter installing the skill, invoke /show-me or ask the agent to use the show-me skill. Point it at a route, service, feature, pull request, or current topic, or just use it to ask the model to restate a question or statement.
this is too much content. show me.
or
/show-me as an html explainer
Let us know what you think! Tag @humanlayer_dev or @dexhorthy on with your results or what you customized/added and let's riff!