SKILL · Design
show-me Skill
An open-source Agent Skill that helps you understand whatever is on screen visually, by compressing the current topic into the smallest, clearest structure. It reaches for pseudocode, call trees, component trees, file trees, Mermaid diagrams and diffs, and writes a single focused HTML file when a diagram is too dense for Mermaid. Five days of field use point to four jobs it does well, finding story angles, producing screenshot-ready infographics, untangling AI concepts like Agent, RAG and MCP, and mapping out an unfamiliar tool's workflow.
Here's the thing.
@Morry4AI (Morry.AI) opens by saying show-me has been picking up steam lately, with a lot of established folks recommending it. He ran it for five days before writing anything down.
His one-line summary of what it actually does, take whatever topic you're discussing and compress it into the smallest, clearest visual structure, so complex relationships make sense at a glance.
As a content creator, he landed on four uses.
Finding story angles. Feed it a news item, a product update or an industry event, and have it draw the background, the key players and the path of impact. Once the relationships are straight, the angle worth writing usually surfaces on its own.
Making visuals built for screenshots. When a plain text graphic isn't enough, it can produce an HTML infographic or a mini slide deck focused on a single topic. For article headers, social posts, course material, internal decks.
Getting through dense AI concepts. Hit something like Agent, RAG or MCP, walls of terminology, and he has it show the runtime flow and the data flow directly. Understand the process first, then go read the technical explanation. Far easier that way round.
Learning a complicated AI tool. Plenty of tools now ship with deep feature sets and buried menus. He has show-me draw the whole workflow, what you do first, where you configure it, how the output feeds the next step.
He adds a few more cases it fits well, explaining a complicated mechanism, laying out a system or project structure, following a process and how it changes over time, pulling content and knowledge into order.
The source, open on GitHub at humanlayer/skills.
What the Skill file itself describes, for anyone deciding whether to install it. It tells the agent to skip the preamble, keep prose short, and always pick the smallest view that makes the point clear. The formats it reaches for.
- Pseudocode for logic or an algorithm
- A call tree for runtime control flow
- A component tree for UI structure, including the state and module boundaries that matter
- A shallow file tree for file responsibility or a broad refactor
- Mermaid for component interaction, control flow or data flow
- A diff when the point is what changed and the surrounding shape already exists
- One focused HTML file, a diagram, an infographic or a short slide deck, when the thing is too dense for Mermaid, matched to the product's colors and type, working on desktop and mobile
There's a standing instruction in there too, place each visual right next to the short text it supports, and keep only the calls, files, props, states and boundaries that actually matter.
At the time of writing, the post sits at 667 likes, 1,021 bookmarks and 43.2K views. Original thread here, x.com/Morry4AI/status/2096181438756581715
