HTML Docs

Crie, edite, inspecione e publique documentos HTML colaborativos a partir de agentes de IA.

Documentação

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

Aponte o Codex ou o Claude para uma pasta, base de código, site, artigo, PDF, documento ou tópico de pesquisa.

Obtenha um documento HTML fundamentado em fontes, vídeo explicativo narrado ou curso de aprendizado completo—com citações, legendas, cenas editáveis e um site compartilhável.

Você deve usar isso?

Use o HTML Docs quando a resposta precisar ensinar, não apenas existir:

Sua situação	Peça	Por quê
Uma ideia difícil precisa fazer sentido	Documento + vídeo	A página mantém o detalhe; o vídeo constrói o modelo mental. Esta é a melhor opção padrão.
Uma pasta ou base de código contém várias lições	Curso completo	O agente reorganiza a fonte em pré-requisitos, lições, prática, verificações, transcrições e um site de aprendizado.
Alguém precisa da versão visual curta	Vídeo	Você obtém um Player compartilhável com narração, legendas sincronizadas, transcrição e fallback em MP4.
Você precisa de uma referência visual durável	Documento	Você obtém HTML responsivo com diagramas, exemplos, evidências de fonte e colaboração.

Para uma resposta factual rápida ou uma nota descartável, pergunte ao seu agente normalmente. Use esta skill quando fundamentação de fontes, explicação visual, narração, apresentação ou uma experiência de aprendizado reutilizável for importante.

Isto não é um chatbot separado. É um fluxo de trabalho de produção instalado na sessão do Codex ou Claude Code que você já usa:

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

Comece em sessenta segundos

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

Em seguida:

Inicie uma nova tarefa do Codex ou sessão do Claude Code.
Abra-a na pasta de origem, ou forneça uma URL, PDF, documento ou tópico.
Mencione $html-docs, o público-alvo e o que eles devem entender.

Por exemplo:

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

Nenhum modelo de autoria hospedado está oculto por trás do comando. Seu agente atual pesquisa, escreve, projeta e cria o projeto. As ferramentas locais abertas normalizam fontes, compilam cenas, sincronizam narração, auditam quadros, renderizam mídia e publicam uma prévia privada.

Peça o resultado que você precisa

Saída	Prompt
Documento	`Use $html-docs to research this topic and make a beautiful, cited visual document.`
Vídeo	`Use $html-docs to turn this URL into a five-minute captioned explainer video.`
Documento + vídeo	`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.`

Execuções automáticas permanecem privadas. A publicação pública ou não listada é uma ação separada e explícita.

Construído com HTML, voz e evidências

Estes loops leves são quadros da saída real do renderizador do HTML Docs—não maquetes de produto.

A document becoming a live HTML explanation

Do terminal à publicação

O documento preserva o briefing de lançamento e o contexto de revisão. O vídeo complementar ensina o fluxo de trabalho visualmente.

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

Como duas amostras se tornam velocidade

Uma fórmula se torna um modelo mental concreto com movimento cronometrado, legendas e uma leitura visual estável.

A code lesson rendered as an explanatory course video

Protegendo um estimador de velocidade

Uma lição de programação defensiva transforma carimbos de tempo inválidos e entradas não finitas em um contrato visual que os alunos podem lembrar.

Explore o Player ao vivo, páginas de curso, projetos de origem e artefatos do Studio na vitrine do HTML Docs.

Exemplos de cursos completos

Curso	O que você vai construir e entender
Robot Learning, Gently · 12 lições	Avance do loop observação–política–ação através de aprendizado por imitação e reforço, representações de ação, modelos de mundo e VLAs—depois aplique a teoria em um projeto final medido ANIMA-Kiwi.
Build an LLM from First Principles · 11 lições	Construa a pilha em vez de tratá-la como uma caixa preta: autodiferenciação escalar, embeddings, diagnósticos de treinamento, atenção causal, tokenização por pares de bytes, um Transformer somente decodificador e avaliação honesta.
The Inference Company Founder’s Field Course · 7 lições	Escolha uma fatia defensável, construa e avalie um MVP de serviço com formato de produção, modele a economia, opere sob carga e aplique portões de evidência antes de buscar silício personalizado.

Briefings de reprodução e registros de fonte portáteis vivem em examples/: base de código → curso, site → documento + vídeo e tópico de pesquisa → curso.

