show-me

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: ```text on(save) if content is unchanged return cached result write new content return fresh result ``` - Show runtime control flow as a call tree: ```text submitForm createSession persistPrompt launchAgent navigateToSession ``` - Show UI structure as a component tree, including state and module boundaries that matter: ```tsx <SessionPage> (apps/example/src/routes/session.tsx) useSessionEvents() <SessionToolbar> <RunSkillButton> (packages/ui) ``` - Show file responsibility or a broad refactor as a shallow file tree: ```text src/ ├── commands/ # parses user actions ├── sessions/ # owns session state └── transport/ # sends API requests ``` - 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. For a component change: ```diff <SessionPage> useSessionEvents() <SessionToolbar> + <RunSkillButton /> <SessionTimeline> + <SkillResultCard /> ``` For a file-layout change: ```diff src/ ├── commands/ +│ └── show-me.ts # expands the slash command ├── sessions/ -└── transport.ts +└── transport/ + ├── client.ts + └── stream.ts ``` For a call-tree or call-stack change: ```diff submitForm createSession persistPrompt + expandSkillMention launchAgent - navigateToSession + navigateToSession + subscribeToEvents ``` For a state or control-flow change: ```diff on(save) - write content + if content is unchanged + return cached result + write new content + 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: ```ts function expandSkill(command: string): string { const skillName = command.slice(1) return `use the ${skillName} skill` } ``` - For a visual UI, layout, state comparison, or concept too dense for Mermaid, create one focused HTML artifact. Match the product's colors, type, spacing, and components; use real labels and data; support desktop and mobile. Save the artifact in the workspace and return a clickable link or preview supported by the host. Follow the repository's artifact-location and sharing rules; do not publish private content to an external service without permission. - 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.