Community程式設計與開發github.com

ritamgh/claude-skills

為任何展示給使用者的 HTML 報表、頁面或成品加入「提問」面板,讓使用者直接在頁面中提問,並由該頁面專屬的 Claude 回答,而非原始對話。每當您發佈或開啟 HTML 報表、頁面或成品給使用者時,或者當使用者說「加入提問」、「從頁面提問」或想對報表提出問題時使用。

claude-skills 是什麼?

這個技能為任何 HTML 報表、頁面或 Claude 成品注入一個「提問」按鈕與側邊面板。面板內包含問題輸入框、Haiku/Sonnet 模型切換、串流回答、同一執行緒內的追問、停止按鈕,以及選取文字後按「就這點提問」來引用的功能。它支援兩種後端:在 claude.ai 的成品模式下,利用檢視者自己的 Claude 透過 `claude.use("sample")` 回答;在由 `ask-open` 腳本提供的本機頁面中,則透過 lens 伺服器 (`serve.py`) 回答,並且能存取 `--repo` 目錄下的額外檔案。如果頁面是純本機 `file://` 路徑,按鈕則不會顯示。主要使用情境是當您發佈一個需要使用者檢視並提問的 HTML 報表或成品時,將互動引導至頁面內的面板,而非回到原始工作階段。

相容平台✓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 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

提問面板

一個「提問」按鈕(右下角)會打開頁面上的側邊面板:問題輸入框、Haiku/Sonnet 切換、串流回答、同一執行緒內的追問、停止,以及選取文字後再按「就這點提問」來引用一段文字。一個小工具,兩個根據執行時期選擇的後端:

頁面位置後端回答來源
claude.ai 成品claude.use("sample"),使用檢視者自己的 Claude頁面文字
由 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. 告知使用者頁面上已有一個提問按鈕。這就是整個交接過程。

規則

  • 關於頁面的問題應在頁面的面板中提出。 請勿在工作階段中回答這些問題,也請勿使用成品留言進行問答(留言會回到工作階段)。如果問題需要實際工作(更改程式碼、新的調查),那是新任務,而非面板問題。
  • 注入操作是冪等的,並且會跳過 lens 課程(它們有自己的提問功能)。
  • 成品模式僅在點擊時呼叫 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 課程的頁面,它會以 mode: "report" 回應 POST /__lens/ask。

測試: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.

相關技能