Not in the top 1,000 by GitHub stars
ds-vibe/html-explainer
A Claude Skill that builds polished, interactive HTML explainers, with an automatic QA loop and anti-slop visual guards.
History
Review weekly changes to SKILL.md before updating. Dates mark the weeks in which we observed each version; checks apply to the recorded commits.
View weekly changes
SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Network or broad shell → After Network or broad shell
9b5bb0564970 → 9b5bb0564970
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Network or broad shell
First observation → 9b5bb0564970
No earlier version was observed for comparison.
23GitHub stars
0stars in 7 days
1skill in this repository
0commits in 30 days
Heat
0.3- Star growth, last 7 daysNot available
- Star growth, last 24 hoursNot available
- Rank movement, last 7 daysNot available
- Commits, last 30 daysNot available
- Accounts asking about it through MCP, last 7 daysNot available
- Hot votes this weekNot available
Heat never changes the order by stars, and sponsorship never touches it. How heat works
Stars over time
30-day change not yet available: not enough history.
Individual skills in this repository
How it works
html-explainer
When your agent uses it
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."
What it loads into context
Frontmatter
128 tokensAlways available to the agent
SKILL.md
13,023 tokensWhen the skill is activated
Reference documents
1,219 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Phase 0 — Research & sharpen (before any HTML)
- Phase 1 — Architecture for learning (sequence before you style)
- Phase 2 — Visual design system (the 10x bar) — *the source of truth for “what good looks like”*
- Phase 3 — Build
- Phase 4 — The quality loop (required for high quality)
- Phase 5 — Verify & ship
- Phase 6 — Revise (the first delivery is a draft, not the end)
- Output target
- Format & reading shape (chosen in Phase 0 — orthogonal to output target)
- Drop-in widgets (`scripts/` — paste inline before `</body>`; full usage in each file’s header)
- Interactivity Patterns
- Anti-patterns & definition of done
Scripts executed separately
package.jsonscripts/assemble.mjsscripts/chat-dock.jsscripts/review-mode.jsscripts/shoot.mjs
Files
.gitignoreasset35 bytesLICENSEasset1,070 bytesREADME.mddoc5,065 bytesSKILL.mdcore55,035 bytesSKILL.mdcore55,035 bytesSKILL.mdcore55,035 bytesSKILL.mdcore55,035 bytesSKILL.mdcore55,035 bytesSKILL.mdcore55,035 bytesSKILL.mdcore55,035 bytesSKILL.mdcore55,035 bytesSKILL.mdcore55,035 bytesexamples/ai-act.htmlasset80,108 bytesexamples/auroras.htmlasset80,138 bytesexamples/blockchain.htmlasset60,927 bytesexamples/ccpa.htmlasset55,209 bytesexamples/color-mixing.htmlasset95,556 bytesexamples/doppler.htmlasset56,026 bytesexamples/encryption.htmlasset63,578 bytesexamples/fair-use.htmlasset104,676 bytesexamples/film-noir.htmlasset82,848 bytesexamples/fractional-reserve.htmlasset63,199 bytesexamples/gps.htmlasset79,675 bytesexamples/gutenberg.htmlasset94,287 bytesexamples/iso-vs-nso.htmlasset82,068 bytesexamples/rag.htmlasset93,899 bytesexamples/special-relativity.htmlasset54,153 bytesindex.htmlasset6,939 bytespackage-lock.jsonasset1,658 bytespackage.jsonruns59 bytesreference/ai-act-explainer.jpgasset225,793 bytesreference/aiact-coverage.pngasset101,112 bytesreference/film-noir-theme.pngasset335,948 bytesreference/fireflies-demo.pngasset318,657 bytesreference/gutenberg-theme.pngasset180,865 bytesreference/microwave-demo.pngasset107,375 bytesreference/noise-cancelling-demo.pngasset321,621 bytesreference/pipe-organ-demo.pngasset180,062 bytesreference/vinyl-theme.pngasset1,061,153 bytesscripts/assemble.mjsruns4,465 bytesscripts/chat-dock.jsruns14,799 bytesscripts/review-mode.jsruns23,900 bytesscripts/shoot.mjsruns4,438 bytes
Read 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.Skills included
- html-explainer
Repository facts
- License
- MIT
- Created
- Jun 22, 2026
- Last pushed
- Aug 12, 2026
- Forks
- 4
- Open issues
- 0
- Project activity
- Slowing
Before you install
Network or broad shellAutomated signals, not a guarantee
Checked Nov 5, 2026
Not fully analyzed: some files were too long, unreadable or missing. This never lowers the level.
Show 8 notes
SKILL.md:1Analysis incomplete: Referenced executable target unavailable; not analyzedSKILL.md:1Analysis incomplete: Referenced executable target unavailable; not analyzedSKILL.md:1Analysis incomplete: Referenced executable target unavailable; not analyzedSKILL.md:1Analysis incomplete: Referenced executable target unavailable; not analyzedSKILL.md:1Analysis incomplete: Referenced executable target unavailable; not analyzedSKILL.md:1Analysis incomplete: Referenced executable target unavailable; not analyzedSKILL.md:1Analysis incomplete: Referenced executable target unavailable; not analyzedSKILL.md:1Analysis incomplete: Referenced executable target unavailable; not analyzed
- No broad tool permissions
- No dangerous shell commands
- 249 network referencesin 20 files: examples/encryption.html:6 examples/gps.html:5 examples/gutenberg.html:5 and 17 more
- No hidden or obfuscated text
- No instruction overrides
- 5 executable scriptsin 5 files: package.json:1 scripts/assemble.mjs:1 scripts/chat-dock.js:1 and 2 more
- No access to secrets
- No requests to vote in Hot
Show all 254 signals by file
README.md
- Network accessline 3
A [Claude](https://claude.ai) **Skill** for building polished, interactive HTML explainers as a single page OR a slide deck. Give it a topic, answer a few questions, and it produces a real page that someone can land on cold and come away un - Network accessline 9
**See it in action: [live examples gallery](https://ds-vibe.github.io/html-explainer/)** - Network accessline 36
| Explainer | Format | Live | |---|---|---| | Auroras: The Northern Lights | scrolling page | [open](https://ds-vibe.github.io/html-explainer/examples/auroras.html) | - Network accessline 37
|---|---|---| | Auroras: The Northern Lights | scrolling page | [open](https://ds-vibe.github.io/html-explainer/examples/auroras.html) | | Gutenberg's printing press | slide deck | [open](https://ds-vibe.github.io/html-explainer/examples/gu - Network accessline 38
| Auroras: The Northern Lights | scrolling page | [open](https://ds-vibe.github.io/html-explainer/examples/auroras.html) | - Network accessline 39
| Gutenberg's printing press | slide deck | [open](https://ds-vibe.github.io/html-explainer/examples/gutenberg.html) | - Network accessline 40
| The Doppler effect (why a siren changes pitch) | scrolling page | [open](https://ds-vibe.github.io/html-explainer/examples/doppler.html) | - Network accessline 41
| The grammar of shadow (reading film noir) | slide deck | [open](https://ds-vibe.github.io/html-explainer/examples/film-noir.html) | - Network accessline 42
| The EU AI Act | scrolling page | [open](https://ds-vibe.github.io/html-explainer/examples/ai-act.html) | - Network accessline 43
| What "fair use" actually means | slide deck | [open](https://ds-vibe.github.io/html-explainer/examples/fair-use.html) | - Network accessline 44
| How fractional reserve banking works | scrolling page | [open](https://ds-vibe.github.io/html-explainer/examples/fractional-reserve.html) | - Network accessline 65
git clone https://github.com/ds-vibe/html-explainer ~/.claude/skills/html-explainer - Network accessline 77
**Claude desktop / web app** — download the prebuilt [`html-explainer-skill.zip`](https://github.com/ds-vibe/html-explainer/releases/latest) and upload - Network accessline 78
[`html-explainer-skill.zip`](https://github.com/ds-vibe/html-explainer/releases/latest) and upload
examples/ai-act.html
- Network accessline 6
<title>The EU AI Act: risk tiers, obligations, and the 2026 timeline</title> <meta name="description" content="The EU AI Act regulates AI by risk tier: prohibited practices, high-risk obligations, transparency duties, GPAI rules, penalties, - Network accessline 7
<meta name="description" content="The EU AI Act regulates AI by risk tier: prohibited practices, high-risk obligations, transparency duties, GPAI rules, penalties, and the post-Digital-Omnibus 2024–2028 timeline. For a technical and legal a - Network accessline 8
<link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 9
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - Network accessline 10
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Spectral:ital,wght@0,400;0,500;0,600;1,400&display=swap" rel="stylesheet"> - Network accessline 561
const SOURCES=[ {t:"European Commission — AI Act (Shaping Europe's digital future)",u:"https://digital-strategy.ec.europa.eu/en/policies/regulatory-framework-ai"}, - Network accessline 562
{t:"European Commission — AI Act (Shaping Europe's digital future)",u:"https://digital-strategy.ec.europa.eu/en/policies/regulatory-framework-ai"}, - Network accessline 563
{t:"AI Act Service Desk — implementation timeline (EC)",u:"https://ai-act-service-desk.ec.europa.eu/en/ai-act/timeline/timeline-implementation-eu-ai-act"}, - Network accessline 564
{t:"artificialintelligenceact.eu — high-level summary",u:"https://artificialintelligenceact.eu/high-level-summary/"}, - Network accessline 565
{t:"Gibson Dunn — EU AI Act Omnibus agreement: postponed high-risk deadlines",u:"https://www.gibsondunn.com/eu-ai-act-omnibus-agreement-postponed-high-risk-deadlines-and-other-key-changes/"}, - Network accessline 566
{t:"DLA Piper — Digital AI Omnibus: proposed deferral of high-risk obligations",u:"https://knowledge.dlapiper.com/dlapiperknowledge/globalemploymentlatestdevelopments/2026/The-Digital-AI-Omnibus-Proposed-deferral-of-high-risk-AI-obligations - Network accessline 567
{t:"EC — Guidelines for providers of general-purpose AI models",u:"https://digital-strategy.ec.europa.eu/en/policies/guidelines-gpai-providers"}
examples/auroras.html
- Network accessline 5
<meta name="viewport" content="width=device-width, initial-scale=1"> <title>How the northern lights happen</title> <link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 6
<title>How the northern lights happen</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - Network accessline 7
<link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 8
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - Network accessline 9
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Sora:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet"> - Network accessline 567
The physics here is settled science, drawn from standard space-physics references: <ul style="margin:12px 0;padding-left:20px"> <li>NASA Science — <a href="https://science.nasa.gov/sun/auroras/">Auroras</a> and heliophysic - Network accessline 568
<ul style="margin:12px 0;padding-left:20px"> <li>NASA Science — <a href="https://science.nasa.gov/sun/auroras/">Auroras</a> and heliophysics overviews</li> <li>NOAA Space Weather Prediction Center — the <a href="https:// - Network accessline 569
<li>NASA Science — <a href="https://science.nasa.gov/sun/auroras/">Auroras</a> and heliophysics overviews</li> - Network accessline 570
<li>NOAA Space Weather Prediction Center — the <a href="https://www.swpc.noaa.gov/products/planetary-k-index">planetary K-index</a> and aurora forecasts</li> - Network accessline 742
const svg = document.getElementById("oval-svg"); if(!svg) return; const SVGNS="http://www.w3.org/2000/svg"; - Network accessline 744
const SVGNS="http://www.w3.org/2000/svg"; - Network accessline 824
const svg=document.getElementById("ladder-svg"); if(!svg) return; const SVGNS="http://www.w3.org/2000/svg"; - Network accessline 825
if(!svg) return; const SVGNS="http://www.w3.org/2000/svg"; const TOP=400, X=70, Wd=210, top=0, bot=460; // km 400..0 over y 0..460 - Network accessline 826
const SVGNS="http://www.w3.org/2000/svg";
examples/blockchain.html
- Network accessline 5
<meta name="viewport" content="width=device-width, initial-scale=1"> <title>How blockchain works</title> <link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 6
<title>How blockchain works</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - Network accessline 7
<link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 8
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - Network accessline 9
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"> - Network accessline 386
<h3>Sources & further reading</h3> <ul class="measure"> <li><a href="https://bitcoin.org/bitcoin.pdf">Nakamoto, S. (2008). Bitcoin: A Peer-to-Peer Electronic Cash System</a> — the original whitepaper describing the hash-chaine - Network accessline 387
<ul class="measure"> <li><a href="https://bitcoin.org/bitcoin.pdf">Nakamoto, S. (2008). Bitcoin: A Peer-to-Peer Electronic Cash System</a> — the original whitepaper describing the hash-chained block structure and proof-of-work.</li> - Network accessline 388
<li><a href="https://bitcoin.org/bitcoin.pdf">Nakamoto, S. (2008). Bitcoin: A Peer-to-Peer Electronic Cash System</a> — the original whitepaper describing the hash-chained block structure and proof-of-work.</li> - Network accessline 389
<li><a href="https://ethereum.org/en/developers/docs/">Ethereum.org developer docs</a> — blocks, hashing, and the move to proof of stake (2022).</li> - Network accessline 390
<li><a href="https://en.wikipedia.org/wiki/SHA-2">SHA-2 (Wikipedia)</a> — the cryptographic hash family used by Bitcoin (SHA-256).</li>
examples/ccpa.html
- Network accessline 6
<title>The CCPA, explained</title> <meta name="description" content="California's consumer-privacy law in one read: who must comply, your rights, sale vs share, the penalties, and what changed for 2026 — with interactive demos."> <link rel= - Network accessline 7
<meta name="description" content="California's consumer-privacy law in one read: who must comply, your rights, sale vs share, the penalties, and what changed for 2026 — with interactive demos."> <link rel="preconnect" href="https://fonts.go - Network accessline 8
<link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 9
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - Network accessline 10
<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap" rel="stylesheet"> - Network accessline 370
<p style="color:#b3a99b;max-width:64ch">Every load-bearing figure here is drawn from the statute, the CPPA, and the California Attorney General, plus current (2026) regulatory guidance.</p> <ul class="srclist"> <li><a href="https://oa - Network accessline 371
<ul class="srclist"> <li><a href="https://oag.ca.gov/privacy/ccpa" target="_blank" rel="noopener">California Attorney General — CCPA overview</a></li> <li><a href="https://cppa.ca.gov/faq.html" target="_blank" rel="noopener">Califor - Network accessline 372
<li><a href="https://oag.ca.gov/privacy/ccpa" target="_blank" rel="noopener">California Attorney General — CCPA overview</a></li> - Network accessline 373
<li><a href="https://cppa.ca.gov/faq.html" target="_blank" rel="noopener">California Privacy Protection Agency — FAQs</a></li> - Network accessline 374
<li><a href="https://cppa.ca.gov/regulations/cpi_adjustment.html" target="_blank" rel="noopener">CPPA — Updated monetary thresholds (CPI adjustment)</a></li> - Network accessline 375
<li><a href="https://cppa.ca.gov/announcements/2024/20241217.html" target="_blank" rel="noopener">CPPA — 2025 increases for CCPA fines & penalties</a></li> - Network accessline 376
<li><a href="https://www.ropesgray.com/en/insights/alerts/2026/01/californias-ccpa-cybersecurity-audit-rule-takes-effect-what-businesses-need-to-know" target="_blank" rel="noopener">Ropes & Gray — 2026 cybersecurity audit rule</a></li> - Network accessline 377
<li><a href="https://www.thompsoncoburn.com/insights/californias-2026-ccpa-regulations-summary-and-preparation-guide/" target="_blank" rel="noopener">Thompson Coburn — 2026 CCPA regulations summary</a></li>
examples/color-mixing.html
- Network accessline 6
<title>Color on screens and in print (RGB and CMYK)</title> <meta name="description" content="How screens add light (RGB) and print subtracts it (CMYK), why the two systems produce different colors, and what that means for design and photo - Network accessline 7
<meta name="description" content="How screens add light (RGB) and print subtracts it (CMYK), why the two systems produce different colors, and what that means for design and photo work."> <link rel="preconnect" href="https://fonts.googleapi - Network accessline 8
<link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 9
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - Network accessline 10
<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..900;1,9..144,400..900&family=DM+Sans:ital,opsz,wght@0,9..40,400..700;1,9..40,400..600&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
examples/doppler.html
- Network accessline 5
<meta name="viewport" content="width=device-width, initial-scale=1" /> <title>The Doppler Effect</title> <link rel="preconnect" href="https://fonts.googleapis.com" /> - Network accessline 6
<title>The Doppler Effect</title> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> - Network accessline 7
<link rel="preconnect" href="https://fonts.googleapis.com" /> - Network accessline 8
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> - Network accessline 9
<link href="https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,400;0,500;0,600;1,400&family=Inter:wght@400;500;600&display=swap" rel="stylesheet" /> - Network accessline 494
(function(){ var svg=document.getElementById('specSvg'); if(!svg) return; var NS='http://www.w3.org/2000/svg', C=299792.458; - Network accessline 495
var svg=document.getElementById('specSvg'); if(!svg) return; var NS='http://www.w3.org/2000/svg', C=299792.458; var X0=24, X1=696, NM0=380, NM1=720; // band px + wavelength range - Network accessline 496
var NS='http://www.w3.org/2000/svg', C=299792.458;
examples/encryption.html
- Network accessline 6
<title>How Encryption Works</title> <meta name="description" content="How encryption works, built up from scratch: scrambling with a secret, symmetric vs public-key, the HTTPS handshake, and hashing — with playable demos and a built-in Q&A - Network accessline 7
<meta name="description" content="How encryption works, built up from scratch: scrambling with a secret, symmetric vs public-key, the HTTPS handshake, and hashing — with playable demos and a built-in Q&A bot."> <link rel="preconnect" href=" - Network accessline 8
<link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 9
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - Network accessline 10
<link href="https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet"> - Network accessline 293
<p style="color:var(--ink-soft);max-width:64ch">Encryption fundamentals are stable and well-documented; these are solid starting points to go deeper.</p> <ul class="srclist"> <li><a href="https://www.cloudflare.com/learning/ssl/what-i - Network accessline 294
<ul class="srclist"> <li><a href="https://www.cloudflare.com/learning/ssl/what-is-encryption/" target="_blank" rel="noopener">Cloudflare — What is encryption?</a></li> <li><a href="https://www.cloudflare.com/learning/ssl/how-does-pu - Network accessline 295
<li><a href="https://www.cloudflare.com/learning/ssl/what-is-encryption/" target="_blank" rel="noopener">Cloudflare — What is encryption?</a></li> - Network accessline 296
<li><a href="https://www.cloudflare.com/learning/ssl/how-does-public-key-encryption-work/" target="_blank" rel="noopener">Cloudflare — How public-key encryption works</a></li> - Network accessline 297
<li><a href="https://developer.mozilla.org/en-US/docs/Web/Security/Transport_Layer_Security" target="_blank" rel="noopener">MDN — Transport Layer Security (TLS)</a></li> - Network accessline 298
<li><a href="https://csrc.nist.gov/glossary/term/encryption" target="_blank" rel="noopener">NIST — Encryption (glossary)</a></li> - Network accessline 299
<li><a href="https://www.nist.gov/cryptography" target="_blank" rel="noopener">NIST — Cryptography</a></li> - Network accessline 812
var ACCENT = cfg.accent || "var(--accent,#3b82f6)"; var KEY_HINT = PROVIDER === "openai" ? "sk-… (your OpenAI API key)" : "sk-ant-… (your Anthropic API key)"; var KEY_LINK = PROVIDER === "openai" ? "https://platform.openai.com/api-keys" - Network accessline 813
var KEY_HINT = PROVIDER === "openai" ? "sk-… (your OpenAI API key)" : "sk-ant-… (your Anthropic API key)"; var KEY_LINK = PROVIDER === "openai" ? "https://platform.openai.com/api-keys" : "https://console.anthropic.com/settings/keys"; va - Network accessline 814
var KEY_LINK = PROVIDER === "openai" ? "https://platform.openai.com/api-keys" : "https://console.anthropic.com/settings/keys"; - Network accessline 912
var sys = "You are a friendly assistant embedded in this web page. Answer the user's questions grounded in the page content below. Be concise and clear. If a question goes beyond the page, you may answer briefly from general knowledge but s - Network accessline 913
[Credential-related source omitted] - Network accessline 914
url: "https://api.openai.com/v1/chat/completions", - Network accessline 917
pick: function(d){ return d && d.choices && d.choices[0] && d.choices[0].message && d.choices[0].message.content; } } : { url: "https://api.anthropic.com/v1/messages", - Network accessline 918
[Credential-related source omitted] - Network accessline 919
url: "https://api.anthropic.com/v1/messages", - Network accessline 922
pick: function(d){ return d && d.content && d.content[0] && d.content[0].text; } }; fetch(req.url, { method:"POST", headers:req.headers, body:JSON.stringify(req.body) }) - Network accessline 923
}; fetch(req.url, { method:"POST", headers:req.headers, body:JSON.stringify(req.body) }) .then(function(r){ return r.json(); }) - Network accessline 924
fetch(req.url, { method:"POST", headers:req.headers, body:JSON.stringify(req.body) })
examples/fair-use.html
- Network accessline 6
<title>What "Fair Use" Actually Means</title> <meta name="description" content="A slide-deck walkthrough of fair use under 17 U.S.C. § 107 — the four-factor balancing test, the transformative-use doctrine, and how Campbell, Harper & Row, Go - Network accessline 7
<meta name="description" content="A slide-deck walkthrough of fair use under 17 U.S.C. § 107 — the four-factor balancing test, the transformative-use doctrine, and how Campbell, Harper & Row, Google, and Warhol shaped it. With an interactiv - Network accessline 8
<link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 9
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - Network accessline 10
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=Newsreader:ital,opsz@0,6..72;1,6..72&display=swap" rel="stylesheet"> - Network accessline 745
doctrine; it is <strong>not legal advice</strong>, and fair use is decided one case at a time. For a real question, consult counsel.</p> <ul class="src-list"> <li><a href="https://www.law.cornell.edu/uscode/text/17/107" ta - Network accessline 746
<ul class="src-list"> <li><a href="https://www.law.cornell.edu/uscode/text/17/107" target="_blank" rel="noopener">17 U.S.C. § 107</a> — statutory text of the fair use limitation.<span class="sy">Cornell LII</span></li> < - Network accessline 747
<li><a href="https://www.law.cornell.edu/uscode/text/17/107" target="_blank" rel="noopener">17 U.S.C. § 107</a> — statutory text of the fair use limitation.<span class="sy">Cornell LII</span></li> - Network accessline 748
<li><a href="https://supreme.justia.com/cases/federal/us/510/569/" target="_blank" rel="noopener">Campbell v. Acuff-Rose Music</a> — transformative use; parody; market substitution.<span class="sy">510 U.S. 569 (1994)</span></li> - Network accessline 749
<li><a href="https://supreme.justia.com/cases/federal/us/471/539/" target="_blank" rel="noopener">Harper & Row v. Nation Enterprises</a> — "the heart of the work"; market as central.<span class="sy">471 U.S. 539 (1985)</span></li> - Network accessline 750
<li><a href="https://supreme.justia.com/cases/federal/us/593/18-956/" target="_blank" rel="noopener">Google LLC v. Oracle America</a> — fair use of API declaring code.<span class="sy">593 U.S. 1 (2021)</span></li> - Network accessline 751
<li><a href="https://www.oyez.org/cases/2022/21-869" target="_blank" rel="noopener">Andy Warhol Foundation v. Goldsmith</a> — purpose-focused Factor 1.<span class="sy">598 U.S. 508 (2023)</span></li> - Network accessline 752
<li><a href="https://supreme.justia.com/cases/federal/us/464/417/" target="_blank" rel="noopener">Sony Corp. v. Universal City Studios</a> — time-shifting; whole-work copying.<span class="sy">464 U.S. 417 (1984)</span></li> - Network accessline 753
<li><a href="https://supreme.justia.com/cases/federal/us/537/186/" target="_blank" rel="noopener">Eldred v. Ashcroft</a> — fair use as a "built-in First Amendment accommodation."<span class="sy">537 U.S. 186 (2003)</span></li> - Network accessline 754
<li><a href="https://www.copyright.gov/fair-use/" target="_blank" rel="noopener">U.S. Copyright Office — Fair Use Index</a> — official overview and case summaries.<span class="sy">copyright.gov</span></li> - Network accessline 755
<li><a href="https://www.eff.org/deeplinks/2023/05/what-supreme-courts-decision-warhol-means-fair-use" target="_blank" rel="noopener">EFF — what Warhol means for fair use</a> — practitioner commentary.<span class="sy">eff.org</span></li>
examples/film-noir.html
- Network accessline 9
<link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 10
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - Network accessline 11
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600;700&family=Spectral:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap" rel="stylesheet"> - Network accessline 289
<div class="blinds"></div> <div class="cover-art" aria-hidden="true"> <svg viewBox="0 0 480 840" fill="none" xmlns="http://www.w3.org/2000/svg"> - Network accessline 290
<div class="cover-art" aria-hidden="true"> <svg viewBox="0 0 480 840" fill="none" xmlns="http://www.w3.org/2000/svg"> <defs> - Network accessline 291
<svg viewBox="0 0 480 840" fill="none" xmlns="http://www.w3.org/2000/svg"> - Network accessline 812
/* ============ DEMO 2 · COMPOSE THE TRAP ============ */ (function(){ var NS='http://www.w3.org/2000/svg'; - Network accessline 813
(function(){ var NS='http://www.w3.org/2000/svg'; var slats=document.getElementById('slats'), tilt=document.getElementById('tilt'); - Network accessline 814
var NS='http://www.w3.org/2000/svg';
examples/fractional-reserve.html
- Network accessline 5
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>How Fractional Reserve Banking Works</title> <link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 6
<title>How Fractional Reserve Banking Works</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - Network accessline 7
<link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 8
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - Network accessline 9
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,900&family=Inter:wght@400;500;600&family=Spline+Sans+Mono:wght@500;600&display=swap" rel="stylesheet"> - Network accessline 480
<h3>Sources</h3> <ol> <li>Bank of England, <a href="https://www.bankofengland.co.uk/quarterly-bulletin/2014/q1/money-creation-in-the-modern-economy" target="_blank" rel="noopener">“Money creation in the modern economy” - Network accessline 481
<ol> <li>Bank of England, <a href="https://www.bankofengland.co.uk/quarterly-bulletin/2014/q1/money-creation-in-the-modern-economy" target="_blank" rel="noopener">“Money creation in the modern economy”</a> (Quarterly Bulle - Network accessline 482
<li>Bank of England, <a href="https://www.bankofengland.co.uk/quarterly-bulletin/2014/q1/money-creation-in-the-modern-economy" target="_blank" rel="noopener">“Money creation in the modern economy”</a> (Quarterly Bulletin, 2014 Q - Network accessline 483
<li>Federal Reserve Board, <a href="https://www.federalreserve.gov/monetarypolicy/reservereq.htm" target="_blank" rel="noopener">Reserve Requirements</a> — ratios set to 0% effective March 26, 2020.</li> - Network accessline 484
<li>Federal Register, <a href="https://www.federalregister.gov/documents/2025/11/24/2025-20744/regulation-d-reserve-requirements-of-depository-institutions" target="_blank" rel="noopener">Regulation D: Reserve Requirements of Depository Ins - Network accessline 485
<li>FDIC, <a href="https://www.fdic.gov/resources/deposit-insurance/" target="_blank" rel="noopener">Deposit Insurance</a> — standard coverage $250,000 per depositor, per insured bank.</li>
examples/gps.html
- Network accessline 5
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>How GPS figures out where you are</title> <link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 6
<title>How GPS figures out where you are</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - Network accessline 7
<link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 8
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - Network accessline 9
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet"> - Network accessline 412
<div> <h3>Sources</h3> <p class="src"><a href="https://www.gps.gov/systems/gps/space/" target="_blank" rel="noopener">GPS.gov — Space Segment & constellation</a></p> - Network accessline 413
<h3>Sources</h3> <p class="src"><a href="https://www.gps.gov/systems/gps/space/" target="_blank" rel="noopener">GPS.gov — Space Segment & constellation</a></p> <p class="src"><a href="https://www.gps.gov/systems/gps/performa - Network accessline 414
<p class="src"><a href="https://www.gps.gov/systems/gps/space/" target="_blank" rel="noopener">GPS.gov — Space Segment & constellation</a></p> - Network accessline 415
<p class="src"><a href="https://www.gps.gov/systems/gps/performance/accuracy/" target="_blank" rel="noopener">GPS.gov — Accuracy & performance</a></p> - Network accessline 416
<p class="src"><a href="https://en.wikipedia.org/wiki/Global_Positioning_System" target="_blank" rel="noopener">Global Positioning System — Wikipedia</a></p> - Network accessline 417
<p class="src"><a href="https://en.wikipedia.org/wiki/Error_analysis_for_the_Global_Positioning_System" target="_blank" rel="noopener">GPS error analysis — Wikipedia</a></p> - Network accessline 418
<p class="src"><a href="https://www.gps.gov/systems/gps/space/#generations" target="_blank" rel="noopener">GPS.gov — Relativity & timing</a></p> - Network accessline 741
var ACCENT = cfg.accent || "var(--accent,#3b82f6)"; var KEY_HINT = PROVIDER === "openai" ? "sk-… (your OpenAI API key)" : "sk-ant-… (your Anthropic API key)"; var KEY_LINK = PROVIDER === "openai" ? "https://platform.openai.com/api-keys" - Network accessline 742
var KEY_HINT = PROVIDER === "openai" ? "sk-… (your OpenAI API key)" : "sk-ant-… (your Anthropic API key)"; var KEY_LINK = PROVIDER === "openai" ? "https://platform.openai.com/api-keys" : "https://console.anthropic.com/settings/keys"; va - Network accessline 743
var KEY_LINK = PROVIDER === "openai" ? "https://platform.openai.com/api-keys" : "https://console.anthropic.com/settings/keys"; - Network accessline 843
var sys = "You are a friendly assistant embedded in this web page. Answer the user's questions grounded in the page content below. Be concise and clear. If a question goes beyond the page, you may answer briefly from general knowledge but s - Network accessline 844
[Credential-related source omitted] - Network accessline 845
url: "https://api.openai.com/v1/chat/completions", - Network accessline 850
// SECURITY: the "dangerous-direct-browser-access" header is safe ONLY because `key` is the // reader's OWN BYOK key (held in memory, theirs to spend). NEVER ship your own key this way. url: "https://api.anthropic.com/v1/message - Network accessline 851
[Credential-related source omitted] - Network accessline 852
url: "https://api.anthropic.com/v1/messages", - Network accessline 855
pick: function(d){ return d && d.content && d.content[0] && d.content[0].text; } }; fetch(req.url, { method:"POST", headers:req.headers, body:JSON.stringify(req.body) }) - Network accessline 856
}; fetch(req.url, { method:"POST", headers:req.headers, body:JSON.stringify(req.body) }) .then(function(r){ return r.json(); }) - Network accessline 857
fetch(req.url, { method:"POST", headers:req.headers, body:JSON.stringify(req.body) })
examples/gutenberg.html
- Network accessline 5
<meta name="viewport" content="width=device-width, initial-scale=1"> <title>The Machine That Multiplied Ideas — How Gutenberg's Press Worked & Changed the World</title> <link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 6
<title>The Machine That Multiplied Ideas — How Gutenberg's Press Worked & Changed the World</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - Network accessline 7
<link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 8
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - Network accessline 9
<link href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=UnifrakturCook:wght@700&family=Work+Sans:wght@400;500;600&display=swap" rel="stylesheet"> - Network accessline 614
<h3 style="margin-top:var(--s6); font-size:1.1rem; color:var(--ox)">Sources & further reading</h3> <div class="src"> <p>Elizabeth Eisenstein, <a href="https://www.cambridge.org/core/books/printing-press-as-an-agent-of-chan - Network accessline 615
<div class="src"> <p>Elizabeth Eisenstein, <a href="https://www.cambridge.org/core/books/printing-press-as-an-agent-of-change/" target="_blank" rel="noopener"><i>The Printing Press as an Agent of Change</i></a> (Cambridge UP).</p> - Network accessline 616
<p>Elizabeth Eisenstein, <a href="https://www.cambridge.org/core/books/printing-press-as-an-agent-of-change/" target="_blank" rel="noopener"><i>The Printing Press as an Agent of Change</i></a> (Cambridge UP).</p> - Network accessline 617
<p>British Library, <a href="https://www.bl.uk/treasures/gutenberg/homepage.html" target="_blank" rel="noopener">Treasures in Full: Gutenberg Bible</a>.</p> - Network accessline 618
<p>Library of Congress, <a href="https://www.loc.gov/item/2021667076/" target="_blank" rel="noopener">Gutenberg Bible</a> collection notes.</p> - Network accessline 619
<p>Encyclopædia Britannica, <a href="https://www.britannica.com/biography/Johannes-Gutenberg" target="_blank" rel="noopener">Johannes Gutenberg</a> & <a href="https://www.britannica.com/technology/printing-press" target="_blank" rel="no - Network accessline 977
var ACCENT = cfg.accent || "var(--accent,#3b82f6)"; var KEY_HINT = PROVIDER === "openai" ? "sk-… (your OpenAI API key)" : "sk-ant-… (your Anthropic API key)"; var KEY_LINK = PROVIDER === "openai" ? "https://platform.openai.com/api-keys" - Network accessline 978
var KEY_HINT = PROVIDER === "openai" ? "sk-… (your OpenAI API key)" : "sk-ant-… (your Anthropic API key)"; var KEY_LINK = PROVIDER === "openai" ? "https://platform.openai.com/api-keys" : "https://console.anthropic.com/settings/keys"; va - Network accessline 979
var KEY_LINK = PROVIDER === "openai" ? "https://platform.openai.com/api-keys" : "https://console.anthropic.com/settings/keys"; - Network accessline 1079
var sys = "You are a friendly assistant embedded in this web page. Answer the user's questions grounded in the page content below. Be concise and clear. If a question goes beyond the page, you may answer briefly from general knowledge but s - Network accessline 1080
[Credential-related source omitted] - Network accessline 1081
url: "https://api.openai.com/v1/chat/completions", - Network accessline 1086
// SECURITY: the "dangerous-direct-browser-access" header is safe ONLY because `key` is the // reader's OWN BYOK key (held in memory, theirs to spend). NEVER ship your own key this way. url: "https://api.anthropic.com/v1/message - Network accessline 1087
[Credential-related source omitted] - Network accessline 1088
url: "https://api.anthropic.com/v1/messages", - Network accessline 1091
pick: function(d){ return d && d.content && d.content[0] && d.content[0].text; } }; fetch(req.url, { method:"POST", headers:req.headers, body:JSON.stringify(req.body) }) - Network accessline 1092
}; fetch(req.url, { method:"POST", headers:req.headers, body:JSON.stringify(req.body) }) .then(function(r){ return r.json(); }) - Network accessline 1093
fetch(req.url, { method:"POST", headers:req.headers, body:JSON.stringify(req.body) })
examples/iso-vs-nso.html
- Network accessline 5
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> <title>ISO vs. NSO: how your stock options are taxed</title> <link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 6
<title>ISO vs. NSO: how your stock options are taxed</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - Network accessline 7
<link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 8
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - Network accessline 9
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap" rel="stylesheet"> - Network accessline 635
<h2 tabindex="-1">Where this comes from</h2> <ul class="src-list"> <li><a href="https://www.irs.gov/publications/p525" target="_blank" rel="noopener">IRS Publication 525 — Taxable and Nontaxable Income</a><br><span style="color:va - Network accessline 636
<ul class="src-list"> <li><a href="https://www.irs.gov/publications/p525" target="_blank" rel="noopener">IRS Publication 525 — Taxable and Nontaxable Income</a><br><span style="color:var(--muted);font-size:13.5px">The primary rules fo - Network accessline 637
<li><a href="https://www.irs.gov/publications/p525" target="_blank" rel="noopener">IRS Publication 525 — Taxable and Nontaxable Income</a><br><span style="color:var(--muted);font-size:13.5px">The primary rules for statutory (ISO) and nonsta - Network accessline 638
<li><a href="https://www.law.cornell.edu/uscode/text/26/422" target="_blank" rel="noopener">26 U.S. Code §422 — Incentive stock options</a><br><span style="color:var(--muted);font-size:13.5px">The statute: holding periods, the $100,000 limi - Network accessline 639
<li><a href="https://www.irs.gov/newsroom/irs-releases-tax-inflation-adjustments-for-tax-year-2026-including-amendments-from-the-one-big-beautiful-bill" target="_blank" rel="noopener">IRS — Tax year 2026 inflation adjustments</a><br><span s - Network accessline 640
<li><a href="https://www.irs.gov/instructions/i6251" target="_blank" rel="noopener">IRS Form 6251 instructions — Alternative Minimum Tax</a><br><span style="color:var(--muted);font-size:13.5px">How the ISO spread enters the AMT calculation, - Network accessline 641
<li><a href="https://taxfoundation.org/data/all/federal/2026-tax-brackets/" target="_blank" rel="noopener">Tax Foundation — 2026 federal tax brackets</a><br><span style="color:var(--muted);font-size:13.5px">Ordinary and capital-gains rate s
examples/rag.html
- Network accessline 5
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>How RAG Works — an open-book exam for AI</title> <link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 6
<title>How RAG Works — an open-book exam for AI</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - Network accessline 7
<link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 8
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - Network accessline 9
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet"> - Network accessline 690
<h3 style="font-size:18px;margin-bottom:14px">Go to the sources</h3> <div class="src-list"> <a class="src-item" href="https://arxiv.org/abs/2005.11401" target="_blank" rel="noopener"> - Network accessline 691
<div class="src-list"> <a class="src-item" href="https://arxiv.org/abs/2005.11401" target="_blank" rel="noopener"> <div class="st">The original RAG paper (2020)</div> - Network accessline 692
<a class="src-item" href="https://arxiv.org/abs/2005.11401" target="_blank" rel="noopener"> - Network accessline 695
<span class="su">arxiv.org/abs/2005.11401</span> </a> <a class="src-item" href="https://www.pinecone.io/learn/retrieval-augmented-generation/" target="_blank" rel="noopener"> - Network accessline 696
</a> <a class="src-item" href="https://www.pinecone.io/learn/retrieval-augmented-generation/" target="_blank" rel="noopener"> <div class="st">Pinecone — RAG learning guide</div> - Network accessline 697
<a class="src-item" href="https://www.pinecone.io/learn/retrieval-augmented-generation/" target="_blank" rel="noopener"> - Network accessline 700
<span class="su">pinecone.io/learn</span> </a> <a class="src-item" href="https://python.langchain.com/docs/tutorials/rag/" target="_blank" rel="noopener"> - Network accessline 701
</a> <a class="src-item" href="https://python.langchain.com/docs/tutorials/rag/" target="_blank" rel="noopener"> <div class="st">LangChain — build a RAG app</div> - Network accessline 702
<a class="src-item" href="https://python.langchain.com/docs/tutorials/rag/" target="_blank" rel="noopener"> - Network accessline 705
<span class="su">python.langchain.com</span> </a> <a class="src-item" href="https://arxiv.org/abs/2307.03172" target="_blank" rel="noopener"> - Network accessline 706
</a> <a class="src-item" href="https://arxiv.org/abs/2307.03172" target="_blank" rel="noopener"> <div class="st">"Lost in the Middle" (2023)</div> - Network accessline 707
<a class="src-item" href="https://arxiv.org/abs/2307.03172" target="_blank" rel="noopener">
examples/special-relativity.html
- Network accessline 5
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>How Special Relativity Works</title> <link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 6
<title>How Special Relativity Works</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - Network accessline 7
<link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 8
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - Network accessline 9
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
index.html
- Network accessline 6
<title>Explainer examples</title> <meta name="description" content="Webpages and slide decks built with the html-explainer skill — self-contained, source-grounded, interactive explainers."> <link rel="preconnect" href="https://fonts.googlea - Network accessline 7
<meta name="description" content="Webpages and slide decks built with the html-explainer skill — self-contained, source-grounded, interactive explainers."> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" h - Network accessline 8
<link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 9
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - Network accessline 10
<link href="https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400&family=Inter:wght@400;500;600&display=swap" rel="stylesheet"> - Network accessline 41
<p class="eyebrow">Examples</p> <h1>Interactive explainers</h1> <p class="lede">Webpages and slide decks built with the <a href="https://github.com/ds-vibe/html-explainer" style="color:var(--accent)">html-explainer</a> skill. Each is se - Network accessline 42
<h1>Interactive explainers</h1> <p class="lede">Webpages and slide decks built with the <a href="https://github.com/ds-vibe/html-explainer" style="color:var(--accent)">html-explainer</a> skill. Each is self-contained, source-grounded and - Network accessline 43
<p class="lede">Webpages and slide decks built with the <a href="https://github.com/ds-vibe/html-explainer" style="color:var(--accent)">html-explainer</a> skill. Each is self-contained, source-grounded and interactive. Use the “<stron - Network accessline 99
<footer><div class="wrap"> Built with the <a href="https://github.com/ds-vibe/html-explainer">html-explainer</a> skill · <a href="./LICENSE">MIT</a> - Network accessline 100
Built with the <a href="https://github.com/ds-vibe/html-explainer">html-explainer</a> skill · <a href="./LICENSE">MIT</a>
package-lock.json
- Network accessline 11
"node_modules/fsevents": { "version": "2.3.2", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", - Network accessline 12
"version": "2.3.2", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", - Network accessline 13
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", - Network accessline 26
"node_modules/playwright": { "version": "1.61.0", "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.61.0.tgz", - Network accessline 27
"version": "1.61.0", "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.61.0.tgz", "integrity": "sha512-Z+7BeeqQPRRzklHsVFP4KTGIyMxKUmfeRA4WisM6G3/XW6nwGeX6fX9qYaDa+CiUqpOkb2f6X3nar05R3kSuJQ==", - Network accessline 28
"resolved": "https://registry.npmjs.org/playwright/-/playwright-1.61.0.tgz", - Network accessline 45
"node_modules/playwright-core": { "version": "1.61.0", "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.61.0.tgz", - Network accessline 46
"version": "1.61.0", "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.61.0.tgz", "integrity": "sha512-caX7TrY3Ml6egyDX0WUcTHDxodl/b51y5wJOdCEA36QviK/s2g081hvmGs8eaE3DWb6NYZQ6BjO/QkNRPenoPA==", - Network accessline 47
"resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.61.0.tgz",
package.json
- Executable scriptline 1
Executable file
scripts/assemble.mjs
- Executable scriptline 1
#!/usr/bin/env node
scripts/chat-dock.js
- Executable scriptline 1
Executable file - Network accessline 49
var ACCENT = cfg.accent || "var(--accent,#3b82f6)"; var KEY_HINT = PROVIDER === "openai" ? "sk-… (your OpenAI API key)" : "sk-ant-… (your Anthropic API key)"; var KEY_LINK = PROVIDER === "openai" ? "https://platform.openai.com/api-keys" - Network accessline 50
var KEY_HINT = PROVIDER === "openai" ? "sk-… (your OpenAI API key)" : "sk-ant-… (your Anthropic API key)"; var KEY_LINK = PROVIDER === "openai" ? "https://platform.openai.com/api-keys" : "https://console.anthropic.com/settings/keys"; va - Network accessline 51
var KEY_LINK = PROVIDER === "openai" ? "https://platform.openai.com/api-keys" : "https://console.anthropic.com/settings/keys"; - Network accessline 151
var sys = "You are a friendly assistant embedded in this web page. Answer the user's questions grounded in the page content below. Be concise and clear. If a question goes beyond the page, you may answer briefly from general knowledge but s - Network accessline 152
[Credential-related source omitted] - Network accessline 153
url: "https://api.openai.com/v1/chat/completions", - Network accessline 160
url: "https://api.anthropic.com/v1/messages", - Network accessline 163
pick: function(d){ return d && d.content && d.content[0] && d.content[0].text; } }; fetch(req.url, { method:"POST", headers:req.headers, body:JSON.stringify(req.body) }) - Network accessline 164
}; fetch(req.url, { method:"POST", headers:req.headers, body:JSON.stringify(req.body) }) .then(function(r){ return r.json(); }) - Network accessline 165
fetch(req.url, { method:"POST", headers:req.headers, body:JSON.stringify(req.body) })
scripts/review-mode.js
- Executable scriptline 1
Executable file
scripts/shoot.mjs
- Executable scriptline 1
#!/usr/bin/env node - Network accessline 8
// Usage: // node shoot.mjs <url> [outDir] // node shoot.mjs http://localhost:3000 /tmp/shots - Network accessline 9
// node shoot.mjs <url> [outDir] // node shoot.mjs http://localhost:3000 /tmp/shots // node shoot.mjs "file:///abs/path/to/page.html" /tmp/shots - Network accessline 10
// node shoot.mjs http://localhost:3000 /tmp/shots
How the signals fit together
Facts from a static read of the files at the pinned commit. They describe what the code does, not why.
Some files could not be read; the facts below still hold.
Declared and executed: 4 facts
- Contacts platform.openai.com, which SKILL.md, the README and the plugin manifest do not mentionscripts/chat-dock.js:51High confidence
- Contacts console.anthropic.com, which SKILL.md, the README and the plugin manifest do not mentionscripts/chat-dock.js:51High confidence
- Contacts api.openai.com, which SKILL.md, the README and the plugin manifest do not mentionscripts/chat-dock.js:153High confidence
- Contacts api.anthropic.com, which SKILL.md, the README and the plugin manifest do not mentionscripts/chat-dock.js:160High confidence
Signal confidence: 32 facts
- Network access in prose of documentationREADME.md:3Low confidence
- Network access in prose of documentationREADME.md:9Low confidence
- Network access in prose of documentationREADME.md:36Low confidence
- Network access in prose of documentationREADME.md:37Low confidence
- Network access in prose of documentationREADME.md:38Low confidence
- Network access in prose of documentationREADME.md:39Low confidence
- Network access in prose of documentationREADME.md:40Low confidence
- Network access in prose of documentationREADME.md:41Low confidence
- Network access in prose of documentationREADME.md:42Low confidence
- Network access in prose of documentationREADME.md:43Low confidence
- Network access in prose of documentationREADME.md:44Low confidence
- Network access in code of documentationREADME.md:65Low confidence
- Network access in prose of documentationREADME.md:77Low confidence
- Network access in prose of documentationREADME.md:78Low confidence
- Executable script in code of a file that runspackage.json:1High confidence
- Executable script in code of a file that runsscripts/assemble.mjs:1High confidence
- Executable script in a comment of a file that runsscripts/chat-dock.js:1Low confidence
- Network access in code of a file that runsscripts/chat-dock.js:49High confidence
- Network access in code of a file that runsscripts/chat-dock.js:50High confidence
- Network access in code of a file that runsscripts/chat-dock.js:51High confidence
- Network access in code of a file that runsscripts/chat-dock.js:151High confidence
- Network access in code of a file that runsscripts/chat-dock.js:152High confidence
- Network access in code of a file that runsscripts/chat-dock.js:153High confidence
- Network access in code of a file that runsscripts/chat-dock.js:160High confidence
- Network access in code of a file that runsscripts/chat-dock.js:163High confidence
- Network access in code of a file that runsscripts/chat-dock.js:164High confidence
- Network access in code of a file that runsscripts/chat-dock.js:165High confidence
- Executable script in a comment of a file that runsscripts/review-mode.js:1Low confidence
- Executable script in code of a file that runsscripts/shoot.mjs:1High confidence
- Network access in a comment of a file that runsscripts/shoot.mjs:8Low confidence
- Network access in a comment of a file that runsscripts/shoot.mjs:9Low confidence
- Network access in a comment of a file that runsscripts/shoot.mjs:10Low confidence
Works with
| Agent | Status | Evidence | Install to |
|---|---|---|---|
| Claude Code | Compatible | Standard SKILL.md SKILL.md | .claude/skills/<skill-name>/ |
| Codex | Compatible | Standard SKILL.md SKILL.md | .agents/skills/<skill-name>/ |
| Cursor | Compatible | Standard SKILL.md SKILL.md | .cursor/skills/<skill-name>/ |
| Gemini CLI | Compatible | Standard SKILL.md SKILL.md | .gemini/skills/<skill-name>/ |
| GitHub Copilot | Compatible | Standard SKILL.md SKILL.md | .github/skills/<skill-name>/ |
| OpenCode | Compatible | Standard SKILL.md SKILL.md | .opencode/skills/<skill-name>/ |
- Native The repository ships a manifest, folder or frontmatter field for this agent.
- Compatible A standard SKILL.md that this agent can read.
- Unknown No evidence either way.
Derived automatically from paths, manifests and frontmatter. Not tested on each agent.
