Show Me

show-me

いま話している内容を、視覚的に見せて理解させる。前置きは省き、文章は短く保つ。要点が伝わる最小の表現を1つ選ぶのが原則。

棲み分け: 成果物としての作図（設計書に貼る図・AWS構成図）は mermaid-diagrammer / aws-architecture-diagram に委譲する。本スキルは「会話の理解を助ける即席の視覚化」を担う。

表現の選び方

表現ごとの型

擬似コード（ロジック・アルゴリズム）

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

呼び出しツリー（実行時の制御フロー）

submitForm
  createSession
    persistPrompt
    launchAgent
  navigateToSession

コンポーネントツリー（UI 構造）

状態とモジュール境界のうち、意味のあるものだけ添える。

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

ファイルツリー（責務・リファクタ範囲）

深く掘らず、責務コメントを添える。

src/
├── commands/       # ユーザー操作の解釈
├── sessions/       # セッション状態の保持
└── transport/      # API リクエストの送信

Mermaid（相互作用・制御フロー・データフロー）

sequenceDiagram
    participant User as ユーザー
    participant UI
    participant Daemon
    User->>UI: コマンドを選ぶ
    UI->>Daemon: 展開したプロンプトを送る
    Daemon-->>UI: 結果をストリームで返す

diff（変化そのものが要点のとき）

diff の形は話題に合わせる。コンポーネントの話ならコンポーネントツリーの diff、ファイル配置の話ならファイルツリーの diff を出す。

コンポーネントの変更:

 <SessionPage>
   useSessionEvents()
   <SessionToolbar>
+    <RunSkillButton />
   <SessionTimeline>
+    <SkillResultCard />

ファイル配置の変更:

 src/
 ├── commands/
+│   └── show-me.ts       # スラッシュコマンドを展開する
 ├── sessions/
-└── transport.ts
+└── transport/
+    ├── client.ts
+    └── stream.ts

呼び出しツリー・コールスタックの変更:

 submitForm
   createSession
     persistPrompt
+    expandSkillMention
     launchAgent
-  navigateToSession
+  navigateToSession
+    subscribeToEvents

状態・制御フローの変更:

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

コードブロック全体

大半が新規のとき、文脈を省くと所有や順序が分からなくなるとき、コピーできる完成形が要るときは、部分ではなく全体を見せる。

function expandSkill(command: string): string {
  const skillName = command.slice(1)
  return `use the ${skillName} skill`
}

HTML ファイル1枚

視覚的な UI・レイアウト・状態の比較・Mermaid では密度が高すぎる概念は、目的に合わせて図・インフォグラフィック・短いスライドのいずれかを HTML 1ファイルで書く。

• 対象プロダクトの配色・タイポグラフィ・余白・コンポーネントに合わせる
• ラベルとデータは実物を使う（ダミーで埋めない）
• デスクトップとモバイルの両方で読めるようにする

書いたら開いて見せる:

open path/to/show-me-{description}.html

ガードレール