documentation

Toda página de componente segue a estrutura abaixo. Use o gerador Python ou copie de uma página existente como base.

• Page header: breadcrumb + title + intro + tags
• TOC com links pra cada seção
• Overview com demo principal
• Variants (cores, estilos)
• Sizes (quando aplicável)
• States (default, hover, focus, disabled, etc.)
• Anatomy SVG anotada
• Behaviors (interações específicas)
• Modifiers / API (tabela)
• Usage (do/don't grid)
• Accessibility (WCAG + ARIA)
• Code (HTML/CSS/JS copiável)
• Related (links pra componentes correlatos)

Direto, em pt-br caixa baixa. Frases curtas. Comandos no infinitivo. Exemplos comparados (faz/não faz) em vez de prescrições vagas.

Veja content & voice pra detalhes.

• Mínimo viável — só o necessário pra entender
• Sintaxe HTML semântica
• Comentários em pt-br explicando o porquê
• Botão copy automático (já vem via shell.js)
• Mostrar variantes em snippets separados