CommunityCodierung & Entwicklunggithub.com

ritamgh/claude-skills

Fügt jedem HTML-Bericht, jeder Seite oder jedem Artefakt, das dem Benutzer angezeigt wird, ein „Ask“-Panel hinzu. So können Benutzer Fragen auf der Seite stellen, die von Claude auf der Seite selbst beantwortet werden – niemals von der Sitzung, die sie erstellt hat. Verwende es immer dann, wenn du einen HTML-Bericht, eine Seite oder ein Artefakt für den Benutzer veröffentlichst oder öffnest, und wenn dieser sagt: „Ask hinzufügen“, „Fragen von der Seite stellen“ oder einen Bericht hinterfragen möchte.

Was ist claude-skills?

Das „Ask Panel“-Skill erweitert HTML-Berichte, Artefakte oder lokale Seiten um ein interaktives Fragen-Panel. Ein „Ask“-Button öffnet eine Seitenleiste mit Eingabefeld, Modellauswahl (Haiku/Sonnet), gestreamten Antworten und Folge-Fragen in einem Thread. Es unterstützt zwei Backends: Als claude.ai-Artefakt nutzt es direkt die `sample`-Capability des Betrachters, lokal dient ein eigener Server (`ask-open`) als Backend, der auf Berichts- und optionalen Repository-Dateien basiert. Dies ermöglicht eine saubere Trennung von Sitzungs- und Seiten-Fragen und ist ideal für explorative Datenanalyse, automatisierte Berichte oder Debugging-Ausgaben. Das Skill stellt sicher, dass Fragen zur Seite nicht in der Hauptsitzung beantwortet werden, sondern direkt im Kontext der Seite – und dass das UI sicher (kein HTML-Rendering) und idempotent (mehrmalige Injektion schadet nicht) ist.

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

Installed? Explore more Codierung & Entwicklung skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

Dokumentation

Ask-Panel

Ein „Ask“-Button (unten rechts) öffnet ein seitliches Panel auf der Seite: Eingabefeld, Haiku/Sonnet-Umschalter, gestreamte Antworten, Folgefragen in einem Thread, Stopp-Button und „Markieren und dann „Ask about this““ zum Zitieren einer Passage. Ein Widget, zwei Backends, die zur Laufzeit ausgewählt werden:

Wo die Seite istBackendAntworten
claude.ai-Artefaktclaude.use("sample"), auf dem eigenen Claude des Betrachtersaus dem Seitentext
bereitgestellt durch ask-openlens serve.py (claude -p, schreibgeschützt)Seitentext plus Dateien in --repo
einfaches file://keins: der Button erscheint nien. z.

Schritte

  1. Als Artefakt veröffentlichen: python3 ~/.claude/skills/ask-panel/scripts/inject.py report.html (in-place, oder mit -o out.html), dann die Datei mit capabilities: {sample: {}} veröffentlichen. Lade zuerst das artifact-capabilities-Skill, wie bei jeder Capability.
  2. Lokal anzeigen: ~/.claude/skills/ask-panel/scripts/ask-open report.html [--repo VERZ]. Es injiziert, startet den Server und öffnet den Browser. Es läuft bis Ctrl-C, also starte es als Hintergrundbefehl. Es bedient nur diesen Bericht auf einem eigenen Port. Es gibt der geöffneten Seite den Lens-Schlüssel, also öffne nur vertrauenswürdige Berichte damit.
  3. Sage dem Benutzer, dass die Seite einen Ask-Button hat. Das ist die gesamte Übergabe.

Regeln

  • Fragen zur Seite gehören in das Panel der Seite. Beantworte sie nicht in der Sitzung und biete keine Artefakt-Kommentare für Fragen/Antworten an (Kommentare leiten zurück zur Sitzung). Wenn eine Frage echte Arbeit erfordert (Codeänderungen, neue Untersuchungen), handelt es sich um eine neue Aufgabe, keine Panel-Frage.
  • Die Injektion ist idempotent und überspringt lens-Lektionen (diese haben ihr eigenes Ask).
  • Der Artefakt-Modus ruft sample nur bei einem Klick auf, nie beim Laden. not_granted und die anderen permanenten Codes blenden das Panel aus.
  • Modelltext wird nur mit DOM-Knoten gerendert, niemals als HTML.

Dateien

assets/ask-panel.js, assets/ask-panel.css (das Widget, von inject.py inline eingefügt), scripts/inject.py, scripts/ask-open. Das lokale Backend ist ~/.claude/skills/lens/scripts/serve.py; es antwortet auf POST /__lens/ask mit mode: "report" für Seiten, die keine lens-Lektionen sind.

Tests: node ~/.claude/skills/ask-panel/scripts/test-panel.mjs (Playwright, Fake-Claude, kein Netzwerk), plus python3 ~/.claude/skills/lens/scripts/test-serve.py für den Server.

Individual skills in this repo

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

Verwandte Skills