HTML Docs

Crear, editar, inspeccionar y publicar documentos HTML colaborativos desde agentes de IA.

Documentación

HTML Docs turns one source into a document, video, or complete course

Apunta Codex o Claude a una carpeta, base de código, sitio web, artículo, PDF, documento o tema de investigación.

Obtén un documento HTML fundamentado en fuentes, un video explicativo narrado o un curso de aprendizaje completo, con citas, subtítulos, escenas editables y un sitio compartible.

¿Deberías usarlo?

Usa HTML Docs cuando la respuesta necesite enseñar, no solo existir:

Tu situación	Pide	Por qué
Una idea difícil necesita encajar	Documento + video	La página conserva el detalle; el video construye el modelo mental. Esta es la mejor opción por defecto.
Una carpeta o base de código contiene varias lecciones	Curso completo	El agente reorganiza la fuente en prerrequisitos, lecciones, práctica, verificaciones, transcripciones y un sitio de aprendizaje.
Alguien necesita la versión visual breve	Video	Recibes un Player compartible con narración, subtítulos sincronizados, transcripción y respaldo MP4.
Necesitas una referencia visual duradera	Documento	Recibes HTML responsive con diagramas, ejemplos, evidencia de fuentes y colaboración.

Para una respuesta factual rápida o una nota desechable, pregunta a tu agente normalmente. Usa esta habilidad cuando el fundamento de fuentes, la explicación visual, la narración, la presentación o una experiencia de aprendizaje reutilizable sean importantes.

No es un chatbot separado. Es un flujo de trabajo de producción instalado en la sesión de Codex o Claude Code que ya usas:

your source → your agent + $html-docs → private page, Player, and Studio

Empieza en sesenta segundos

npx skills add raunaqbn/html-docs-skill --skill html-docs -g

Luego:

Inicia una tarea fresca de Codex o una sesión de Claude Code.
Ábrela en la carpeta de origen, o dale una URL, PDF, documento o tema.
Menciona $html-docs, la audiencia y lo que deben entender.

Por ejemplo:

Use $html-docs to turn this codebase into a private course for new engineers.

No hay un modelo de autoría alojado oculto detrás del comando. Tu agente actual investiga, escribe, diseña y produce el proyecto. Las herramientas locales abiertas normalizan fuentes, compilan escenas, sincronizan narración, auditan fotogramas, renderizan medios y publican una vista previa privada.

Pide el resultado que necesitas

Salida	Prompt
Documento	`Use $html-docs to research this topic and make a beautiful, cited visual document.`
Video	`Use $html-docs to turn this URL into a five-minute captioned explainer video.`
Documento + video	`Use $html-docs to explain this paper with a rich page and embedded narrated video.`
Curso completo	`Use $html-docs to turn this folder into a private adaptive course with a learner mission, lessons, videos, practice, feedback, and mastery evidence.`
Auto	`Use $html-docs to choose the clearest format for explaining this source.`

Las ejecuciones automáticas permanecen privadas. La publicación pública o no listada es una acción separada y explícita.

Construido con HTML, voz y evidencia

Estos bucles ligeros son fotogramas de la salida real del renderizador de HTML Docs, no maquetas de producto.

A document becoming a live HTML explanation

Desde la terminal hasta la publicación

El documento conserva el brief de lanzamiento y el contexto de revisión. El video complementario enseña el flujo de trabajo visualmente.

$A signed-rate mechanism developing as an explanatory diagram$

Cómo dos muestras se convierten en velocidad

Una fórmula se convierte en un modelo mental concreto con movimiento temporal, subtítulos y una lectura visual estable.

A code lesson rendered as an explanatory course video

Protegiendo un estimador de velocidad

Una lección de programación defensiva convierte marcas de tiempo inválidas y entradas no finitas en un contrato visual que los estudiantes pueden recordar.

Explora el Player en vivo, las páginas de curso, los proyectos fuente y los artefactos de Studio en el escaparate de HTML Docs.

Ejemplos de cursos completos

Curso	Qué construirás y entenderás
Robot Learning, Gently · 12 lecciones	Avanza desde el bucle observación–política–acción a través de aprendizaje por imitación y refuerzo, representaciones de acciones, modelos del mundo y VLAs; luego aplica la teoría en un capstone medido de ANIMA-Kiwi.
Build an LLM from First Principles · 11 lecciones	Construye la pila en lugar de tratarla como una caja negra: autodiferenciación escalar, embeddings, diagnósticos de entrenamiento, atención causal, tokenización por pares de bytes, un Transformer solo decodificador y evaluación honesta.
The Inference Company Founder’s Field Course · 7 lecciones	Elige una cuña defendible, construye y compara un MVP de servido con forma de producción, modela la economía, opera bajo carga y aplica puertas de evidencia antes de buscar silicio personalizado.

