Página de Documentação da Skill

Produza uma única página de documentação com três colunas em um único arquivo HTML.

Fluxo de Trabalho

1. Leia o DESIGN.md ativo (injetado acima). Use o token de tipo de corpo para prosa; o token mono para código; respeite as regras de altura da linha e largura máxima.
2. Escolha um tópico do resumo — a página deve parecer documentação real, não um wireframe genérico. Nomes concretos de API, exemplos de comandos, parâmetros plausíveis.
3. Disponha três regiões, expressas no eixo inline para que o layout inverta corretamente sob dir="rtl":
   • Navegação inline-início (240–280px, fixo): lista de links agrupados, página atual em negrito com uma faixa de destaque na borda inline-start. 3–5 grupos de 4–8 links.
   • Corpo do artigo (largura máxima ~720px, centralizado na coluna do meio): H1, parágrafo de introdução, seções H2, blocos de código, caixas de destaque (nota / aviso), links inline, listas.
   • Sumário inline-fim (200–240px, fixo): "Nesta página" com os âncoras H2/H3, seção atual destacada conforme o usuário rola.
4. Escreva um único documento HTML:
   • <!doctype html> até </html>, todo o CSS inline.
   • CSS Grid para as três colunas; posicionamento fixo para os trilhos.
   • Blocos de código: token monoespaçado, preenchimento de superfície suave, indicação de botão de cópia (apenas visual — sem necessidade de JS).
   • IDs de âncora em todos os H2/H3 para que os links do sumário funcionem.
   • data-od-id na navegação, artigo e sumário.
5. Prosa: escreva pelo menos 350 palavras de documentação crível. Inclua pelo menos um comando de shell, um trecho de código (5–15 linhas), uma chamada de atenção, uma tabela.
6. Auto-verificação:
   • O texto do corpo quebra no ponto ideal de comprimento de linha do DS (60–75 caracteres).
   • O código usa o token mono do DS, não o genérico monospace.
   • O destaque é contido — usado para o item de navegação ativo, links, uma borda de chamada de atenção. Não no texto do corpo.
   • A página é legível em 1280px e colapsa graciosamente abaixo de 900px (o sumário sai, a navegação se torna uma gaveta superior).
   • Use CSS lógico (margin-inline-start, border-inline-start, inset-inline-end, text-align: start) nos trilhos e na faixa de destaque para que o layout inverta corretamente sob dir="rtl".

Contrato de Saída

Emita entre as tags <artifact>:

<artifact identifier="docs-slug" type="text/html" title="Docs — Page Title">
<!doctype html>
<html>...</html>
</artifact>

Uma frase antes do artefato, nada depois.