Communityコーディング&開発github.com

Askパネル

ユーザーに表示するHTMLレポート、ページ、またはアーティファクトにAskパネルを追加し、ユーザーがページ上で質問できるようにします。回答はページ自身のClaude(セッションのClaudeではなく)が行います。HTMLレポートやアーティファクトを公開・開く際、またはユーザーが「askを追加」「ページから質問する」「レポートに質問したい」と言ったときに使用します。

Askパネル とは?

Askパネルは、HTMLレポートやアーティファクトに直接埋め込まれるQ&Aインタラクションウィジェットです。右下の「Ask」ボタンをクリックするとサイドパネルが開き、ユーザーは質問ボックスへの入力、Haiku/Sonnetモデルの切り替え、ストリーミング回答の表示、フォローアップ質問、生成停止、テキスト選択後の「Ask about this」による引用質問が可能です。このスキルは2つのバックエンドをサポートします:claude.ai上のアーティファクトでは、閲覧者のClaudeアカウントが`claude.use("sample")`を通じてページテキストから回答します。ローカルで`ask-open`で配信されるページの場合、Lensサーバー(`serve.py`)がページテキストと`--repo`で指定されたファイルに基づいて回答します。プレーンな`file://`ではボタンは表示されません。注入は冪等で、Lensレッスンはスキップされます。モデルのテキストはDOMノードのみでレンダリングされ、HTMLとしては挿入されません。質問はページ内のパネルで完結すべきであり、セッションやアーティファクトコメントで回答してはいけません。テストはPlaywrightとPythonで提供されています。

対応✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/ritamgh/claude-skills/tree/HEAD/skills/ask-panel

Installed? Explore more コーディング&開発 skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

Askパネル は何をしますか?

右下の「Ask」ボタンをクリックするとサイドパネルが開きます。パネルには質問ボックス、Haiku/Sonnet切り替え、ストリーミング回答、スレッド内でのフォローアップ、停止ボタン、テキスト選択後の「Ask about this」(引用質問)が含まれます。1つのウィジェットに、実行時に選択される2つのバックエンドがあります:

ページの場所バックエンド回答の基盤
claude.ai アーティファクト閲覧者のClaude上の claude.use("sample")ページテキスト
ask-open で配信Lens serve.py(claude -p、読み取り専用)ページテキストと --repo 内のファイル
通常の file://なし:ボタンは表示されませんなし

手順

  1. アーティファクトとして公開: python3 ~/.claude/skills/ask-panel/scripts/inject.py report.html(上書き、または -o out.html)、そのファイルを capabilities: {sample: {}} を付けて公開します。他の機能と同様、最初に artifact-capabilities スキルを読み込んでください。
  2. ローカルで表示: ~/.claude/skills/ask-panel/scripts/ask-open report.html [--repo DIR]。注入、サーバー起動、ブラウザ表示を一度に行います。Ctrl-C まで実行されるため、バックグラウンドコマンドとして起動してください。このレポートだけを独自のポートで配信します。開かれたページにはLensキーが付与されるため、信頼できるレポートのみを開いてください。
  3. ユーザーに「このページにはAskボタンがあります」と伝えます。これがハンドオフのすべてです。

ルール

  • ページに関する質問は、ページ内のパネルで行ってください。 セッションで回答したり、Q&A目的でアーティファクトコメントを使用しないでください(コメントはセッションに戻ります)。質問に本当の作業(コード変更、新たな調査)が必要な場合は、それはパネルの質問ではなく、新しいタスクです。
  • 注入は冪等であり、Lensレッスンはスキップされます(レッスンには独自のAskがあります)。
  • アーティファクトモードでは、sample はクリック時のみ呼び出され、ロード時には呼び出されません。not_granted およびその他の恒久的なコードはパネルを非表示にします。
  • モデルのテキストはDOMノードのみでレンダリングされ、HTMLとしては挿入されません。

ファイル

assets/ask-panel.js、assets/ask-panel.css(ウィジェット、inject.py によってインライン化)、scripts/inject.py、scripts/ask-open。ローカルバックエンドは ~/.claude/skills/lens/scripts/serve.py で、Lensレッスン以外のページに対して POST /__lens/ask を mode: "report" で応答します。

テスト:node ~/.claude/skills/ask-panel/scripts/test-panel.mjs(Playwright、偽のClaude、ネットワーク不要)、およびサーバー用の python3 ~/.claude/skills/lens/scripts/test-serve.py。

Individual skills in this repo

This repo contains 2 individual skills — each has its own dedicated page.

関連スキル