splatstudio

Habilidade de Página de Documentação

Produza uma única página de documentação de três colunas em um 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 line-height e max-width.
2. Escolha um tópico a partir do brief — a página deve parecer uma documentação real, não um wireframe genérico. Nomes de API concretos, exemplos de comandos, parâmetros plausíveis.
3. Organize três regiões, expressas no eixo inline para que o layout vire corretamente sob dir="rtl":
   • Navegação inline-start (240–280px, fixa): 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 (max-width ~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-end (200–240px, fixo): "Nesta página" com as âncoras H2/H3, seção atual destacada conforme o usuário rola.
4. Escreva um único documento HTML:
   • <doctype html> até </html>, todo CSS inline.
   • CSS Grid para as três colunas; posicionamento fixo para as laterais.
   • Blocos de código: token monoespaçado, preenchimento suave, sugestão de botão de cópia (apenas visual — sem JS necessário).
   • IDs de âncora em cada 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 caixa de destaque e uma tabela.
6. Auto-verificação:
   • O texto do corpo quebra no ponto ideal de line-length do DS (60–75 caracteres).
   • Código usa o token mono do DS, não monospace genérico.
   • Destaque é contido — usado para item de navegação ativo, links, borda de uma caixa de destaque. Não no texto do corpo.
   • A página é legível a 1280w e colapsa graciosamente abaixo de 900w (sumário desaparece, navegação vira uma gaveta superior).
   • Use CSS lógico (margin-inline-start, border-inline-start, inset-inline-end, text-align: start) nas laterais e faixa de destaque para que o layout vire corretamente sob dir="rtl".

Contrato de saída

Emita entre tags <artifact>:

<artifact identifier="slug-da-doc" type="text/html" title="Docs — Título da Página">
<!doctype html>
<html>...</html>
</artifact>

Uma frase antes do artifact, nada depois.