HTML Docs
About
Create, edit, inspect, and publish collaborative HTML documents from AI agents.
Details
- Author
- raunaqbn
- Categories
- Productivity, Communication, Knowledge Base, Other
Jump to
Setup
Install HTML Docs in your MCP client (Claude Desktop, Cursor, Windsurf, and others).
Repository: https://github.com/raunaqbn/html-docs-skill
Follow the installation instructions in the repository README, then restart your MCP client.
Point Codex or Claude at a folder, codebase, website, paper, PDF, document, or research topic.
Get a source-grounded HTML document, narrated explainer video, or complete learning course—with citations, captions, editable scenes, and a shareable site.
Use HTML Docs when the answer needs toteach, not merely exist:
For a quick factual answer or a throwaway note, ask your agent normally. Use this skill when source grounding, visual explanation, narration, presentation, or a reusable learning experience matters.
This is not a separate chatbot. It is a production workflow installed into the Codex or Claude Code session you already use:
your source → your agent + $html-docs → private page, Player, and Studio
npx skills add raunaqbn/html-docs-skill --skill html-docs -g
- Start a fresh Codex task or Claude Code session.
- Open it in the source folder, or give it a URL, PDF, document, or topic.
- Mention$html-docs, the audience, and what they should understand.
Use $html-docs to turn this codebase into a private course for new engineers.
No hosted authoring model is hidden behind the command. Your current agent researches, writes, designs, and authors the project. The open local tools normalize sources, compile scenes, synchronize narration, audit frames, render media, and publish a private preview.
Automatic runs stay private. Public or unlisted publication is a separate, explicit action.
These lightweight loops are frames from real HTML Docs renderer output—not product mockups.
The document preserves the launch brief and review context. The companion video teaches the workflow visually.
A formula becomes a concrete mental model with timed motion, captions, and a settled visual read.
A defensive-programming lesson turns invalid timestamps and non-finite inputs into a visual contract learners can remember.
Explore the live Player, course pages, source projects, and Studio artifacts in theHTML Docs showcase.
Reproduction briefs and portable source ledgers live inexamples/: codebase → course, website → document + video, and research topic → course.
folder · repo · URL · PDF · document · topic │ ▼ source snapshot + evidence graph │ ▼ learner contract · course specification │ ▼ vertical lesson slices · mastery evidence │ ┌──────────┴──────────┐ ▼ ▼ rich HTML page locked narration │ ▼ timed words + visual cues │ ▼ deterministic HTML scene modules │ ▼ audit · Player · Studio · MP4
The page and video share one evidence model but serve different jobs: the page is the detailed reference; the video teaches the core mechanism visually. Courses also preserve the learner’s purpose, canonical terminology, demonstrated capabilities, misconceptions, retrieval schedule, source ledger, and the decision trail behind the curriculum. Completion is navigation state; mastery requires evidence.
- Generate or record final audio before final scene timing.
- Prefer provider-native word timestamps.
- Forced-align the locked transcript when timestamps are unavailable.
- Assign every spoken word to exactly one cue and scene.
- Give every cue one or more same-scenedata-html-video-idtargets.
- Derive captions, chapters, scenes, and visual timing from the same word track.
- Seek Chromium to explicit timestamps; never depend on wall clocks or self-running animation.
- Compare repeated same-time captures and inspect cue/scene contact sheets.
Voice profiles are provider-neutral:warm-teacher,gentle-guide,precise-engineer, andenergetic-coach. ElevenLabs is supported through bring-your-own-key; Kokoro is the offline fallback. Provider keys stay local.
Authored source, rendering, voice generation, and provider credentials stay on your machine. HTML Docs hosts private project versions, collaborative pages, the live Player, Guided Studio, course sites, and explicitly published media.
The skill invokes these for you, but every stage is inspectable:
# Any source, with an explicit or automatic output mode html-docs project init ./source --mode auto --output ./explanation html-docs project build ./explanation html-docs project audit ./explanation html-docs project preview ./explanation # A video html-docs/scripts/video.sh build ./video-project html-docs/scripts/video.sh check ./video-project html-docs/scripts/video.sh audit ./video-project html-docs/scripts/video.sh render ./video-project --output ./final.mp4 # A course html-docs/scripts/video.sh course init ./source \ --output ./course-project --title "Course title" html-docs/scripts/video.sh course build ./course-project html-docs/scripts/video.sh course audit ./course-project html-docs/scripts/video.sh course preview ./course-project html-docs/scripts/video.sh course publish ./course-project
Renderer frame caches are content-addressed. If Chromium or FFmpeg is interrupted, rerunning the render reuses every completed deterministic frame.
The scaffold is only a normalized starting point. The active agent replaces it with the evidence graph, learner contract, course specification, dependency map, vertical lesson slices, lesson pages, narration, storyboards, semantic scenes, diagnostic practice, captions, and checks.
The document-only path stays one command:
npx @html-docs/cli publish page.html # → https://www.html-docs.com/site/<slug>
Install the MCP server in detected clients:
Available tools include document publishing, reading, updating, commenting, video synchronization, and project operations. See theagent guideandAPI reference.
Courses and videos are ordinary folders with JSON manifests, a learner contract, course specification, mastery records, production slices, Markdown briefs, HTML/CSS/JavaScript scene modules, audio files, timed words, captions, evidence records, quality reports, and rendered fallbacks. They can be inspected, versioned, moved, rendered locally, or hosted independently.
The HTML Docs skill, Producer, Player, and Studio are MIT licensed. Third-party dependencies and adapted design references are recorded inNOTICE. SeePROVENANCE.mdandTHIRD_PARTY_NOTICES.mdfor release provenance.
Agent-first collaborative project board with an MCP server for coordinating agent fleets and humans on shared tasks.
Connect with 10,000+ tools across HRIS, ATS, CRM, Accounting, Calendar, Meeting, Ticketing, and more categories.
Collaborative word processor you can use with your agent
Connect any AI assistant to Syncro: manage tickets, invoices, customers, assets, and more.
Multi-device file sync, dev-doc CRUD, task management, and session handoffs for AI agents - MCP + OpenAPI dual surface.
Carryo is a remote MCP server for sharing Claude or ChatGPT-created HTML artifacts as live links.
An MCP server that enables AI assistants to interact with Confluence content through a standardized interface.
Decispher captures the decisions, conventions, and constraints from the conversations your team is already having in Slack, GitHub, GitLab, and Jira, then serves them back to every human and every agent that needs them. Automatically.
Publish Markdown or HTML to a clean, shareable link straight from your AI assistant — OAuth, no API keys.
Hosted MCP server for Duvo — start runs, inspect approvals, and expose grocery/retail execution tools to compatible agents.
Sign in to leave a review
Use Google, GitHub, or an email account so ratings stay tied to real people.
No reviews posted yet.
