Sua biblioteca
pré-design system

Da referência à implementação

1. Registre a referência. Na documentação de cada componente, inclua o link da página correspondente no Magoo, o nome do autor, a versão consultada e a data de consulta. Use a URL pública do material, evitando endereços de prévia local.
2. Mapeie os comportamentos. Relacione as orientações às variantes, aos estados e às ações do seu componente. Documente a operação por teclado, o gerenciamento de foco e os retornos esperados para cada interação.
3. Adapte ao seu contexto. Use o comportamento como referência para sua implementação, independentemente do framework. Aplique os tokens e estilos do seu sistema e registre diferenças de comportamento, justificativas e instruções de uso.
4. Defina critérios verificáveis. Transforme os cenários em critérios de aceite no formato Dado, Quando e Então. Vincule esses critérios aos testes e ao componente documentado, por exemplo, no Storybook ou em uma página de documentação.
5. Valide e acompanhe as revisões. Teste a implementação com teclado, leitores de tela, toque e ampliação. Registre resultados e reavalie as adaptações quando a referência ou o componente mudar. A referência, por si só, não comprova a acessibilidade da implementação.

Documente as decisões de design

1. Escolha o componente no Magoo. Leia o design de interação, os métodos de interação e os pontos de atenção antes de desenhar os estados.
2. Registre as decisões no design system. Documente os estados, a navegação por teclado, o foco e as adaptações necessárias para seu projeto.
3. Inclua a referência. Informe o link do componente, a versão consultada e a data na documentação do seu design system.

Transforme orientações em verificações

1. Consulte os cenários Gherkin. Identifique as condições iniciais, as ações e os resultados esperados de cada componente.
2. Adapte os casos ao produto. Cubra estados, erros, navegação por teclado, foco, leitores de tela, toque e ampliação.
3. Registre evidências. Associe cada resultado à versão do componente, ao ambiente testado e ao critério de aceite.
4. Revise com a equipe. Documente divergências e repita os testes após correções ou mudanças de comportamento.

Exemplo de pedido ao assistente conectado: “Consulte os critérios de aceite de Modal no MCP Magoo. Organize uma lista de testes manuais, mantendo a versão e separando os cenários originais dos casos adicionais sugeridos.”

Consultar o MCP não executa testes nem comprova a acessibilidade da implementação.

Alinhe escopo e critérios de aceite

1. Identifique os componentes da entrega. Use o catálogo para discutir o comportamento esperado com design, desenvolvimento e testes.
2. Inclua critérios nas tarefas. Registre as interações e os resultados verificáveis antes de iniciar a implementação.
3. Documente as decisões. Explique adaptações de comportamento e as instruções necessárias para que as pessoas compreendam essas mudanças.
4. Acompanhe a validação. Vincule a entrega às evidências de testes e à versão da referência utilizada.

Exemplo de pedido ao assistente conectado: “Consulte o componente Select no Magoo e ajude a redigir critérios de aceite para esta entrega. Diferencie conteúdo da biblioteca e recomendações específicas para o produto.”