Glossário
Vocabulário padronizado do ME — termos de estrutura, ações e labeling para falar a mesma língua da IA.
Falar a língua do ME nos prompts faz a IA gerar a coisa certa de primeira. Use estes termos exatos em vez de descrições genéricas — "Subheader" gera melhor que "barra de cima".
Traduzindo o que você quer dizer
A mesma coisa tem mil apelidos. Diga o termo da direita no prompt — a IA gera o componente certo, com o comportamento certo.
| Quando você diz… | Use o termo | Observação |
|---|---|---|
| "uma janela por cima", "um pop-up", "uma caixinha no meio" | Modal | Bloqueia a tela; para confirmar/decidir. "Tem certeza?" → Modal de confirmação. |
| "uma gaveta", "um painel que desliza do lado" | Drawer (ou Slideover) | Desliza pela lateral sem sair da tela; para detalhes/edição rápida. |
| "um aviso", "uma tarja", "uma faixa colorida" | Alert (na tela) ou Banner (topo da página) | Persistente. Some sozinho? → Toast. |
| "uma mensagem que some", "notificaçãozinha no canto" | Toast | Efêmero; ação reversível usa toast com Desfazer. |
| "um balãozinho ao passar o mouse", "uma dica" | Tooltip | Só texto curto de apoio, no hover/foco. |
| "os três pontinhos", "menu escondido" | Menu de mais ações | Ícone ellipsis-vertical; agrupa ações secundárias. |
| "uma lista que abre", "dropdown", "caixa de opções" | Select (escolher valor) ou Menu (disparar ação) | Digitar e adicionar valores novos → InputTags. |
| "etiqueta", "selo", "tag de status" | Badge | Status sempre como badge semântico (cor = significado). |
| "caixinha de marcar" / "liga-desliga" | Checkbox / Switch | Checkbox seleciona itens; Switch liga/desliga um estado. |
| "a barra de cima" | Header (global) ou Subheader (da tela) | Header = navegação do produto; Subheader = título + CTA da tela. |
| "abas", "guias" | Tabs | Trocam o conteúdo abaixo sem sair da tela. |
| "caixa pra escrever", "campo de texto" | Input (uma linha) ou Textarea (texto longo) | — |
| "passo a passo", "etapas", "tela de progresso" | Stepper (indicador) / Wizard (fluxo) / Phases (rail de documento) | — |
| "tabelinha", "grade de dados" | Table | Colunas configuráveis, status como badge, ações em menu de mais ações. |
| "cartão", "quadradinho", "bloco" | Card | Cada bloco de dashboard/listagem é um Card. |
| "barra de busca", "a lupa", "buscar em tudo" | Campo de busca ou Command Palette (busca/ações global) | — |
| "bolinha girando", "esqueleto carregando" | loading / Skeleton | Skeleton = placeholder do conteúdo enquanto carrega. |
Estrutura de tela
| Termo | O que é |
|---|---|
| Header | Barra de navegação global do produto (topo). No mobile vira uma barra compacta (menu + busca + avatar) no topo e a navegação migra para a NavBar no rodapé. |
| NavBar | Navegação no rodapé em telas pequenas — até 4 itens (ícone + rótulo, ativo com indicador) + "Mais" no fim. É o que o Header vira no mobile. |
| Transversais | Serviços do header que abrem como painel lateral (não navegam): Genius, Chat (mensagens), Carrinho. Ao expandir, ocupam a tela inteira. |
| Subheader | Faixa no topo do conteúdo com o título/CTA primário e ações que impactam a tela toda (fica sticky no scroll). |
| Filter Bar | Barra de filtros persistente abaixo do Subheader — critérios (campo · operador · valor) que filtram a área de dados. |
| Filtros rápidos (select) | Chips-select no início da Filter Bar ("Todos processos ▾", "Todo período ▾") — escolha rápida, sem montar critério. |
| Filter Search | Busca/ações global por overlay (Command Palette) — diferente da Filter Bar (persistente). |
| Área de dados | Região principal da index — tabela, cards ou lista (na lista, cada registro é um Forehead empilhado). |
| Faceta | Filtro por dimensão na sidebar (não na Filter Bar): checkbox com contagem, faixas (sliders) ou árvore (pasta País › Estado › Cidade que abre em checkboxes). Listas longas truncam com "Ver mais". |
| Segmento | Faceta de categoria/ramo do fornecedor (ex.: "Ferramentas e máquinas") — checkbox com contagem, na sidebar de Fornecedores ME. |
| Switcher de contexto | Alternância no topo da sidebar entre dois universos que trocam os filtros (ex.: Meus fornecedores ↔ Fornecedores ME, Meu catálogo ↔ Marketplace) — não é um filtro adicional. |
| Forehead | Cabeçalho de um registro — identidade (badge/imagem), título, status e ações. Variações por tipo: documento (transação), produto (com área de carrinho) e fornecedor (logo, contatos, "Visível para o marketplace"). |
| Chassi | O esqueleto de um gabarito: as zonas + a ordem que não mudam entre instâncias (o gabarito = chassi + componentes + o prompt pronto). |
| Campo | Unidade de um formulário — rótulo + controle (input/select/checkbox) + texto de ajuda/erro. |
| Rodapé de ações | Faixa final do formulário com as ações — "Cancelar" (secundário) e "Salvar" (primário). |
No código, essas zonas vêm de blocks prontos do EletroDS — não remonte o que já existe: Header, Subheader, Layout (shell), TableView / CardView / ListView (área de dados por view) e Preview. Os componentes individuais são
Me* (MeForehead, MeButtonBar, MeCriterionInput, MeInput, MeNavBar…); o que não houver no EletroDS cai para Nuxt UI (U*).Ações
| Termo | O que é |
|---|---|
| CTA primário | Ação principal da tela — botão sólido, cor primária, no Subheader/Forehead. No mobile vira FAB. |
| FAB | Botão de ação flutuante (canto inferior direito) — no mobile o CTA primário vira FAB, fixo acima da NavBar. |
| Menu de mais ações | Menu (ícone ellipsis-vertical) com as ações secundárias de um item/linha. |
| Ações em massa | Modo ativado pela seleção — badge "{N} selecionados" na Filter Bar que desabilita os filtros. |
| Desfazer | Feedback reversível de uma ação destrutiva (toast com "Desfazer"), em vez de modal. |
| Validação inline | Erro mostrado no próprio campo, abaixo do controle, ao sair dele ou ao submeter. |
Comportamento completo: Ações do usuário.
Labeling
| Convenção | Regra |
|---|---|
| "Novo X" | Cadastro de uma entidade nova (ex.: "Novo fornecedor"). |
| "Adicionar X" | Inserir um item existente numa lista/coleção (ex.: "Adicionar item"). |
| PT-BR, sentence case | Rótulos em português, só a primeira letra maiúscula — nunca UPPERCASE. PT-BR é a voz padrão; o ME é multilíngue (ver i18n). |
| Verbo no infinitivo | Ações como "Editar", "Excluir", "Filtrar" — não "Editando" nem "Edição". |
| Idioma por campo (i18n) | Conteúdo respondido em idiomas diferentes (ex.: perguntas de cotação). Troca de idioma do usuário via LocalePicker/setupI18n do EletroDS — ver Voz e conteúdo › Idioma e i18n. |
Status, tipos e valores
Status — sempre como badge semântico (cor nunca sozinha: combine com o rótulo). Mapa canônico:
| Status | Tom | Uso |
|---|---|---|
| Pendente · Em análise · Aguardando | warning | aguardando ação/decisão |
| Em andamento | info | em processamento |
| Aprovado · Concluído | success | finalizado com êxito |
| Rascunho | neutral | não enviado / em edição |
| Recusado · Cancelado | error | encerrado sem êxito |
O rótulo do badge é curto (1–2 palavras); o detalhe vai na descrição/tooltip, não no rótulo.
Tipos de documento (transações): Requisição · Cotação · Pré-Pedido · Pedido · Contrato · Leilão. Cotação e Leilão são documentos de processo (têm rail de Fases à esquerda); os demais são simples (full-page direta). Fichas de entidade — Fornecedor e Produto — também são documentos, mas com template dedicado (forehead + abas ancoradas + seções), sem o padrão de "locais" (Entrega/Faturamento/Cobrança).
Formato de valor monetário: total/financeiro usa R$ 1.234,56 (R$ + milhar com ponto, decimais com vírgula); preço unitário / de lista usa BRL 38,90.
Fluxo (Compositor)
| Termo | O que é |
|---|---|
| Fluxo | Sequência ordenada de telas que compartilham contexto, montada no Compositor. A ordem da tira de telas é o fluxo. |
| Tira de telas | O seletor de telas do Compositor quando "Habilitar fluxo" está ligado — adicione, arraste para reordenar, remova. |
| Gatilho (transição) | O que abre a próxima tela (ex.: clicar em "Novo documento", abrir um registro). Definido no conector entre os cards; entra no prompt do fluxo. |
| Alvo (stack) | A camada de implementação: EletroDS + Nuxt (default) ou shadcn/React. Muda só a camada de componentes — anatomia, convenções e voz do ME são as mesmas. Um fluxo é todo de um alvo só. |
Kit e ferramentas
| Termo | O que é |
|---|---|
| Prompt Builder | O kit inteiro de vibe-coding (esta seção): o Compositor, os Modelos de prompt, os Gabaritos, o Glossário e os Downloads. |
| Compositor | A ferramenta interativa (abrir): você descreve a tela com suas palavras e ela monta o prompt + um preview 1:1. |
| Gabarito | Uma tela-base do ME: anatomia (zonas + ordem) + componentes + o prompt pronto para gerá-la. Partir de um gabarito = partir do padrão, não da página em branco. |
| Bundle E-PROC | O pacote de Downloads com as skills do guide + os MDs de contexto, num instalador só (para Claude Code / Cursor). |
| MCP | Model Context Protocol — conecta o editor de IA aos dados reais dos componentes (props/slots) do EletroDS, para a IA não inventar a API. |
| Skill / Plugin | Skill = pacote de instrução que a IA passa a seguir (o padrão do ME). Plugin = o instalador que empacota skills + configs num passo só. |
Esse vocabulário é o mesmo dos Padrões e Componentes — o glossário só o reúne para uso em prompts. As regras de como escrever (voz, mensagens, nomenclatura) ficam em Voz e conteúdo.