HTML Explainer

Bygger polerede, kildebaserede, spilbare enkelt-side eller slide-deck web-forklarere med en reel kvalitetsloop.

Testet · Virker ★ 10.0/10

Hvad det gør

En tung proces-skill (scoping interview, research cap, anti-slop visuelt designsystem, obligatoriske spilbare mikro-demoer, screenshot-og-kritik kvalitetsloop) til at omdanne et emne til en selvstændig interaktiv HTML-forklarer. Udløses ved anmodninger om at bygge en interaktiv forklarer, guide, walkthrough eller one-pager, eller om at omdanne materiale til en visuel webside, folk kan udforske.

Testrapport

Reel A/B, gengivet i browseren: skill-buildet producerede en ægte spilbar Doppler-shift canvas-demo med farvekodede komprimerede/strækkede bølgefronter, redaktionel serif/sans typografi og et ægte assemble.mjs-injiceret review-overlay, mod en baseline, der var præcis den emoji-hero/gradient-text/bento-card-skabelon, som skillens egen anti-slop-tjekliste advarer imod.

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

Kommandoer og eksempelprompter

/html-explainerBygger polerede, kildebaserede, spilbare enkelt-side eller slide-deck web-forklarere med en reel kvalitetsloop.

Skills udløses af almindelige forespørgsler — ingen kommandoer at huske. Efter installationen aktiverer prompter som disse skillen (på engelsk):

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 hele rapporten →