HTML Explainer

Bygger polerade, källbaserade, spelbara en-sidiga eller bildspel-webbförklaringar med en verklig kvalitetsloop.

Testad · Fungerar ★ 10.0/10

Vad den gör

En tung process-skill (scoping-intervju, research cap, anti-skräp visuellt designsystem, obligatoriska spelbara mikrodemos, skärmdump-och-kritik kvalitetsloop) för att omvandla ett ämne till en fristående interaktiv HTML-förklaring. Triggers vid begäran om att bygga en interaktiv förklaring, guide, genomgång, eller en-sidig sida, eller att omvandla material till en visuell webbsida som folk kan utforska.

Testrapport

Verklig A/B, renderad i webbläsaren: skill-bygget producerade en genuint spelbar Doppler-shift canvas-demo med färgkodade komprimerade/utsträckta vågfronter, redaktionell serif/sans-typografi och en verklig assemble.mjs-injicerad granskningsöverlägg, jämfört med en baslinje som var exakt mallen med emoji-hjälte/gradient-text/bento-kort som skillens egen anti-skräp-checklista varnar för.

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

Kommandon och exempelprompter

/html-explainerBygger polerade, källbaserade, spelbara en-sidiga eller bildspel-webbförklaringar med en verklig kvalitetsloop.

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

Build a small interactive one-pager explaining the Doppler effect
Turn this topic into a playable web guide people can click through
Make a self-contained explainer page with a working micro-demo on it

Läs hela rapporten →