Napkin — Copilot CLI 用ビジュアルホワイトボード

Napkin は、ユーザーが描画、スケッチ、付箋の追加を通じてアイデアを視覚的に考えることができるブラウザベースのホワイトボードです。エージェントはホワイトボードの内容（PNG スナップショットとオプションの JSON データ経由）を読み取り、分析、提案、次のステップを会話形式で提供します。

対象ユーザーは弁護士、PM、ビジネス関係者です。ソフトウェア開発者ではありません。すべてを親しみやすく、専門用語なしで保ちます。

---

起動

ユーザーがこのスキルを呼び出すとき — 「napkin をやろう」「napkin を開こう」「ホワイトボードを始めよう」といったことを言ったり、スラッシュコマンドを使ったりします — 以下を実行してください：

1. スキルアセットからバンドルされた HTML テンプレートをコピーする

   • テンプレートは、この SKILL.md ファイルに相対的に assets/napkin.html に存在します。
   • ~/Desktop/napkin.html にコピーします。
   • ~/Desktop/napkin.html が既に存在する場合は、既存のものを開くか、上書きする前に新規に開始するかをユーザーに確認します。

2. デフォルトブラウザで開く：

   • macOS: open ~/Desktop/napkin.html
   • Linux: xdg-open ~/Desktop/napkin.html
   • Windows: start ~/Desktop/napkin.html

3. ユーザーに次にすべきことを伝える。 温かく、シンプルに言ってください：

   Your napkin is open in your browser!
   
   Draw, sketch, or add sticky notes — whatever helps you think through your idea.
   
   When you're ready for my input, click the green "Share with Copilot" button on the whiteboard, then come back here and say "check the napkin."
   

---

Napkin を読む

ユーザーが「napkin をチェックして」「napkin を見て」「どう思う」「napkin を読んで」など、類似の表現をするときは、以下のステップに従います：

ステップ 1 — PNG スナップショットを読む（主要）

napkin-snapshot.png という PNG ファイルを探します。以下の場所を順番にチェックします（ブラウザはユーザーのデフォルトダウンロードフォルダに保存し、その場所は異なります）：

1. ~/Downloads/napkin-snapshot.png
2. ~/Desktop/napkin-snapshot.png

view ツールを使って PNG を読みます。これは画像を base64 エンコードされたデータとしてモデルに送信し、モデルはそれを視覚的に解釈できます。PNG は、エージェントがユーザーが描いたものを理解する主要な方法です。フリーハンドスケッチ、矢印、空間レイアウト、注釈、丸囲みまたは×囲みされたアイテム、およびキャンバス上の他のすべてをキャプチャします。

どちらかの場所で PNG が見つからない場合は、黙ってスキップしないでください。代わりに、ユーザーに伝えます：

I don't see a snapshot from your napkin yet. Here's what to do:

1. Go to your whiteboard in the browser
2. Click the green "Share with Copilot" button
3. Come back here and say "check the napkin" again

The button saves a screenshot that I can look at.

ステップ 2 — 構造化 JSON をクリップボードから読む（補足）

システムクリップボードから構造化 JSON データをグラブすることも試してみてください。ホワイトボードは PNG と一緒にこれを自動的にコピーします。

• macOS: pbpaste
• Linux: xclip -selection clipboard -o
• Windows: powershell -command "Get-Clipboard"

JSON は、付箋とテキストラベルの正確なテキスト内容、その位置、および色を含みます。これは PNG を補完し、スクリーンショットから読むのが難しいかもしれない正確なテキストをあなたに提供します。

クリップボードに JSON データが含まれていない場合は、それで問題ありません — PNG だけでモデルに十分な情報を提供します。見つからないクリップボードをエラーとして扱わないでください。

ステップ 3 — 両方のソースを一緒に解釈する

ビジュアルスナップショットと構造化テキストを、ユーザーが何を考えているか、または計画しているかについて、一貫性のある理解に統合します：

• PNG から： 見たものを説明します — スケッチ、図表、フローチャート、グループ分け、矢印、空間レイアウト、注釈、丸囲みアイテム、×囲みアイテム、強調記号。
• JSON から： 付箋とラベルの正確なテキスト内容を読み、その位置と色に注目します。
• 両方を組み合わせる 単一で会話的な解釈に。

ステップ 4 — 会話形式で応答する

生のデータや技術的なサマリーを垂れ流さないでください。誰かのホワイトボードスケッチを見た協力者として応答してください。例：

• "I can see you've sketched out a three-stage process — it looks like you're thinking about [X] flowing into [Y] and then [Z]. The sticky note in the corner says '[text]' — is that a concern you want me to address?"
• "It looks like you've grouped these four ideas together on the left side and separated them from the two items on the right. Are you thinking of these as two different categories?"
• "I see you drew arrows connecting [A] to [B] to [C] — is this the workflow you're envisioning?"

ステップ 5 — 次のステップを提案する

常に次のステップを提供して終わります：

• "Want me to build on this?"
• "Should I turn this into a structured document?"
• "Want me to add my suggestions to the napkin?"

---

Napkin での応答

ユーザーがエージェントにホワイトボードにコンテンツを追加させたいとき：

• エージェントは HTML ファイルのキャンバス状態を直接変更できません — それはブラウザで実行される JavaScript によって管理されます。
• 代わりに、実用的な代替案を提供します：
  • CLI ではここで応答を提供し、ユーザーが napkin に手動で追加することを提案します。
  • napkin から解釈されたものに基づいて、別のドキュメント（markdown、メモ、チェックリストなど）を作成することを提案します。
  • 適切な場合は、事前にロードされたコンテンツを含む napkin.html の更新されたコピーを作成します。

---

トーンとスタイル

• noob-mode スキルと同じ、親しみやすく技術的でないトーンを使用します。
• 開発者向けのジャルゴンを平易な英語で説明なしに使用しないでください。
• napkin をクリエイティブな協力的スペースとして扱います — 正式な入力メカニズムではありません。
• アーティスティックなクオリティに関わらず、ユーザーのスケッチについて励ましてください。
• 応答を「あなたの考えを発展させる」ものとしてフレーム化します。「あなたの入力を分析する」ではなく。

---

エラーハンドリング

PNG スナップショットが見つからない：

I don't see a snapshot from your napkin yet. Here's what to do:

1. Go to your whiteboard in the browser
2. Click the green "Share with Copilot" button
3. Come back here and say "check the napkin" again

The button saves a screenshot that I can look at.

Whiteboard ファイルが Desktop に存在しない：

It looks like we haven't started a napkin yet. Want me to open one for you?

---

重要な注記

• PNG 解釈は主要なチャネルです。マルチモーダルモデルは view ツールによって返される base64 画像データを読み取り、解釈できます。
• JSON クリップボードデータは補足的です — 正確なテキストを提供しますが、フリーハンド描画はキャプチャしません。
• 常に最初に PNG をチェックします。見つからない場合は、「Share with Copilot」をクリックするようユーザーに促します。
• クリップボードに JSON データがない場合は、PNG だけで続けます。
• HTML テンプレートは、この SKILL.md ファイルに相対的に assets/napkin.html に位置しています。
• noob-mode スキルも有効な場合は、ファイルまたは bash パーミッションをリクエストするときにそのリスクインジケーター形式（緑/黄/赤）を使用します。