Community编程与开发github.com

ritamgh/claude-skills

为任何 HTML 报告、页面或向用户展示的工件添加“提问”面板,使用户可以在页面内提问,并由该页面自身的 Claude(而非创建该会话的 Claude)作答。适用于任何需要发布或打开 HTML 报告、页面或工件的场景。

claude-skills 是什么?

此技能为 HTML 报告或页面集成一个交互式“提问”面板,让用户直接在页面内提问,无需返回 Claude 会话。面板包含提问框、模型选择(Haiku/Sonnet)、流式回答、连续问答及“停止”按钮,并支持选中文本后点击“关于此提问”引用原文。它支持两种后端:在 Claude 工件中运行时,使用查看者自身的 Claude 实例通过 `claude.use("sample")` 作答;本地通过 `ask-open` 脚本启动时,则使用独立的 Lens 服务(`serve.py`)读取页面文本及 `--repo` 目录中的文件。该技能通过 `inject.py` 脚本将面板注入 HTML 文件,注入操作是幂等的,且会跳过 Lens 课程页面(它们自带提问功能)。问答逻辑仅由该面板处理,不会回到原会话,适合快速查阅型问题;若要修改代码或开启新调查,则作为独立任务。此技能支持 Claude AI 工件和本地文件,使用简单,不需复杂配置。

兼容平台✓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 课程的页面,它将 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.

相关技能