Los briefs de reproducción y los libros de contabilidad de fuentes portátiles viven en examples/: base de código → curso, sitio web → documento + video y tema de investigación → curso.

El bucle de producción

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

La página y el video comparten un único modelo de evidencia, pero sirven propósitos distintos: la página es la referencia detallada; el video enseña el mecanismo central visualmente. Los cursos también preservan el propósito del estudiante, la terminología canónica, las capacidades demostradas, los conceptos erróneos, el programa de repaso, el libro de contabilidad de fuentes y el rastro de decisiones detrás del plan de estudios. La finalización es estado de navegación; el dominio requiere evidencia.

Por qué la sincronización se mantiene

Genera o graba el audio final antes de la sincronización temporal final de las escenas.
Prefiere marcas de tiempo de palabras nativas del proveedor.
Alinea forzosamente la transcripción bloqueada cuando las marcas de tiempo no están disponibles.
Asigna cada palabra hablada exactamente a una señal y una escena.
Da a cada señal uno o más objetivos de data-html-video-id de la misma escena.
Deriva subtítulos, capítulos, escenas y sincronización visual de la misma pista de palabras.
Busca en Chromium marcas de tiempo explícitas; nunca dependas de relojes de pared ni de animación autoejecutable.
Compara capturas repetidas del mismo momento e inspecciona las hojas de contacto de señales/escenas.

Los perfiles de voz son neutrales respecto al proveedor: warm-teacher, gentle-guide, precise-engineer y energetic-coach. ElevenLabs se admite con tu propia clave; Kokoro es el respaldo sin conexión. Las claves del proveedor permanecen locales.

El producto abierto

Paquete	Responsabilidad
`html-docs/`	Habilidad de agente instalable, flujo de trabajo de fuentes/investigación, sistema de diseño de documentos, dirección de video y producción de cursos
`@html-docs/cli`	Publicación, autenticación, servidor MCP, orquestación de proyectos e instalación de agentes
`@html-docs/html-video`	Esquemas de proyectos portátiles, instantáneas de fuentes, sincronización de audio/subtítulos, tiempo de ejecución determinista, auditorías, captura Chromium, renderizado FFmpeg y sincronización
`@html-docs/player`	Componente web `<html-docs-video>` sin dependencias con reproductor en vivo y respaldo MP4
`@html-docs/studio`	Studio educativo orientado a evidencia con vista previa en vivo, forma de onda, carriles de señales/subtítulos, selección semántica, anulaciones, solicitudes y versiones

El contenido autorizado, el renderizado, la generación de voz y las credenciales del proveedor permanecen en tu máquina. HTML Docs aloja versiones privadas de proyectos, páginas colaborativas, el Player en vivo, el Studio guiado, sitios de curso y medios publicados explícitamente.

Comandos locales del proyecto

La habilidad los invoca por ti, pero cada etapa es inspeccionable:

# 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

Los cachés de fotogramas del renderizador están direccionados por contenido. Si Chromium o FFmpeg se interrumpen, volver a ejecutar el render reutiliza cada fotograma determinista completado.

El andamiaje es solo un punto de partida normalizado. El agente activo lo reemplaza con el grafo de evidencia, el contrato del estudiante, la especificación del curso, el mapa de dependencias, las rebanadas verticales de lecciones, las páginas de lecciones, la narración, los guiones gráficos, las escenas semánticas, la práctica diagnóstica, los subtítulos y las verificaciones.

Publica cualquier HTML

La ruta solo-documento sigue siendo un solo comando:

npx @html-docs/cli publish page.html
# → https://www.html-docs.com/site/<slug>

Autentica el trabajo de tu propiedad:

npx @html-docs/cli auth

Instala el servidor MCP en los clientes detectados:

npx @html-docs/cli install

Las herramientas disponibles incluyen publicación de documentos, lectura, actualización, comentarios, sincronización de video y operaciones de proyecto. Consulta la guía del agente y la referencia de API.

Artefactos portátiles

Los cursos y videos son carpetas ordinarias con manifiestos JSON, un contrato de estudiante, especificación de curso, registros de dominio, rebanadas de producción, briefs en Markdown, módulos de escena HTML/CSS/JavaScript, archivos de audio, palabras temporizadas, subtítulos, registros de evidencia, informes de calidad y respaldos renderizados. Pueden inspeccionarse, versionarse, moverse, renderizarse localmente o alojarse de forma independiente.

Licencia y procedencia

La habilidad HTML Docs, el Producer, el Player y el Studio tienen licencia MIT. Las dependencias de terceros y las referencias de diseño adaptadas se registran en NOTICE. Consulta PROVENANCE.md y THIRD_PARTY_NOTICES.md para la procedencia de lanzamiento.