O ciclo de produção

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

A página e o vídeo compartilham um modelo de evidências, mas cumprem funções diferentes: a página é a referência detalhada; o vídeo ensina o mecanismo central visualmente. Os cursos também preservam o propósito do aluno, terminologia canônica, capacidades demonstradas, equívocos, cronograma de recuperação, registro de fontes e o rastro de decisões por trás do currículo. Conclusão é estado de navegação; domínio exige evidências.

Por que a sincronização se mantém

Gere ou grave o áudio final antes do timing final das cenas.
Prefira carimbos de tempo de palavras nativos do provedor.
Faça o alinhamento forçado da transcrição bloqueada quando carimbos de tempo não estiverem disponíveis.
Atribua cada palavra falada a exatamente uma deixa e cena.
Dê a cada deixa um ou mais alvos data-html-video-id na mesma cena.
Derive legendas, capítulos, cenas e timing visual da mesma trilha de palavras.
Posicione o Chromium em carimbos de tempo explícitos; nunca dependa de relógios de parede ou animação automática.
Compare capturas repetidas no mesmo instante e inspecione as folhas de contato de deixa/cena.

Os perfis de voz são neutros em relação ao provedor: warm-teacher, gentle-guide, precise-engineer e energetic-coach. O ElevenLabs é suportado com chave própria; o Kokoro é o fallback offline. As chaves dos provedores permanecem locais.

O produto aberto

Pacote	Responsabilidade
`html-docs/`	Skill de agente instalável, fluxo de trabalho de fonte/pesquisa, sistema de design de documentos, direção de vídeo e produção de cursos
`@html-docs/cli`	Publicação, autenticação, servidor MCP, orquestração de projetos e instalação de agentes
`@html-docs/html-video`	Esquemas de projeto portáteis, instantâneos de fonte, timing de áudio/legendas, runtime determinístico, auditorias, captura Chromium, renderização FFmpeg e sincronização
`@html-docs/player`	Componente web `<html-docs-video>` sem dependências com player ao vivo e fallback em MP4
`@html-docs/studio`	Studio educacional consciente de evidências com prévia ao vivo, forma de onda, faixas de deixa/legenda, seleção semântica, substituições, solicitações e versões

Fonte autoral, renderização, geração de voz e credenciais de provedores permanecem na sua máquina. O HTML Docs hospeda versões privadas de projetos, páginas colaborativas, o Player ao vivo, o Guided Studio, sites de cursos e mídia publicada explicitamente.

Comandos locais do projeto

A skill invoca estes para você, mas cada etapa é inspecionável:

# 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

Os caches de quadros do renderizador são endereçados por conteúdo. Se o Chromium ou FFmpeg for interrompido, reexecutar a renderização reutiliza cada quadro determinístico concluído.

O scaffold é apenas um ponto de partida normalizado. O agente ativo o substitui pelo grafo de evidências, contrato do aluno, especificação do curso, mapa de dependências, fatias verticais de lições, páginas de lições, narração, storyboards, cenas semânticas, prática diagnóstica, legendas e verificações.

Publique qualquer HTML

O caminho somente-documento permanece um comando:

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

Autentique o trabalho de sua propriedade:

npx @html-docs/cli auth

Instale o servidor MCP nos clientes detectados:

npx @html-docs/cli install

As ferramentas disponíveis incluem publicação de documentos, leitura, atualização, comentários, sincronização de vídeo e operações de projeto. Consulte o guia do agente e a referência da API.

Artefatos portáteis

Cursos e vídeos são pastas comuns com manifestos JSON, contrato do aluno, especificação do curso, registros de domínio, fatias de produção, briefings em Markdown, módulos de cena em HTML/CSS/JavaScript, arquivos de áudio, palavras cronometradas, legendas, registros de evidências, relatórios de qualidade e fallbacks renderizados. Eles podem ser inspecionados, versionados, movidos, renderizados localmente ou hospedados de forma independente.

Licença e proveniência

A skill do HTML Docs, o Producer, o Player e o Studio são licenciados sob MIT. Dependências de terceiros e referências de design adaptadas são registradas em NOTICE. Consulte PROVENANCE.md e THIRD_PARTY_NOTICES.md para a proveniência das versões.