HTML Explainer
Crea explicadores web pulidos, basados en fuentes y reproducibles de una sola página o presentación de diapositivas con un bucle de calidad real.
Probado · Funciona
Qué hace
Una habilidad de proceso de peso pesado (entrevista de alcance, cap de investigación, sistema de diseño visual anti-basura, micro-demos reproducibles obligatorios, bucle de calidad de captura de pantalla y crítica) para convertir un tema en un explicador interactivo HTML autocontenido. Se activa en solicitudes para construir un explicador interactivo, guía, tutorial o página de una sola página, o para convertir material en una página web visual que las personas puedan explorar.
Informe de la prueba
Real A/B, renderizado en el navegador: la compilación de la habilidad produjo una demostración de lienzo de desplazamiento Doppler genuinamente reproducible con frentes de onda comprimidos/estirados codificados por color, tipografía serif/sans editorial y una superposición de revisión real inyectada por assemble.mjs, frente a una línea base que era exactamente la plantilla de héroe emoji/texto degradado/tarjeta bento que la propia lista de verificación anti-basura de la habilidad advierte.
Probado el: 2026-07-16 · Claude Code 2.x (agent harness)
Instalación
git clone https://github.com/ds-vibe/html-explainer mkdir -p ~/.claude/skills cp -r html-explainer ~/.claude/skills/html-explainer
Comandos y prompts de ejemplo
/html-explainerCrea explicadores web pulidos, basados en fuentes y reproducibles de una sola página o presentación de diapositivas con un bucle de calidad real.
Los skills se activan con peticiones en lenguaje natural, sin comandos que memorizar. Tras instalarlo, prompts como estos lo activan (en inglés):
Build a small interactive one-pager explaining the Doppler effectTurn this topic into a playable web guide people can click throughMake a self-contained explainer page with a working micro-demo on it