napkin

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

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

対象ユーザーは弁護士、プロダクトマネージャー、ビジネス関係者であり、ソフトウェア開発者ではありません。親しみやすく、専門用語を避けた表現を使ってください。

---

起動

ユーザーが「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 — 会話形式で応答する

生のデータや技術的な要約をそのまま提示してはいけません。ホワイトボードのスケッチを一緒に見た協力者として応答してください。例：

• 「3 段階のプロセスを描いているのがわかります。[X] から [Y]、そして [Z] へと進む流れを考えているようですね。隅の付箋には『[text]』とあります。これは私に対応してほしい懸念事項でしょうか？」
• 「左側で 4 つのアイデアをまとめ、右側の 2 項目とは分けていますね。この 2 つを別のカテゴリーとして考えていますか？」
• 「[A] から [B]、そして [C] へと矢印でつないでいますね。これが想定しているワークフローでしょうか？」

ステップ 5 — 次のステップを尋ねる

最後は必ず、次のステップを提案して終わります。

• 「これをもとに続きを作成しましょうか？」
• 「これを構成の整ったドキュメントにまとめましょうか？」
• 「ナプキンに提案を追加しましょうか？」

---

ナプキンへの回答

ユーザーがエージェントにホワイトボードへ内容を追加してほしいと希望した場合：

• エージェントは HTML ファイルのキャンバスの状態を直接変更できません。キャンバスの状態は、ブラウザーで実行される JavaScript によって管理されています。
• 代わりに、次のような実用的な方法を提案します。
  • ここで CLI に回答を提示し、ユーザー自身でナプキンに追加するよう提案します。
  • ナプキンから読み取った内容をもとに、別のドキュメント（Markdown、メモ、チェックリストなど）を作成することを提案します。
  • 適切であれば、内容をあらかじめ入力した napkin.html の更新版を作成します。

---

トーンとスタイル

• noob-mode スキルと同じ、親しみやすく、専門用語を避けた口調を使います。
• 開発者向けの専門用語は、平易な言葉で説明せずに使わないでください。
• ナプキンを、正式な入力手段ではなく、創造的で共同作業を行う場として扱います。
• スケッチの出来栄えにかかわらず、ユーザーを励まします。
• 回答は「入力を分析する」ではなく、「ユーザーの考えを発展させる」という形で伝えます。

---

エラー処理

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.

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 にあります。
• ウォークスルー画像 assets/step1-activate.svg、assets/step2-whiteboard.svg、assets/step3-draw.svg、assets/step4-share.svg、および assets/step5-response.svg は、ドキュメント用の図であり、実行時の入力ではありません。
• noob-mode スキルも有効な場合、ファイルまたは bash の権限を求める際は、そのリスク表示形式（緑／黄／赤）を使用します。