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

• コンポーネント間の相互作用、制御フロー、データフローは Mermaid で示します。

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

• 変更点が要点であり、周囲の形がすでに存在する場合は diff を使用します。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、レイアウト、状態の比較、または Mermaid には密すぎる概念については、焦点を絞った HTML ファイルを 1 つ作成します。図、インフォグラフィック、または短いスライドデッキのうち、要点に合うものを選びます。製品の色、タイポグラフィ、スペーシング、コンポーネントに合わせ、実際のラベルとデータを使用し、デスクトップとモバイルをサポートします。その後、ユーザー向けに開きます。

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

guidance

各ビジュアルは、それが支える短いテキストの隣に配置します。ユーザーの現在の質問に答えるため、または現在の議論ポイントを解決するための選択肢に必要な、コール、ファイル、props、状態、境界のみを保持します。

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