HTML Explainer
Costruisce spiegazioni web a pagina singola o slide-deck curate, basate su fonti e giocabili, con un vero ciclo di qualità.
Promosso
Cosa fa
Una skill di processo 'heavyweight' (intervista di scoping, ricerca approfondita, sistema di design visivo anti-slop, micro-demo giocabili obbligatorie, ciclo di qualità screenshot-e-critica) per trasformare un argomento in una spiegazione HTML interattiva e autonoma. Si attiva su richieste di costruire una spiegazione interattiva, una guida, un walkthrough o un one-pager, o di trasformare materiale in una pagina web visiva che le persone possano esplorare.
Rapporto di test
Vero A/B, renderizzato nel browser: la build della skill ha prodotto una demo canvas di effetto Doppler genuinamente giocabile con fronti d'onda compressi/allungati codificati a colori, tipografia editoriale serif/sans e un vero overlay di revisione iniettato da assemble.mjs, contro un baseline che era esattamente il template emoji-hero/gradient-text/bento-card contro cui la checklist anti-slop della skill stessa avverte.
Testato il: 2026-07-16 · Claude Code 2.x (agent harness)
Installazione
git clone https://github.com/ds-vibe/html-explainer mkdir -p ~/.claude/skills cp -r html-explainer ~/.claude/skills/html-explainer
Comandi e prompt di esempio
/html-explainerCostruisce spiegazioni web a pagina singola o slide-deck curate, basate su fonti e giocabili, con un vero ciclo di qualità.
Gli skill si attivano con richieste in linguaggio naturale, senza comandi da ricordare. Dopo l'installazione, prompt come questi lo attivano (in inglese):
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