SKILL.md
---
---
greenline renders its own frontmatter: quoted name and description; the description rewritten without em dashes under the widened rule
name: show-me
name: "show-me"
description: Help the user understand the current topic visually with concise diagrams, code-shape sketches, and focused HTML artifacts.
description: "Explain the current topic visually in the reply: pseudocode, call trees, component trees, shallow file trees, shape diffs, and diagrams or a one-file HTML view where a renderer exists. Use whenever a reply would walk through a flow, a hierarchy, a state machine, a comparison, or a change to an existing shape, and whenever the user asks to be shown."
---
---
the scope paragraph: a durable diagram the user did not ask for is offered in one line; on the ask or the yes diagram-design draws it when installed, otherwise a text diagram goes into the repository's existing docs home and the optional method is named, so an explicit ask is answered rather than deflected
Answer first, then show. The visual sits beside the answer, in a form the current client renders in the reply; answer-plainly governs the claim, unslop the surrounding prose, and the visual earns its place only when it makes the explanation clearer. Apply this on your own whenever a reply would walk through a flow, a hierarchy, a state machine, a comparison or a change to an existing shape, and whenever the user asks to be shown. A read-only explanation creates no repository artifact: it lives in the response or in a capture outside the repository. A durable diagram the user did not ask for is offered in one line. On the user's ask or yes, `diagram-design` (opt-in) draws it when it is installed; when it is not, draw the diagram as text into the repository's existing docs home and name `diagram-design` as the optional method for a rendered one.
Help the user understand the current topic of conversation visually. Skip the preamble and keep prose brief. Pick the smallest view that makes the key point clear.
Help the user understand the current topic of conversation visually. Skip the preamble and keep prose brief. Pick the smallest view that makes the key point clear.
- Show logic or an algorithm as pseudocode:
- Show logic or an algorithm as pseudocode:
34 unchanged lines
```text
```text
on(save)
on(save)
if content is unchanged
if content is unchanged
return cached result
return cached result
write new content
write new content
return fresh result
return fresh result
```
```
- Show runtime control flow as a call tree:
- Show runtime control flow as a call tree:
```text
```text
submitForm
submitForm
createSession
createSession
persistPrompt
persistPrompt
launchAgent
launchAgent
navigateToSession
navigateToSession
```
```
- Show UI structure as a component tree, including state and module boundaries that matter:
- Show UI structure as a component tree, including state and module boundaries that matter:
```tsx
```tsx
<SessionPage> (apps/example/src/routes/session.tsx)
<SessionPage> (apps/example/src/routes/session.tsx)
useSessionEvents()
useSessionEvents()
<SessionToolbar>
<SessionToolbar>
<RunSkillButton> (packages/ui)
<RunSkillButton> (packages/ui)
```
```
- Show file responsibility or a broad refactor as a shallow file tree:
- Show file responsibility or a broad refactor as a shallow file tree:
```text
```text
src/
src/
├── commands/ # parses user actions
├── commands/ # parses user actions
├── sessions/ # owns session state
├── sessions/ # owns session state
└── transport/ # sends API requests
└── transport/ # sends API requests
```
```
mermaid renders in neither harness TUI, so the worked sequenceDiagram taught a form the reader cannot see.
- Show component interaction, control flow, or data flow with Mermaid:
```mermaid
sequenceDiagram
participant User
participant UI
participant Daemon
User->>UI: choose command
UI->>Daemon: send expanded prompt
Daemon-->>UI: stream result
```
- Use `diff` when the point is what changes and the surrounding shape already exists. Match the diff shape to the topic.
- Use `diff` when the point is what changes and the surrounding shape already exists. Match the diff shape to the topic.
For a component change:
For a component change:
53 unchanged lines
```diff
```diff
<SessionPage>
<SessionPage>
useSessionEvents()
useSessionEvents()
<SessionToolbar>
<SessionToolbar>
+ <RunSkillButton />
+ <RunSkillButton />
<SessionTimeline>
<SessionTimeline>
+ <SkillResultCard />
+ <SkillResultCard />
```
```
For a file-layout change:
For a file-layout change:
```diff
```diff
src/
src/
├── commands/
├── commands/
+│ └── show-me.ts # expands the slash command
+│ └── show-me.ts # expands the slash command
├── sessions/
├── sessions/
-└── transport.ts
-└── transport.ts
+└── transport/
+└── transport/
+ ├── client.ts
+ ├── client.ts
+ └── stream.ts
+ └── stream.ts
```
```
For a call-tree or call-stack change:
For a call-tree or call-stack change:
```diff
```diff
submitForm
submitForm
createSession
createSession
persistPrompt
persistPrompt
+ expandSkillMention
+ expandSkillMention
launchAgent
launchAgent
- navigateToSession
- navigateToSession
+ navigateToSession
+ navigateToSession
+ subscribeToEvents
+ subscribeToEvents
```
```
For a state or control-flow change:
For a state or control-flow change:
```diff
```diff
on(save)
on(save)
- write content
- write content
+ if content is unchanged
+ if content is unchanged
+ return cached result
+ return cached result
+ write new content
+ write new content
+ invalidate cache
+ invalidate cache
```
```
- Show the whole block when most of it is new, when omitted context would hide ownership or order, or when the user needs a copyable target shape:
- Show the whole block when most of it is new, when omitted context would hide ownership or order, or when the user needs a copyable target shape:
```ts
```ts
function expandSkill(command: string): string {
function expandSkill(command: string): string {
const skillName = command.slice(1)
const skillName = command.slice(1)
return `use the ${skillName} skill`
return `use the ${skillName} skill`
}
}
```
```
the HTML bullet keeps its scratch home under .greenline/tmp/show-me/ and the read-only case, and compares density against a text view instead of the Mermaid option the copy removed because neither harness renders it
- For a visual UI, layout, state comparison, or concept too dense for Mermaid, write one focused HTML file — a diagram, an infographic, or a short slide deck, whichever fits the point. Match the product's colors, type, spacing, and components; use real labels and data; support desktop and mobile. Then open it for the user:
- For a visual UI, layout, state comparison, or concept too dense for a text view, write one focused HTML file, a diagram, an infographic, or a short slide deck, whichever fits the point. Match the product's colors, type, spacing, and components; use real labels and data; support desktop and mobile. During authorized artifact work the file is scratch under `.greenline/tmp/show-me/`; a read-only explanation writes it outside the repository. Then open it for the user with the harness's shell tool:
```
```
Upstream's Bash(open ...) is Claude Code's tool-call notation; the copy shows the plain shell command the harness's shell tool runs, at the greenline scratch path.
Bash(open path/to/show-me-{description}.html)
open .greenline/tmp/show-me/{description}.html
```
```
### guidance
### guidance
1 unchanged lines
Place each visual next to the short text it supports. Keep only the calls, files, props, states, and boundaries needed to answer the user's current question or the options to resolve the current discussion point.
Place each visual next to the short text it supports. Keep only the calls, files, props, states, and boundaries needed to answer the user's current question or the options to resolve the current discussion point.
You may use one of these, you may use several, it is unlikely you will use all of them. Use your judgement and don't overwhelm the user.
You may use one of these, you may use several, it is unlikely you will use all of them. Use your judgement and don't overwhelm the user.
the Durable output line now agrees with the scope paragraph: none unless the user asks, the same offer, draw or text-and-name rule
Durable output: none unless the user asks (a visual in the reply; scratch under `.greenline/tmp/show-me/` during authorized artifact work). A durable diagram the user did not ask for is offered in one line; on the ask or the yes, `diagram-design` (opt-in) draws it when installed, otherwise a text diagram goes into the repository's existing docs home and the optional method is named. answer-plainly governs the claim, unslop the prose.