Releases: ds-vibe/html-explainer
Release list
html-explainer v0.1.7
A Claude Skill that builds polished, interactive HTML explainers. Give it a topic, answer a few questions, and it produces a real page that someone can land on cold and come away understanding the basics.
Real examples: https://ds-vibe.github.io/html-explainer/
What you get
- Beautiful, instructive output: Create a scrolling page or slide deck from a brief prompt and short interview
- Interactive UX: Learn by doing with live demos, walkthroughs and explorables
- Quiz and AI chat: Test yourself or ask questions directly on page (AI = bring your own key)
- Real QA loop: Reviews and fixes bugs before delivering
- "Review & edit" mode: Lets you annotate or edit the page directly, then feed your comments back to Claude
- Anti-slop guards: No emojis, bento grids, or "it's not X, it's Y"
- Self-contained HTML file: Use locally or host anywhere
Tips
Best results: Opus 4.8 at high effort. It's both higher quality and faster, since a better first draft means fewer QA fix cycles.
Claude Code gives better visual results. It runs a real headless browser to catch bugs visually. In Cowork, the skill falls back to static analysis. Cowork is still good but may miss rendering bugs.
It takes 5–10+ minutes. That's normal. The skill writes the page, renders it, reviews, and fixes what it finds. Be patient. We are working to speed it up.
Try it
Claude app / cowork: download html-explainer-skill.zip below and upload it as a Skill — no clone, no build step.
Claude Code: git clone https://github.com/ds-vibe/html-explainer ~/.claude/skills/html-explainer
New in this version: packaging fixes — adds the reference images missing from git installs, and example quiz-feedback fixes
html-explainer v0.1.6
A Claude Skill that builds polished, interactive HTML explainers. Give it a topic, answer a few questions, and it produces a real page that someone can land on cold and come away understanding the basics.
Real examples: https://ds-vibe.github.io/html-explainer/
What you get
- Beautiful, instructive output: Create a scrolling page or slide deck from a brief prompt and short interview
- Interactive UX: Learn by doing with live demos, walkthroughs and explorables
- Quiz and AI chat: Test yourself or ask questions directly on page (AI = bring your own key)
- Real QA loop: Reviews and fixes bugs before delivering
- "Review & edit" mode: Lets you annotate or edit the page directly, then feed your comments back to Claude
- Anti-slop guards: No emojis, bento grids, or "it's not X, it's Y"
- Self-contained HTML file: Use locally or host anywhere
Tips
Best results: Opus 4.8 at high effort. It's both higher quality and faster, since a better first draft means fewer QA fix cycles.
Claude Code gives better visual results. It runs a real headless browser to catch bugs visually. In Cowork, the skill falls back to static analysis. Cowork is still good but may miss rendering bugs.
It takes 5–10+ minutes. That's normal. The skill writes the page, renders it, reviews, and fixes what it finds. Be patient. We are working to speed it up.
Try it
Claude app / cowork: download html-explainer-skill.zip below and upload it as a Skill — no clone, no build step.
Claude Code: git clone https://github.com/ds-vibe/html-explainer ~/.claude/skills/html-explainer
New in this version: "Go bold" mode for immersive art direction on your theme
html-explainer v0.1.5
A Claude Skill that builds polished, interactive HTML explainers. Give it a topic, answer a few questions, and it produces a real page that someone can land on cold and come away understanding the basics.
Real examples: https://ds-vibe.github.io/html-explainer/
What you get
- Beautiful, instructive output: Create a scrolling page or slide deck from a brief prompt and short interview
- Interactive UX: Learn by doing with live demos, walkthroughs and explorables
- Quiz and AI chat: Test yourself or ask questions directly on page (AI = bring your own key)
- Real QA loop: Reviews and fixes bugs before delivering
- "Review & edit" mode: Lets you annotate or edit the page directly, then feed your comments back to Claude
- Anti-slop guards: No emojis, bento grids, or "it's not X, it's Y"
- Self-contained HTML file: Use locally or host anywhere
Tips
Best results: Opus 4.8 at high effort. It's both higher quality and faster, since a better first draft means fewer QA fix cycles.
Claude Code gives better visual results. It runs a real headless browser to catch bugs visually. In Cowork, the skill falls back to static analysis. Cowork is still good but may miss rendering bugs.
It takes 5–10+ minutes. That's normal. The skill writes the page, renders it, reviews, and fixes what it finds. Be patient. We are working to speed it up.
Try it
Claude app / cowork: download html-explainer-skill.zip below and upload it as a Skill — no clone, no build step.
Claude Code: git clone https://github.com/ds-vibe/html-explainer ~/.claude/skills/html-explainer
html-explainer v0.1.4
A Claude Skill that builds polished, interactive HTML explainers. Give it a topic, answer a few questions, and it produces a real page that someone can land on cold and come away understanding the basics.
Real examples: https://ds-vibe.github.io/html-explainer/
What you get
- Beautiful, instructive output: Create a scrolling page or slide deck from a brief prompt and short interview
- Interactive UX: Learn by doing with live demos, walkthroughs and explorables
- Quiz and AI chat: Test yourself or ask questions directly on page (AI = bring your own key)
- Real QA loop: Reviews and fixes bugs before delivering
- "Review & edit" mode: Lets you annotate or edit the page directly, then feed your comments back to Claude
- Anti-slop guards: No emojis, bento grids, or "it's not X, it's Y"
- Self-contained HTML file: Use locally or host anywhere
Tips
Best results: Opus 4.8 at high effort. It's both higher quality and faster, since a better first draft means fewer QA fix cycles.
Claude Code gives better visual results. It runs a real headless browser to catch bugs visually. In Cowork, the skill falls back to static analysis. Cowork is still good but may miss rendering bugs.
It takes 5–10+ minutes. That's normal. The skill writes the page, renders it, reviews, and fixes what it finds. Be patient. We are working to speed it up.
Try it
Claude app / cowork: download html-explainer-skill.zip below and upload it as a Skill — no clone, no build step.
Claude Code: git clone https://github.com/ds-vibe/html-explainer ~/.claude/skills/html-explainer
html-explainer v0.1.3
A Claude Skill that builds polished, interactive HTML explainers. Give it a topic, answer a few questions, and it produces a real page that someone can land on cold and come away understanding the basics.
Real examples: https://ds-vibe.github.io/html-explainer/
What you get
- Beautiful, instructive output: Create a scrolling page or slide deck from a brief prompt and short interview
- Interactive UX: Learn by doing with live demos, walkthroughs and explorables
- Quiz and AI chat: Test yourself or ask questions directly on page (AI = bring your own key)
- Real QA loop: Reviews and fixes bugs before delivering
- "Review & edit" mode: Lets you annotate or edit the page directly, then feed your comments back to Claude
- Anti-slop guards: No emojis, bento grids, or "it's not X, it's Y"
- Self-contained HTML file: Use locally or host anywhere
Tips
Best results: Opus 4.8 at high effort. It's both higher quality and faster, since a better first draft means fewer QA fix cycles.
Claude Code gives better visual results. It runs a real headless browser to catch bugs visually. In Cowork, the skill falls back to static analysis. Cowork is still good but may miss rendering bugs.
It takes 5–10+ minutes. That's normal. The skill writes the page, renders it, reviews, and fixes what it finds. Be patient. We are working to speed it up.
Try it
Claude app / cowork: download html-explainer-skill.zip below and upload it as a Skill — no clone, no build step.
Claude Code: git clone https://github.com/ds-vibe/html-explainer ~/.claude/skills/html-explainer
html-explainer v0.1.2
A Claude Skill that builds polished, interactive HTML explainers. Give it a topic, answer a few questions, and it produces a real .html page that someone can land on cold and come away understanding the subject.
Real examples: https://ds-vibe.github.io/html-explainer/
What it does
- Creates a beautiful, interactive scrolling page or slide deck from a brief prompt and short interview
- Applies a real QA loop — renders the page in a headless browser, looks at it, and fixes visual bugs before delivering
- Anti-slop guards are built in: no emoji icons, no decorative gradients, no bento grids
- A built-in "Review & edit" mode lets you annotate or edit the page in-place, then export a revision brief
- One self-contained
.htmlfile you can host anywhere - Optional: add a BYOK chatbot grounded in the page
What we've learned
Best results: Opus 4.8 at high effort. Counterintuitively, high effort is both faster and higher quality, since better initial generation means fewer QA fix cycles.
Claude Code gives better visual results. It runs a real headless browser to catch bugs visually. In Cowork, the skill falls back to static analysis. It's still good, but can't catch rendering bugs without you opening the file.
It takes 4–10+ minutes. That's normal. The skill writes the page, renders it, looks at it, and fixes what it finds. Be patient: the quality loop is doing real work. We are working to speed it up.
Try it
Claude app / cowork: download html-explainer-skill.zip below and upload it as a Skill — no clone, no build step.
Claude Code: git clone https://github.com/ds-vibe/html-explainer ~/.claude/skills/html-explainer
html-explainer v0.1.1
A Claude Skill that builds polished, interactive HTML explainers. Give it a topic, answer a few questions, and it produces a real .html page that someone can land on cold and come away understanding the subject.
Real examples: https://ds-vibe.github.io/html-explainer/
What it does
- Creates a beautiful, interactive scrolling page or slide deck from a brief prompt and short interview
- Applies a real QA loop — renders the page in a headless browser, looks at it, and fixes visual bugs before delivering
- Anti-slop guards are built in: no emoji icons, no decorative gradients, no bento grids
- A built-in "Review & edit" mode lets you annotate or edit the page in-place, then export a revision brief
- One self-contained
.htmlfile you can host anywhere - Optional: add a BYOK chatbot grounded in the page
What we've learned
Best results: Opus 4.8 at high effort. Counterintuitively, high effort is both faster and higher quality, since better initial generation means fewer QA fix cycles.
Claude Code gives better visual results. It runs a real headless browser to catch bugs visually. In Cowork, the skill falls back to static analysis. It's still good, but can't catch rendering bugs without you opening the file.
It takes 4–10+ minutes. That's normal. The skill writes the page, renders it, looks at it, and fixes what it finds. Be patient: the quality loop is doing real work. We are working to speed it up.
Try it
Claude app / cowork: download html-explainer-skill.zip below and upload it as a Skill — no clone, no build step.
Claude Code: git clone https://github.com/ds-vibe/html-explainer ~/.claude/skills/html-explainer
html-explainer v0.1.0
Initial release of a Claude Skill that builds polished, interactive HTML explainers. Works in Claude Code and the Claude app — best results with Opus 4.8 or above.
Real examples: https://ds-vibe.github.io/html-explainer/
What's cool:
- Create a beautiful, interactive page or presentation from a brief prompt and interview.
- QA loop and anti-slop guards are applied automatically, so no emojis or rainbow wash.
- Customize it: change the format or audience, or upload your own content to build from.
- A built-in "Review" mode lets you edit the page yourself, or leave notes for the LLM.
- It's one HTML file you can host anywhere.
- Want a chatbot on it? Add one (bring your own key).
Feedback welcome — early release, may have rough edges.
Try it
Claude app / cowork: download html-explainer-skill.zip below and upload it as a Skill — no clone, no build.
Claude Code: unzip into ~/.claude/skills/ (so you have ~/.claude/skills/html-explainer/SKILL.md), or git clone https://github.com/ds-vibe/html-explainer ~/.claude/skills/html-explainer.
A build takes a few minutes — it generates the page, then renders it in a headless browser for the quality loop. The first run in Claude Code is slower (one-time Playwright + Chromium install). Speeding up generation is actively being worked on. The app has no render step and skips the browser install.