{"slug": "show-hn-show-me-agent-skill-for-compact-visual-representations", "title": "Show HN: /show-me: agent skill for compact visual representations", "summary": "HumanLayer released 'show-me', a coding agent skill that prompts AI agents to explain their work with compact visuals like component trees and call stacks instead of prose, available via 'npx skills add humanlayer/skills --skill show-me'. The skill, inspired by Coda Hale's talk on intuition vs. attention, aims to improve the readability of coding agent outputs, which developers like former Reddit CEO Yishan and Mario Zechner have criticized as jargon-heavy.", "body_md": "# # show-me: a coding agent skill for compact visual representations\n\n[Dex](https://twitter.com/dexhorthy) · August 12, 2026 · < 7 min read\n\ntl;dr make your agent converse visually instead of in walls of prose.\n\n```\nnpx skills add humanlayer/skills --skill show-me\n```\n\nLighter and faster than HTML, good enough for most dev-work shaped problems.\n\n### ### Coding agents are pretty much unreadable\n\nThe former CEO of reddit:\n\n[\n](https://x.com/yishan/status/2086534431075098628)[https://x.com/yishan/status/2086534431075098628](https://x.com/yishan/status/2086534431075098628)\n\n[Mario Zechner](https://x.com/badlogicgames), creator of pi:\n\n[\n](https://x.com/badlogicgames/status/2087068077309542889)[https://x.com/badlogicgames/status/2087068077309542889](https://x.com/badlogicgames/status/2087068077309542889)\n\nConnor from Replicas:\n\n[\n](https://x.com/connortbot/status/2081881377147109413)[https://x.com/connortbot/status/2081881377147109413](https://x.com/connortbot/status/2081881377147109413)\n\n[Dillon Mulroy](https://x.com/dillon_mulroy) even made a skill, `/bro`\n\nto ask the model to simplify language.\n\n[\n](https://x.com/dillon_mulroy/status/2079238358358778142)[https://x.com/dillon_mulroy/status/2079238358358778142](https://x.com/dillon_mulroy/status/2079238358358778142)\n\nThe contents are:\n\n```\nRestate your last message. Stop using jargon and speak coherently. \nState it more simply and concisely, like one human talking to another.\n```\n\n### ### i am so sick of this\n\nagents got more intelligent on paper, but the experience of using them got noticeably worse along this dimension.\n\nthe thing people used to love about claude - its voice, it's personality, its \"soul\" has been flushed out in the RL dungeon\n\nsol is somewhat less cringe but still regularly hits us with walls of jargon that make eyes glaze over\n\nhere's a response i got recently. this happens multiple times a day\n\n### ### my proposal: show me\n\nWe've been playing with internal tools to make this better, specifically for coding, and publishing them in a skill we call `show-me`\n\n.\n\nIt's live in humanlayer today, and if you want it in any other coding agent - you can get it here:\n\n```\nnpx skills add humanlayer/skills --skill show-me\n```\n\nIf you ever watched [coda hale's talk on intuition vs. attention in infrastructure systems](https://www.youtube.com/watch?v=e_6gkfTomUQ), it's somewhat inspired:\n\n- analyzing information is hard and exhausting\n- your visual cortex was trained over millions of years to process rich visual information effortlessly\n- optimize tools accordingly\n\nJust as an axe must fit the human hand to be useful, software must fit the human mind to be useful\n\n`/show-me`\n\nprompts the agent to use concise visuals to explain what's happening, instead of walls of prose.\n\nThis is really good for [program design](https://hlyr.dev/wsff-gh#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.\n\nThe same techniques can also be used to explore large diffs post-hoc to understand what to dig into during review.\n\n### ### What's inside\n\n#### #### component trees\n\nSame idea on the frontend, with the state hooks and module boundaries that matter kept in and everything else left out.\n\n```\n<SessionPage> (apps/example/src/routes/session.tsx)\n  useSessionEvents()\n  <SessionToolbar>\n    <RunSkillButton> (packages/ui)\n```\n\nI shared this one on twitter back in december:\n\n[\n](https://x.com/dexhorthy/status/1998968236617199803)[https://x.com/dexhorthy/status/1998968236617199803](https://x.com/dexhorthy/status/1998968236617199803)\n\n#### #### call stacks\n\nFor orchestration or control-flow work, or just any backend-shaped problem, dillon gave us this \"call stack\" shape.\n\n```\nhandleCreateSession\n  validateRequest\n  SessionStore.insert\n  publish(session.created)\n    AgentWorker.run\n      loadContext\n      callModel\n      persistResult\n```\n\n[\n](https://x.com/dillon_mulroy/status/2059985696148849025)[https://x.com/dillon_mulroy/status/2059985696148849025](https://x.com/dillon_mulroy/status/2059985696148849025)\n\n[tanish](https://x.com/tanishqk) even wrote a tool to compute them straight from the AST\n\n[\n](https://x.com/tanishqk/status/2085800689129935342)[https://x.com/tanishqk/status/2085800689129935342](https://x.com/tanishqk/status/2085800689129935342)\n\n#### #### diagrams\n\nA 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)\n\nLots of options here. we like state diagrams and sequence diagrams the most.\n\n#### #### file layouts\n\nA shallow file tree, one line of responsibility per entry. Good for \"where does this live\" and for scoping a refactor.\n\n```\nsrc/\n├── commands/           # parses user actions into intents\n│   ├── registry.ts     # name -> handler, one place to add a command\n│   └── show-me.ts      # expands the slash command\n├── sessions/           # owns session state and lifecycle\n│   ├── store.ts        # SessionStore - insert / list / open\n│   ├── worker.ts       # AgentWorker.run - load context, call model\n│   └── events.ts       # publishes session.created and friends\n├── transport/          # talks to the API, knows nothing about sessions\n│   ├── client.ts       # request / response mapping\n│   └── stream.ts       # SSE decoding, reconnect, backoff\n└── config.ts           # env + feature flags\n```\n\n#### #### pseudocode\n\nEspecially for algorithmic stuff, pseudocode can be more concise.\n\n```\ncapture()                                   // only if this surface owns focus\n  target = keyboard focus\n             ? focusedBlock\n             : firstBlockIntersectingViewportTop\n  anchor = wholeBlockAnchor(blocks, target)  // type + text + neighbor text\n  offset = targetRect.top - scrollRect.top   // signed: place within tall block\n  publish({ anchor, offset, scrollTop, revision + 1 })\n\nrestore(snapshot)                           // after editor + blocks exist\n  placement = resolveAnchor(blocks, snapshot.anchor)\n    exact text match\n    -> normalized-whitespace match, scored by neighbor context\n    -> 'outdated'\n  if resolved\n    scrollTop += targetRect.top - scrollRect.top - snapshot.offset\n  else\n    scrollTop = snapshot.scrollTop           // failure path\n```\n\n#### #### types and signatures\n\nThe 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.\n\n```\ninterface Item {\n  id: ItemId\n  parentId: ItemId | null\n  // ...\n}\n\ninterface Cursor {\n  position: ItemId\n  direction: 'up' | 'down'\n  // ...\n}\n\nresolveTarget(items: Item[], cursor: Cursor) -> ItemId | null\n```\n\n#### #### diff syntax\n\nYou can also use diff syntax for this, if most of the content is unchanged:\n\nFor a component change:\n\n```\n <SessionPage>\n   useSessionEvents()\n   <SessionToolbar>\n+    <RunSkillButton />\n   <SessionTimeline>\n+    <SkillResultCard />\n```\n\nFor a call-tree change:\n\n```\n handleCreateSession\n   validateRequest\n+  enforceQuota\n   SessionStore.insert\n   publish(session.created)\n     AgentWorker.run\n       loadContext\n+        fetchPriorTurns\n       callModel\n       persistResult\n+        emitUsageEvent\n```\n\nFor a file-layout change:\n\n```\n src/\n ├── commands/\n+│   └── show-me.ts       # expands the slash command\n ├── sessions/\n-└── transport.ts\n+└── transport/\n+    ├── client.ts\n+    └── stream.ts\n```\n\nAnd for a state or control-flow change, where the shape is pseudocode rather than real code:\n\n```\n on(save)\n-  write content\n+  if content is unchanged\n+    return cached result\n+  write new content\n+  invalidate cache\n```\n\n#### #### html mockups\n\nHTML has replaced figma for a lot of our prototyping work. (tbh i never really was super handy with figma anyway)\n\n#### #### html diagrams\n\nSometimes a diagram or explainer is what you need.\n\nIn [humanlayer](https://humanlayer.com) we let the agent include HTML directly in assistant responses.\n\nBut you can also just open it in your browser.\n\n### ### other inspiration\n\nI also wanna hat tip [Matt Pocock](https://x.com/mattpocockuk) for the html explainers that are generated by his `/teach`\n\nskill - very good.\n\n## ## go try it\n\n```\nnpx skills add humanlayer/skills --skill show-me\n```\n\nAfter installing the skill, invoke `/show-me`\n\nor ask the agent to use the `show-me`\n\nskill. 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.\n\n```\nthis is too much content. show me.\n```\n\nor\n\n```\n/show-me as an html explainer\n```\n\nLet us know what you think! Tag @humanlayer_dev or @dexhorthy on twitter with your results or what you customized/added and let's riff!", "url": "https://wpnews.pro/news/show-hn-show-me-agent-skill-for-compact-visual-representations", "canonical_source": "https://www.humanlayer.com/blog/show-me-skill", "published_at": "2026-08-12 15:58:22+00:00", "updated_at": "2026-08-12 16:14:14.958078+00:00", "lang": "en", "topics": ["developer-tools", "ai-agents", "ai-products"], "entities": ["HumanLayer", "Dex", "Mario Zechner", "Dillon Mulroy", "Coda Hale", "Yishan"], "alternates": {"html": "https://wpnews.pro/news/show-hn-show-me-agent-skill-for-compact-visual-representations", "markdown": "https://wpnews.pro/news/show-hn-show-me-agent-skill-for-compact-visual-representations.md", "text": "https://wpnews.pro/news/show-hn-show-me-agent-skill-for-compact-visual-representations.txt", "jsonld": "https://wpnews.pro/news/show-hn-show-me-agent-skill-for-compact-visual-representations.jsonld"}}