Generate Explainer HTML

Convierte core.yaml+view.yaml en un paquete explicativo HTML sandboxed, offline, con temas claro/oscuro.

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

Probado · Funciona ★ 9.2/10

Generate Explainer HTML — Convierte core.yaml+view.yaml en un paquete explicativo HTML sandboxed, offline, con temas claro/oscuro.

Qué hace

Ensambla un paquete HTML autocontenido a partir de un par core.yaml/view.yaml (+ quiz.yaml opcional) producido por la skill hermana generate-explainer-yaml, dando a los lectores una explicación con pestañas y vistas intercambiables de un documento, repositorio, PR o especificación. Se activa cuando el usuario tiene o quiere un par core.yaml/view.yaml y pide un explicador HTML visual, o quiere añadir otra vista intercambiable (tabla, tarjetas, faq, quiz, etc.) a un paquete existente.

Informe de la prueba

Se creó manualmente una vista de iframe sandboxed según sus reglas y se volvieron a ejecutar las comprobaciones exactas de patrones prohibidos que usa scripts/validate_html.py (fetch/localStorage/http://, etc.) mediante grep — cero coincidencias, por lo que la promesa de 'offline, autocontenido, seguro' se cumplió realmente frente a su propio reglamento.

Probado el: 2026-07-14 · Claude Code 2.x (agent harness)

Instalación

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

Comandos y prompts de ejemplo

/generate-explainer-htmlConvierte core.yaml+view.yaml en un paquete explicativo HTML sandboxed, offline, con temas claro/oscuro.

Los skills se activan con peticiones en lenguaje natural, sin comandos que memorizar. Tras instalarlo, prompts como estos lo activan (en inglés):

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

Informe completo →