/show-me
Explain the current topic or a proposed design visually with types and signatures, pseudocode, a call tree, a component tree, a file tree, a diff, a whole block, a Mermaid diagram, or a published Artifact.
Claude Code
$ npx -y skills add bendrucker/claude --skill show-me --agent claude-code
Codex
$ npx skills add bendrucker/claude --skill show-me -a codex -y
Cursor
$ npx skills add bendrucker/claude --skill show-me -a cursor -y
Gemini CLI
$ npx skills add bendrucker/claude --skill show-me -a gemini-cli -y
GitHub Copilot
$ npx skills add bendrucker/claude --skill show-me -a github-copilot -y
OpenCode
$ npx skills add bendrucker/claude --skill show-me -a opencode -y
Windsurf
$ npx skills add bendrucker/claude --skill show-me -a windsurf -y
SKILL.md
show-me.SKILL.mdname: show-me
description: Explain the current topic or a proposed design visually with types and signatures, pseudocode, a call tree, a component tree, a file tree, a diff, a whole block, a Mermaid diagram, or a published Artifact.
argument-hint: "[<what to show>]"
disable-model-invocation: true
Show Me
Explain $ARGUMENTS visually. Pick the smallest view that makes the point, and keep the prose around it short.
Arguments
With no argument, show the current topic of conversation.
Formats
Pick one format or several, rarely all.
Types and Signatures
The shape of code before an implementation exists, showing the interface and the seam:
interface Skill {
name: string
body: string
}
interface SkillSource {
read(name: string): Promise<Skill>
}
function expand(command: string, source: SkillSource): Promise<string>Pseudocode
Logic or an algorithm:
on(save)
if content is unchanged
return cached result
write new content
return fresh resultCall Tree
Runtime control flow inside one process:
submitForm
createSession
persistPrompt
launchAgent
navigateToSessionComponent Tree
UI structure:
<SessionPage> (apps/example/src/routes/session.tsx)
useSessionEvents()
<SessionToolbar> (packages/ui)
<SessionTimeline>
File Tree
File responsibility or the shape of a refactor:
src/
├── commands/ # parses user actions
├── sessions/ # owns session state
└── transport.ts # sends API requests
Diff
A change against a shape that already exists:
Component tree:
<SessionPage>
useSessionEvents()
<SessionToolbar>
+ <RunSkillButton />
<SessionTimeline>
+ <SkillResultCard />
File tree:
src/
├── commands/
+│ └── show-me.ts # expands the slash command
├── sessions/
-└── transport.ts
+└── transport/
+ ├── client.ts
+ └── stream.ts
Call tree:
submitForm
createSession
persistPrompt
+ expandSkillMention
launchAgent
navigateToSession
+ subscribeToEventsState and control flow:
on(save)
- write content
- return result
+ if content is unchanged
+ return cached result
+ write new content
+ return fresh result
Whole Block
Most of the block is new, omitted context would hide ownership or order, or the user needs a copyable target shape:
function expandSkill(command: string): string {
const skillName = command.slice(1)
return `use the ${skillName} skill`
}Mermaid
Interaction that crosses modules or processes, and data flow through them:
sequenceDiagram
participant User
participant UI
participant Daemon
User->>UI: choose command
UI->>Daemon: send expanded prompt
Daemon-->>UI: stream resultArtifact
A rendered UI, a layout, a state comparison, or a concept too dense for Mermaid. Publish it as an Artifact.
Planning
When the topic is work not yet done, show the proposed shape rather than describing it. Types and signatures carry a design first, then the call tree, then the file layout. Where the work changes something that exists, show the proposal as a diff.
Scope
Place each visual next to the short text it supports.
Keep only the calls, files, props, states, and seams that answer the question on the table.
End the reply once the question is answered, on the last visual or one sentence after it. Observations the user did not ask about, such as stubs, latent bugs, open decisions, or an offer to build it, wait for the user to ask.
Read more
name: show-me description: Explain the current topic or a proposed design visually with types and signatures, pseudocode, a call tree, a component tree, a file tree, a diff, a whole block, a Mermaid diagram, or a published Artifact. argument-hint: "[<what to show>]" disable-model-invocation: true
Show Me
Explain $ARGUMENTS visually. Pick the smallest view that makes the point, and keep the prose around it short.
Arguments
With no argument, show the current topic of conversation.
Formats
Pick one format or several, rarely all.
Types and Signatures
The shape of code before an implementation exists, showing the interface and the seam:
interface Skill {
name: string
body: string
}
interface SkillSource {
read(name: string): Promise<Skill>
}
function expand(command: string, source: SkillSource): Promise<string>Pseudocode
Logic or an algorithm:
on(save)
if content is unchanged
return cached result
write new content
return fresh resultCall Tree
Runtime control flow inside one process:
submitForm
createSession
persistPrompt
launchAgent
navigateToSessionComponent Tree
UI structure:
<SessionPage> (apps/example/src/routes/session.tsx) useSessionEvents() <SessionToolbar> (packages/ui) <SessionTimeline>
File Tree
File responsibility or the shape of a refactor:
src/ ├── commands/ # parses user actions ├── sessions/ # owns session state └── transport.ts # sends API requests
Diff
A change against a shape that already exists:
Component tree:
<SessionPage> useSessionEvents() <SessionToolbar> + <RunSkillButton /> <SessionTimeline> + <SkillResultCard />
File tree:
src/ ├── commands/ +│ └── show-me.ts # expands the slash command ├── sessions/ -└── transport.ts +└── transport/ + ├── client.ts + └── stream.ts
Call tree:
submitForm
createSession
persistPrompt
+ expandSkillMention
launchAgent
navigateToSession
+ subscribeToEventsState and control flow:
on(save) - write content - return result + if content is unchanged + return cached result + write new content + return fresh result
Whole Block
Most of the block is new, omitted context would hide ownership or order, or the user needs a copyable target shape:
function expandSkill(command: string): string {
const skillName = command.slice(1)
return `use the ${skillName} skill`
}Mermaid
Interaction that crosses modules or processes, and data flow through them:
sequenceDiagram
participant User
participant UI
participant Daemon
User->>UI: choose command
UI->>Daemon: send expanded prompt
Daemon-->>UI: stream resultArtifact
A rendered UI, a layout, a state comparison, or a concept too dense for Mermaid. Publish it as an Artifact.
Planning
When the topic is work not yet done, show the proposed shape rather than describing it. Types and signatures carry a design first, then the call tree, then the file layout. Where the work changes something that exists, show the proposal as a diff.
Scope
Place each visual next to the short text it supports.
Keep only the calls, files, props, states, and seams that answer the question on the table.
End the reply once the question is answered, on the last visual or one sentence after it. Observations the user did not ask about, such as stubs, latent bugs, open decisions, or an offer to build it, wait for the user to ask.
Other skills on claude.
cli
Type-safe CLI argument parsing with commander and @commander-js/extra-typings, the standard parser for this repo's Bun scripts.…
prose-lab
Turn the user's labels on repo prose, or their notes from reviewing a document in Plannotator, into calibrated Vale rules.
activity
Report real device usage from ActivityWatch. Covers per-app time, window titles, and active vs idle spans. Use when asked "what…
agent-team
Orchestrating Claude Code agent teams. Use when creating teams, spawning teammates, assigning tasks, configuring teammate modes,…
handoff
Hand the current conversation off to a fresh background agent that picks up the work immediately, so you can step away and track…
More skills from other plugins.
brainstorming
You MUST use this before any creative work - creating features, building components, adding functionality, modifying behavior, or…
ask-matt
Ask which skill or flow fits your situation. A router over the skills in this repo.
Questions about show-me.
- Which coding agents can use show-me?
- show-me installs in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and Windsurf with the skills CLI, using each agent's flag shown on this page. Flowy's auto-invocation, which fires a skill when your prompt matches, runs in Claude Code only.

