/show-me : コーディングエージェントのためのコンパクトな視覚表現

tl;dr: エージェントに、長文の代わりにビジュアルで会話させよう。

1npx skills add humanlayer/skills --skill show-me

HTML より軽くて速い。開発作業的な問題のほとんどに十分使える。

コーディングエージェントはほぼ読めない

reddit の元 CEO:

https://x.com/yishan/status/2086534431075098628

pi の作者 Mario Zechner:

https://x.com/badlogicgames/status/2087068077309542889

Replicas の Connor:

https://x.com/connortbot/status/2081881377147109413

Dillon Mulroy は @backnotprop のスキルを 作って 広めて、モデルに言語を簡素化するよう求めている。

https://x.com/dillon_mulroy/status/2079238358358778142

その中身はこうだ:

自分の最後のメッセージを言い直して。専門用語を使うのをやめて、明確に話して。 人間同士が話すように、もっとシンプルで簡潔に述べて。

もううんざりだ

エージェントは紙面上では賢くなったが、この点に関しては使用体験が明らかに悪化している

人々が Claude に愛着を持っていたもの — その声、個性、「魂」は RL ダンジョンで洗い流されてしまった

sol はまだマシだが、それでも頻繁に、目が虚ろになるような専門用語の壁をぶつけてくる

これは最近受け取った応答だ。こんなことが一日に何度も起きる

私の提案: show me

私たちはこれを改善するために、特にコーディング向けの社内ツールをいろいろ試してきた。そしてそれらを show-me というスキルとして公開している。

今日から humanlayer で使える。他のコーディングエージェントでも使いたいなら、ここから入手できる:

1npx skills add humanlayer/skills --skill show-me

または、インライン HTML とダイアグラムをファーストクラスでサポートする humanlayer の組み込み版を入手:

1brew trust humanlayer/humanlayer
2brew tap humanlayer/humanlayer
3brew install humanlayer

coda hale のインフラシステムにおける直感と注意力についてのトーク を見たことがあれば、これが少し着想を得ているのがわかるだろう:

• 情報を分析するのは難しく、消耗する
• あなたの視覚野は何百万年もかけて、豊かな視覚情報を楽々処理するよう訓練されてきた
• ツールもそれに合わせて最適化すべきだ

斧が人の手に合ってこそ役に立つのと同じように、ソフトウェアも人の心に合ってこそ役に立つ

/show-me は、エージェントに長文の代わりに簡潔なビジュアルで状況を説明するように促す。

これはプログラム設計に非常に役立つ。最近は多くの人が省略するフェーズだが、私は不可欠だと思う。エージェントにコードを書き始めさせる前に、コードの形（型、シグネチャ、コールスタック）について話し合うべきだ。

同じテクニックは、大きな diff を事後的に探索して、レビュー中にどこを深掘りすべきかを理解するためにも使える。

中身の紹介

コンポーネントツリー

フロントエンドでも同じ考え方。重要な state hooks とモジュール境界は残し、それ以外は省く。

これは 2025 年 12 月に Twitter で共有したものだ:

https://x.com/dexhorthy/status/1998968236617199803

コールスタック

オーケストレーションや制御フローの作業、あるいはバックエンド系の問題全般に、dillon が「コールスタック」という形を提供してくれた。

https://x.com/dillon_mulroy/status/2059985696148849025

Tanishq は AST から直接コールスタックを計算するツールまで書いてくれた

https://x.com/tanishqk/status/2085800689129935342

ダイアグラム

定番だ。チャットインターフェースがインラインの mermaid に対応していれば、これらは大いに役立つ。（時々まだ粗いこともあるが、たいてい文字を読むよりはマシだ）

選択肢はたくさんある。私たちはステートダイアグラムとシーケンスダイアグラムが一番好きだ。

ファイルレイアウト

浅いファイルツリーで、各エントリに 1 行の責務を添える。「これはどこにあるのか」やリファクタリングの範囲を決めるのに役立つ。

擬似コード

特にアルゴリズム系の内容では、擬似コードの方が簡潔になることがある。

型とシグネチャ

コードが存在する前のコードの形。アーキテクチャドキュメントに書くには内部的な内容だが、エージェントが間違え得る部分でもある。

1interface Item {
2  id: ItemId
3  parentId: ItemId | null
4  // ...
5}
6
7interface Cursor {
8  position: ItemId
9  direction: 'up' | 'down'
10  // ...
11}
12
13resolveTarget(items: Item[], cursor: Cursor) -> ItemId | null

diff 構文

内容のほとんどが変わっていない場合は、diff 構文も使える:

コンポーネント変更の場合:

コールツリー変更の場合:

ファイルレイアウト変更の場合:

そして、実コードではなく擬似コードの形になるステートや制御フローの変更の場合:

HTML モックアップ

私たちのプロトタイピング作業の多くで、HTML が figma を置き換えた。（正直なところ、私も元々 figma をそれほど使いこなせていたわけではないが）

HTML ダイアグラム

時にはダイアグラムや説明が欲しいこともある。

humanlayer では、エージェントがアシスタントの応答に HTML を直接含めることができる。

ブラウザで開くこともできる。

その他のインスピレーション

@mattpocockuk の /teach スキルが生成する HTML エクスプレイナーにも敬意を表したい。とても良い。

試してみよう

1npx skills add humanlayer/skills --skill show-me

スキルをインストールしたら、/show-me を呼び出すか、エージェントに show-me スキルを使うよう依頼しよう。ルート、サービス、機能、プルリクエスト、現在のトピックに向けてもいいし、モデルに質問や発言を言い直させるだけの用途でもいい。

コンテンツが多すぎる。見せて。

または

/show-me を HTML エクスプレイナーとして

感想を聞かせてください！ @humanlayer_dev か @dexhorthy をタグ付けして、結果やカスタマイズした内容、追加した内容を共有して、一緒にアイデアを出しましょう！

GIF