Generate Explainer HTML

Wandelt core.yaml+view.yaml in ein sandboxed, offline Light/Dark-HTML-Explainer-Bundle um.

von hirokita117 · hirokita117/yaml-to-html-skill

Getestet · Funktioniert ★ 9.2/10

Generate Explainer HTML — Wandelt core.yaml+view.yaml in ein sandboxed, offline Light/Dark-HTML-Explainer-Bundle um.

Was es kann

Stellt ein eigenständiges HTML-Bundle aus einem core.yaml/view.yaml (+ optional quiz.yaml) Paar zusammen, das vom verwandten Skill generate-explainer-yaml erzeugt wird. Dies gibt Lesern eine Erklärung eines Dokuments, Repos, PRs oder einer Spezifikation mit Tabs und umschaltbaren Ansichten. Wird ausgelöst, wenn der Benutzer ein core.yaml/view.yaml Paar hat oder möchte und nach einem visuellen HTML-Explainer fragt oder eine weitere umschaltbare Ansicht (Tabelle, Karten, FAQ, Quiz etc.) zu einem bestehenden Bundle hinzufügen möchte.

Testbericht

Eine Sandboxed-Iframe-Ansicht wurde manuell nach den Regeln erstellt und die exakten Skripte für verbotene Muster, die scripts/validate_html.py verwendet (fetch/localStorage/http://, etc.), wurden via grep erneut ausgeführt – null Treffer. Das Versprechen 'offline, eigenständig, sicher' hat sich also gegen das eigene Regelwerk bewährt.

Getestet am: 2026-07-14 · Claude Code 2.x (agent harness)

Installation

git clone https://github.com/hirokita117/yaml-to-html-skill
cd yaml-to-html-skill
mkdir -p ~/.claude/skills
cp -r skills/generate-explainer-html ~/.claude/skills/generate-explainer-html

Befehle & Beispiel-Prompts

  • /generate-explainer-htmlWandelt core.yaml+view.yaml in ein sandboxed, offline Light/Dark-HTML-Explainer-Bundle um.

Skills reagieren auf normale Anfragen — keine Slash-Befehle nötig. Nach der Installation aktivieren Prompts wie diese den Skill (auf Englisch):

  • Turn this core.yaml and view.yaml into a shareable HTML explainer
  • Build an offline explainer page for this repo with light and dark mode
  • Package our spec into a tabbed HTML doc people can open without internet