Make the topic visible. Skip the preamble and keep prose brief. Pick the smallest view that makes the key point clear.
This skill produces visuals. It does not embed, upload or publish them — the caller does that.
Parameters
Callers may constrain the output. Each is optional except the topic.
| Parameter | Meaning | Default |
|---|---|---|
| topic | What to make visible. Required. | — |
max-views |
Ceiling on how many views to return | your judgement |
size |
tight keeps every view under roughly 12 lines, dropping any detail that is not load-bearing. normal keeps what the topic needs. |
normal |
/pr calls this with size: tight and a low max-views, because a PR body is
scanned rather than studied.
The views
Logic or an algorithm — pseudocode:
on(save)
if content is unchanged
return cached result
write new content
return fresh result
Runtime control flow or order — call tree:
submitForm
createSession
persistPrompt
launchAgent
navigateToSession
UI structure — component tree, including the state and module boundaries that matter:
<SessionPage> (apps/example/src/routes/session.tsx)
useSessionEvents()
<SessionToolbar>
<RunSkillButton> (packages/ui)
File responsibility, or a broad refactor — shallow file tree:
src/
├── commands/ # parses user actions
├── sessions/ # owns session state
└── transport/ # sends API requests
Component interaction, control flow, or data flow — Mermaid:
sequenceDiagram
participant User
participant UI
participant Daemon
User->>UI: choose command
UI->>Daemon: send expanded prompt
Daemon-->>UI: stream result
Mostly new code, or where omitted context would hide ownership or order, or where the reader needs a copyable target shape — the whole block:
function expandSkill(command: string): string {
const skillName = command.slice(1)
return `use the ${skillName} skill`
}
An endpoint's request/response, or a table's columns — the contract:
POST /sessions
→ { email, password }
← 201 { sessionId, expiresAt }
← 401 { error: "invalid_credentials" }
A key type or data structure that changed shape — diff the type:
type Session = {
id: string
- legacyToken: string
+ idpSub: string
+ expiresAt: Date
}
Diffing a shape
Use diff when the point is what changes and the surrounding shape already
exists. Match the diff shape to the topic — diff the component tree, the
file tree, the call tree or the pseudocode. A literal source diff is not a
view; the reader can already read the source diff.
A component change:
<SessionPage>
useSessionEvents()
<SessionToolbar>
+ <RunSkillButton />
<SessionTimeline>
+ <SkillResultCard />
A file-layout change:
src/
├── commands/
+│ └── show-me.ts # expands the slash command
├── sessions/
-└── transport.ts
+└── transport/
+ ├── client.ts
+ └── stream.ts
A call-tree change:
submitForm
createSession
persistPrompt
+ expandSkillMention
launchAgent
navigateToSession
+ subscribeToEvents
A state or control-flow change:
on(save)
- write content
+ if content is unchanged
+ return cached result
+ write new content
+ invalidate cache
Screenshots
For a change to something the reader would want to see — a UI, a layout, a visual state — a screenshot of the real thing beats any text view.
- Get the app running. If the project has a skill for launching it, use that.
- Drive it to the state that matters with Playwright or the browser extension, whichever the session has.
- Capture to a file outside the repo, and return the path. Capture the state it changed from as well, when the comparison is the point.
Never commit a screenshot into the repository. Embedding, uploading and hosting belong to whoever asked for the visual.
If the app cannot be run or driven, say so plainly and offer the nearest text view. Do not hand-write a mock of a UI that exists.
Guidance
Place each visual next to the short text it supports. Keep only the calls, files, props, states and boundaries needed to answer the question actually being asked.
Each view must add information rather than repeat the prose. A view that restates the sentence above it is noise with syntax highlighting.
You may use one of these, you may use several, you will rarely use all of them. Use your judgement and do not overwhelm the reader.
Credits
Adapted from Dex Horthy's show-me (HumanLayer), MIT licensed. See
CREDITS.md.