HTML Explainer
Tworzy dopracowane, oparte na źródle, grywalne jedno-stronicowe lub slajdowe wyjaśnienia internetowe z rzeczywistą pętlą jakości.
Testowano · Działa
Co robi ten skill
Ciężki proces umiejętności (wywiad scopingowy, czapka badawcza, system projektowania wizualnego anty-slop, obowiązkowe grywalne mikro-demostracje, pętla jakości zrzut ekranu i krytyki) do przekształcenia tematu w samodzielne interaktywne wyjaśnienie HTML. Wyzwalane przy prośbach o zbudowanie interaktywnego wyjaśnienia, przewodnika, samouczka lub jednostronicowego dokumentu, lub o przekształcenie materiału w wizualną stronę internetową, którą ludzie mogą eksplorować.
Raport z testu
Rzeczywiste A/B, renderowane w przeglądarce: budowa umiejętności wyprodukowała prawdziwie grywalną demonstrację płótna efektu Dopplera z pokolorowanymi skompresowanymi/rozciągniętymi frontami falowymi, edytorialną typografią serif/sans i rzeczywistą nakładką recenzji wstrzykniętą przez assemble.mjs, w porównaniu do bazowej, która była dokładnie szablonem karty z gradientowym tekstem i bento, przed którym ostrzega własna lista kontrolna umiejętności anty-slop.
Testowano: 2026-07-16 · Claude Code 2.x (agent harness)
Instalacja
git clone https://github.com/ds-vibe/html-explainer mkdir -p ~/.claude/skills cp -r html-explainer ~/.claude/skills/html-explainer
Komendy i przykładowe prompty
/html-explainerTworzy dopracowane, oparte na źródle, grywalne jedno-stronicowe lub slajdowe wyjaśnienia internetowe z rzeczywistą pętlą jakości.
Skille uruchamiają się na zwykłe polecenia — bez komend do zapamiętania. Po instalacji aktywują go prompty takie jak te (po angielsku):
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