HTML Docs gives Codex or Claude a production workflow for turning a folder, codebase, website, paper, PDF, document, or research topic into a beautiful page, narrated video, or complete course.
HTML
Live scenes
VOICE
BYOK or local
EVIDENCE
Every claim
When to use HTML Docs
What it is
This is not another prompt box. It is an installed set of production instructions and open local tools that your existing coding agent follows. The agent researches and authors; HTML Docs structures, synchronizes, audits, renders, and prepares a private handoff.
Choose document + video
The page keeps the detail. The video builds the mental model. This is the best default for an explanation people will revisit.
Use $html-docs to turn this material into a cited document with an embedded narrated explainer video for [audience].Choose a complete course
The agent reorganizes the source into prerequisites, lessons, practice, checks, transcripts, and a navigable learning site.
Use $html-docs to turn this codebase into a private onboarding course for new engineers.Choose video
The result is a shareable HTML Player with explanatory scenes, warm narration, synchronized captions, transcript, and MP4 fallback.
Use $html-docs to turn this URL into a five-minute narrated explainer video for [audience].Run the command below, then start a fresh Codex task or Claude Code session.
Start the agent in the folder or codebase—or give it a URL, PDF, document, or research topic.
Mention $html-docs and say who should understand what. The first pass runs automatically.
You receive the page, live Player, transcript, sources, and Studio—not just a loose media file.
For a quick factual answer or a throwaway note, ask your agent normally. Use HTML Docs when presentation, source grounding, narration, visual explanation, or a reusable learning experience matters.
Start in sixty seconds
There is no separate HTML Docs chat to learn. Keep working in Codex or Claude Code, in the source folder you already have.
$ npx skills add raunaqbn/html-docs-skill --skill html-docs -gRun this once, start a new Codex task in your source folder, then mention $html-docs. Provider credentials stay on your machine.
Courses that remember
The generated workspace preserves why the learner is here, what they can actually demonstrate, where misconceptions remain, and which lesson is the right next step.
Purpose, starting point, constraints, and an observable finish line steer every lesson.
Introduced, practiced, demonstrated, and needs-review remain distinct—completion is not mastery.
Retrieval, guided work, transfer, and misconception-specific feedback make the material durable.
Teaching decisions become dependency-aware vertical slices that can be reviewed end to end.
Ask for an outcome
The skill routes the work. You describe the source, audience, and teaching goal; it chooses the right production path.
Copy into Codex
The strongest explanation: a detailed reference plus a visual mental model.
Use $html-docs to research transformer attention and create a beautiful cited document with an embedded narrated explanatory video. Keep the video visual and the page detailed. Return the local artifact or private collaborative document.
Automatic generation ends as a local artifact or private document. The skill cannot publish.
Generated with the open engine
A defensive-programming lesson turns invalid timestamps and non-finite inputs into a visual contract learners can remember.
The document preserves the launch brief and review context. The companion video teaches the workflow visually.
A formula becomes a concrete before-and-after model with narration, timed motion, captions, and a settled visual read.
The production loop
Rendering is only the last mile. The system earns its quality by grounding claims, adapting to demonstrated understanding, choosing the right visual grammar, writing for listening, and making narration the timing authority.
Every spoken word has one owner.
Word → cue → semantic target → caption → scene. The same track drives the live Player and rendered MP4.
Freeze files, URLs, papers, and evidence into a versioned manifest.
Capture purpose, starting point, constraints, finish line, and demonstrated mastery.
Resolve teaching decisions and slice production into dependency-aware learner wins.
Lock phrase-shaped narration with delivery direction and pronunciation entries.
Use architecture flows, causal chains, state machines, equations, and code walkthroughs.
One final word track owns cues, targets, captions, chapters, and scene boundaries.
Use retrieval, guided practice, transfer, and specific misconception feedback.
Review craft and specification fidelity before handing off a private preview.
Open and inspectable
Projects are folders of HTML, CSS, JavaScript, JSON, Markdown, audio, captions, evidence, and quality reports. No proprietary authoring runtime is required.
Browse the sourceLOCAL
Research, authoring, voice keys, source files, Chromium rendering
HOSTED
Private versions, collaborative pages, Player, Studio, course sites
VOICE
ElevenLabs BYOK, provider-neutral profiles, Kokoro offline fallback
DELIVERY
Live deterministic HTML, captions, transcript, MP4 fallback
Install the skill, open your source folder, and ask for the outcome you want. The whole first pass runs automatically.