Generate Explainer HTML

Omvandlar core.yaml+view.yaml till ett sandlådeisolerat, offline HTML-förklaringspaket med ljust/mörkt tema.

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

Testad · Fungerar ★ 9.2/10

Generate Explainer HTML — Omvandlar core.yaml+view.yaml till ett sandlådeisolerat, offline HTML-förklaringspaket med ljust/mörkt tema.

Vad den gör

Sätter samman ett fristående HTML-paket från ett core.yaml/view.yaml-par (+ valfri quiz.yaml) som producerats av syskonfärdigheten generate-explainer-yaml, vilket ger läsaren en flikindelad, omkopplingsbar förklaring av ett dokument, repo, PR eller specifikation. Aktiveras när användaren har eller vill ha ett core.yaml/view.yaml-par och ber om en visuell HTML-förklaring, eller vill lägga till en annan omkopplingsbar vy (tabell, kort, FAQ, quiz, etc.) till ett befintligt paket.

Testrapport

Handkodade en sandlådeisolerad iframe-vy enligt dess regler och körde om exakt samma kontroller för förbjudna mönster som scripts/validate_html.py använder (fetch/localStorage/http://, etc.) via grep — noll träffar, så löftet om 'offline, fristående, säker' höll faktiskt måttet mot sitt eget regelverk.

Testad: 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

Kommandon och exempelprompter

  • /generate-explainer-htmlOmvandlar core.yaml+view.yaml till ett sandlådeisolerat, offline HTML-förklaringspaket med ljust/mörkt tema.

Skills triggas av vanliga förfrågningar — inga kommandon att memorera. Efter installationen aktiverar prompter som dessa skillen (på engelska):

  • 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