Redator de Documentação de Componentes do Design System

Você é um especialista em design systems que trabalhou nos design systems da Atlassian, Shopify e IBM. Sua documentação é conhecida por ser clara, completa e amigável para desenvolvedores. Preciso que você escreva a documentação completa para um componente de design system. ## Informações do Componente Nome do componente: [NOME_DO_COMPONENTE] Tipo de componente: [ex.: Button, Input, Modal, Card, etc.] Nome do design system: [NOME_DO_SEU_DESIGN_SYSTEM] Stack tecnológica: [ex.: React + TypeScript, Vue, etc.] ## Gere a Documentação com Estas Seções: ### 1. VISÃO GERAL - Descrição em uma frase do que o componente faz - Quando usar este componente (2-3 tópicos) - Quando NÃO usar este componente (com alternativas) - Descrição do exemplo visual (descreva o estado padrão) ### 2. ANATOMIA Descreva cada parte do componente: - Container/wrapper - Ícone (se aplicável) - Rótulo/texto - Elementos de suporte - Estados interativos Use um formato de diagrama numerado: "1. Container - O wrapper externo que contém todos os elementos..." ### 3. VARIANTES Para cada variante, forneça: - Nome da variante - Caso de uso (quando usar esta variante) - Descrição visual - Cenário de exemplo Variantes comuns a considerar: - Variantes de tamanho (small, medium, large) - Variantes de estilo (primary, secondary, ghost, outline) - Variantes de estado (default, hover, active, disabled, loading) ### 4. PROPS / API Crie uma tabela de props com as colunas: | Prop | Tipo | Padrão | Obrigatório | Descrição | Inclua: - Todas as props de customização - Manipuladores de eventos (onClick, onChange, etc.) - Props de acessibilidade (aria-label, etc.) - Props para sobrescrever estilos ### 5. DIRETRIZES DE USO #### Faça: - Liste 4-5 boas práticas com explicações - Inclua a justificativa de cada diretriz #### Não faça: - Liste 4-5 antipadrões a evitar - Explique por que cada um é problemático ### 6. ACESSIBILIDADE (A11Y) - Requisitos de navegação por teclado - Considerações para leitores de tela - Atributos ARIA necessários - Requisitos de contraste de cor - Gerenciamento de foco - Tamanhos de área de toque (mobile) ### 7. EXEMPLOS DE CÓDIGO Forneça 3-4 exemplos de código: Exemplo 1: Uso Básico ```[language] // Implementação simples apenas com as props obrigatórias ``` Exemplo 2: Com Todas as Opções ```[language] // Implementação completa mostrando todas as props ``` Exemplo 3: Padrão Comum ```[language] // Padrão de uso real (ex.: dentro de um formulário) ``` Exemplo 4: Composição ```[language] // Como compor com outros componentes ``` ### 8. COMPONENTES RELACIONADOS Liste 3-5 componentes relacionados com: - Nome do componente - Relação (ex.: "frequentemente usado junto", "alternativa para...") - Placeholder de link ### 9. CHANGELOG Crie um modelo para o histórico de versões: | Versão | Data | Mudanças | |---------|------|---------| | 1.0.0 | AAAA-MM-DD | Lançamento inicial | ### 10. FIGMA / ESPECIFICAÇÕES DE DESIGN Inclua placeholders para: - Link do componente no Figma - Especificações de espaçamento - Especificações de tipografia - Tokens de cor utilizados Torne a documentação fácil de escanear, com títulos claros, tabelas e blocos de código. Use um tom amigável, porém profissional. Inclua dicas úteis em caixas de destaque quando apropriado.