show-me

name	show-me
description	会話中の話題を、最小の視覚表現（擬似コード・呼び出しツリー・コンポーネントツリー・ファイルツリー・Mermaid・diff・HTML）で見せて理解を助けるスキル。「図で説明して」「見せて」「視覚的に説明して」「イメージで教えて」「構造を見せて」「どう変わるのか見せて」「show me」などで発動する。説明が長文になりそうなときに、文章の代わりに図で示す。
metadata	{"version":"1.0.0","tier":"experimental","category":"diagram","tags":["visualization","explanation","mermaid","diff","code-shape"],"source":"humanlayer/skills plugins/show-me (MIT License, Copyright (c) 2026 HumanLayer)"}

show-me

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

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

表現の選び方

見せたいもの	表現
ロジック・アルゴリズム	擬似コード
実行時の制御フロー	呼び出しツリー
UI の構造・状態・モジュール境界	コンポーネントツリー
ファイルの責務・大きなリファクタ	浅いファイルツリー
コンポーネント間のやり取り・データフロー	Mermaid
「何が変わるか」（周囲の形は既にある）	diff
大半が新規・順序や所有が文脈依存・コピーして使わせたい	コードブロック全体
Mermaid では密度が高すぎる UI・レイアウト・状態比較・概念	HTML ファイル1枚

表現ごとの型

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

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

ガードレール

制限	内容
分量	1つ使うのが基本、複数使うこともある、全部使うことはまずない。詰め込んでユーザーを圧倒しない
配置	各図は、それを支える短い文章のすぐ隣に置く
粒度	いま答えるべき問い（または論点の選択肢）に必要な呼び出し・ファイル・props・状態・境界だけを残す
事実性	コードから描く場合は対象ファイルを読んで実体を確認する。推測で描かない
前置き	「では図で説明します」のような前口上を書かない。いきなり見せる