show-me

ユーザーが会話中のトピックを視覚的に理解できるようにします。前置きは省き、説明は簡潔にします。要点が明確になる最小限の表示を選びます。

• ロジックやアルゴリズムは疑似コードで示します。

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/       # parses user actions
├── sessions/       # owns session state
└── transport/      # sends API requests

• 変更点が要点で、周辺の構造がすでに存在する場合は diff を使います。トピックに合った差分形式にします。

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

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

ファイル構成の変更の場合：

 src/
 ├── commands/
+│   └── show-me.ts       # expands the slash command
 ├── 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、レイアウト、状態の比較、またはテキスト表示では複雑すぎる概念には、要点を絞った HTML ファイルを 1 つ作成します。図、インフォグラフィック、短いスライドデッキのうち、要点に合った形式を選びます。製品の色、書体、余白、コンポーネントに合わせ、実際のラベルとデータを使い、デスクトップとモバイルの両方に対応させます。その後、ユーザーが見られるように開きます。

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

ガイダンス

各ビジュアルは、それを補足する短い説明のすぐそばに配置します。ユーザーの現在の質問や、議論中の論点を解決するための選択肢に答えるのに必要な呼び出し、ファイル、プロパティ、状態、境界だけを残します。

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