show-me

ユーザーが現在の会話トピックを視覚的に理解できるように支援します。前置きは省き、散文は簡潔に保ちます。重要なポイントを明確にする最小のビューを選んでください。

他のスキルやワークフローがビュー形状を指定している場合は、その形状を直接使用します。形状選択やHTMLアーティファクトのオプションは省略し、呼び出し元が要求するスコープとフォーマット内で出力を維持します。

• ロジックやアルゴリズムを擬似コードで表示：

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)

• エクスポートされたAPIやインターフェースの変更を、ファイルごとにグループ化したAPIサーフェスの差分として表示。変更されたエクスポートシンボルやシグネチャのみを含め、追加、削除、置換を明示します：

 internal/api/suggestion.go
-ApplySuggestion(client, prNumber, commentID)
+ApplySuggestion(client, target SuggestionTarget)
+
 internal/api/types.go
 type SuggestionTarget struct {
+  PullRequest int
+  CommentID   int
 }

• ファイルの責務や大規模なリファクタリングを浅いファイルツリーで表示：

src/
├── commands/       # ユーザーアクションを解析
├── sessions/       # セッション状態を所有
└── transport/      # APIリクエストを送信

• コンポーネントの相互作用、制御フロー、データフローをMermaidで表示。トピックが分岐ワークフロー、状態遷移、ドメインやデータの関係、アーキテクチャ、依存関係、デプロイトポロジーを含む場合は、Mermaid図タイプを読み、一致する形状を選択します。フローチャート、シーケンス図、状態図、クラス図、ER図の範囲内に留めてください。これらはターミナルレンダラーが描画できる種類です。図は120カラム幅未満、短いラベルと少数のノードに保ちます。それより広い場合は、ターミナルに通知を表示して置き換えます。フェンス付きMermaidを生テキストとして表示する画面では、コールツリーまたは擬似コード形状を優先し、図がダウングレードされたことを伝えます。

  時間経過に伴う相互作用の順序がポイントとなる場合は、シーケンス図を使用します：

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

• 変更点がポイントであり、周囲の形状が既に存在する場合は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`
}

• 視覚的なUI、レイアウト、状態比較、またはMermaidでは密度が高すぎるコンセプトについては、フォーカスされたHTMLファイルを1つ作成します（図、インフォグラフィック、短いスライドデッキのいずれかで、ポイントに合うもの）。製品の色、タイプ、スペーシング、コンポーネントに合わせ、実際のラベルとデータを使用し、デスクトップとモバイルをサポートします。ローカルターミナルではプラットフォームのオープナーで開き、ホストされた画面ではアーティファクトとして公開してリンクを提供します：

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

ガイダンス

各視覚要素を、それがサポートする短いテキストの隣に配置します。ユーザーの現在の質問や、現在の議論ポイントを解決するための選択肢に答えるために必要な呼び出し、ファイル、プロパティ、状態、境界のみに留めます。

これらの中から1つ使用しても、複数使用しても、すべてを使用することはほとんどありません。判断力を働かせ、ユーザーを圧倒しないようにしてください。