HTML Explainer

Build a polished, lightly-interactive single-page web explainer for educational, informational, or explanatory content. Use when the user wants to explain, teach, summarize, or visualize a topic, concept, policy, dataset, process, or body of knowledge as an interactive web page — emphasizing progressive complexity, strong visual design, source-grounded accuracy, and an iterative quality loop. Triggers on requests like "make an interactive explainer / guide / walkthrough / one-pager," "turn this into a visual web page people can explore," or "help people get acquainted with X and drill down.

23 stars 4 forksData & Analytics

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add ds-vibe/html-explainer --skill html-explainer

Manual install

git clone --depth 1 https://github.com/ds-vibe/html-explainer.git /tmp/html-explainer
mkdir -p ~/.claude/skills
cp -r /tmp/html-explainer/. ~/.claude/skills/html-explainer

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# HTML Explainer

Build useful explainers: interactive, polished and educational. Lets a user land on a page and come away with new understanding, whether they skim or drill down.

This skill is a **process**, not a template. Key goals:

1. **A clear mental model & progressive complexity** — give the reader one way to *think* about
the subject early (where the topic has one), then sequence so a newcomer can follow.
2. **Show, don’t tell** — whenever a concept can be *demonstrated*, build a tiny **playable
micro-demo** instead of writing a paragraph. Learning-by-doing.
3. **Visual design quality** — 10x it: varied, polished, a consistent visual language that teaches.
4. **A real quality loop** — build, actually look at it rendered, critique like a human, improve.
5. **Research & sharpening questions** — get the facts right first; turn a vague brief into a spec.
6. **Trust** — cite sources, distinguish settled from uncertain, never fabricate.

---

> **STOP — do Phase 0 before writing any HTML or running any research.** Your first response must be a short scoping interview covering **all seven** must-ask questions in Phase 0 — **grounding · audience & depth · format · play-it-straight-or-go-bold · visual style · quiz · AI chat.** Ask every one; the last (AI chat) is the most-skipped — do not drop it. You can add more questions (see below), but not subtract.
> 

## Phase 0 — Research & sharpen (before any HTML)

Read the full skill on GitHub

Details

Skill name: html-explainer
Repository: ds-vibe/html-explainer
License: MIT
Repo updated: 12 August 2026

FAQ

What does the HTML Explainer skill do?

How do I install the HTML Explainer skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add ds-vibe/html-explainer --skill html-explainer. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is HTML Explainer popular?

It lives in ds-vibe/html-explainer, which has 23 GitHub stars and 4 forks.

Related skills

Notebooklm

JunSuzuki1973/notebooklm-antigravity-skill

Interact with Google NotebookLM via CLI (nlm). Use this when the user wants to manage notebooks, add sources, generate audio podcasts, research topics, query notebooks, or share content.

Data & Analytics

Notebooklm Learner Pack

DrMultivac/notebooklm-learner-pack

Generate branded, topic-specific HTML NotebookLM Learner Packs — 29 copy-paste prompt cards (10 infographics + 5 slide decks + 5 audio overviews + 4 video storyboards + 5 knowledge tests) with a sticky dual-filter UI that toggles between six audience lenses (ELI5, Newbie, Clinical, Operator, Finance, Deep Dive) and five asset types. Triggers on "NotebookLM learner pack," "learner site," "learner prompts," "explainer prompt pack," "build a prompt library for [topic]," "make a NotebookLM pack on [topic] in [brand] voice," or the workflow of ingesting source material into NotebookLM and wanting a

Data & Analytics10

Ha Bubble Dashboard

johnnyh1975/HA_Bubble_Skill

Home Assistant dashboard design with Bubble Card 3.x, Streamline Card, Sidebar Card and Mushroom — including a merged HA/Bubble/Mushroom CSS theme with colour intelligence, palette recipes, WCAG checks, typography, wall-panel support and full troubleshooting. TRIGGERS: Bubble Card (any card type), Lovelace dashboards, CSS themes, colour palettes, fonts, Streamline templates, Sidebar Card nav, Mushroom chips, room pop-ups, wall panels, masonry→sections migration, native-vs-custom dashboard decisions, troubleshooting. SYMPTOMS: hardcodes hex in YAML · uses pre-v3.2 pop-up format · places pop-up

Data & Analytics

Supergis

OpenCesium/SuperGIS-Skills

Implement maps and geospatial visualization for OpenLayers, Cesium, Leaflet, MapLibre, Mapbox, maptalks, SuperMap, MapGIS, ArcGIS, GeoScene, AMap, Baidu Map, Tencent Map, Tianditu, KQGIS, NavInfo, Google Maps, Three.js, deck.gl, AntV L7, and MapV. Use when the user says supergis or names one of these libraries and asks for a map, layer, terrain, 3D Tiles, vector tile, GeoJSON, WMS, WMTS, draw, measure, query, or visualization. Open modules/<library>/index.md and the matching example, then adapt that example's full code to the host project.

Data & Analytics

Majia Guanyuan

maojiebc/majia-guanyuan

观远 BI（Guandata）实战增益层。标准查数、指标批量查询、本地分析、建卡发布、ETL、数据集和表单结构管理、工作流、指标写入路由官方六组件。专攻 ETL 整库治理、SmartETL 全链路重写、引擎报错、自定义图表与 HTML 看板排障、看板口径档案与只读逐格验收、v7 发布兼容、移动端 phoneLayout、门店手机成绩单、SuperApp 的 LLM 中转及历史兼容、AI-native ADS 架构判断。餐饮会员公式见 majia-huiyuan。触发：execute-sql 5001、SQL 直查不可用、ETL 预览汇总、分块取数、历史数据抽取、预览截断、数字出处、看板口径档案、看板答案对账、观远、Guandata、会员、订单、复购率、RFM、ETL 治理、payload_json、自定义图表、HTML 看板、门店手机成绩单、换店滤空、phoneLayout、60004、SuperApp、ILLEGAL_JSON_RES、数据架构。

Data & Analytics

ThinkWiki

wzdavid/ThinkWiki

Use this skill when the user wants to create, maintain, query, or visualize a local Markdown knowledge base. ThinkWiki can initialize a wiki, import files or webpages, collect inbox items, answer from existing knowledge, save higher-value outputs, and generate HTML viewer and graph artifacts.

Data & Analytics

Browse the most popular Claude skills, all data & analytics skills, or write your own with the skills generator.