HTML Explainer
Erstellt polierte, quellengestützte, spielbare Single-Page- oder Slide-Deck-Web-Erklärungen mit einer echten Qualitäts-Schleife.
Getestet · Funktioniert
Was es kann
Ein schwergewichtiger Prozess-Skill (Scoping-Interview, Research-Cap, Anti-Slop-Visual-Design-System, obligatorische spielbare Mikro-Demos, Screenshot-und-Kritik-Qualitätsschleife) zum Umwandeln eines Themas in eine in sich geschlossene interaktive HTML-Erklärung. Löst bei Anfragen zum Erstellen einer interaktiven Erklärung, Anleitung, eines Walkthroughs oder eines One-Pagers aus oder um Material in eine visuelle Webseite zu verwandeln, die Leute erkunden können.
Testbericht
Echte A/B-Darstellung im Browser: Der Skill-Build produzierte eine wirklich spielbare Doppler-Shift-Canvas-Demo mit farbcodierten komprimierten/gestreckten Wellenfronten, redaktioneller Serif/Sans-Typografie und einem echten assemble.mjs-injizierten Überprüfungs-Overlay, gegenüber einer Basislinie, die exakt dem Emoji-Hero/Gradient-Text/Bento-Card-Template entsprach, vor dem die eigene Anti-Slop-Checkliste des Skills warnt.
Getestet am: 2026-07-16 · Claude Code 2.x (agent harness)
Installation
git clone https://github.com/ds-vibe/html-explainer mkdir -p ~/.claude/skills cp -r html-explainer ~/.claude/skills/html-explainer
Befehle & Beispiel-Prompts
/html-explainerErstellt polierte, quellengestützte, spielbare Single-Page- oder Slide-Deck-Web-Erklärungen mit einer echten Qualitäts-Schleife.
Skills reagieren auf normale Anfragen — keine Slash-Befehle nötig. Nach der Installation aktivieren Prompts wie diese den Skill (auf Englisch):
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