viz-inline

Viz Inline Skill

Explain the current topic visually, in chat, with the smallest shape that makes the point clear. Skip the preamble; keep prose brief. No files, no browser — that is viz-render's job.

Shapes

Pick one (rarely more) — the smallest that answers the current question.

Logic / algorithm → pseudocode

on(save)
  if content is unchanged
    return cached result
  write new content
  return fresh result

Runtime control flow → call tree

submitForm
  createSession
    persistPrompt
    launchAgent
  navigateToSession

UI structure → component tree (keep only the state hooks and module boundaries that matter)

<SessionPage> (src/routes/session.tsx)
  useSessionEvents()
  <SessionToolbar>
    <RunSkillButton> (packages/ui)

File responsibility / refactor scope → shallow file tree (one line of responsibility per entry)

src/
├── commands/       # parses user actions
├── sessions/       # owns session state
└── transport/      # sends API requests

A change to an existing shape → diff syntax (when most of the shape is unchanged, show only what moves; works on any shape above)

 submitForm
   createSession
     persistPrompt
+    expandSkillMention
   navigateToSession
+    subscribeToEvents

 on(save)
-  write content
+  if content is unchanged
+    return cached result
+  write new content

Code shape before code exists → types and signatures

function expandSkill(command: string): string

Component interaction / data flow → small Mermaid (2–8 nodes; if it needs more, it belongs in viz-render)

sequenceDiagram
    User->>UI: choose command
    UI->>Daemon: send expanded prompt
    Daemon-->>UI: stream result

Rules

• 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 — trim everything else.
• Show a whole block only when most of it is new or the user needs a copyable target shape.