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.

Com o MCP configurado abaixo, consulte get_component para recuperar as orientações e get_acceptance_criteria para obter os cenários de aceite. O pacote fornece documentação; os componentes devem ser implementados no seu projeto.

Documente as decisões no Figma

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. Crie uma página de orientações no Figma. Registre os comportamentos esperados, estados, foco, operação por teclado e adaptações feitas no 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.
4. Use um assistente, se desejar. Configure o MCP local conforme as instruções abaixo e leve as orientações obtidas para o Figma. Para o assistente também ler seu arquivo de design, é necessária uma integração separada com o Figma.

Instrução sugerida: “Antes de propor ou revisar os comportamentos deste componente, consulte o MCP Magoo. Considere teclado, foco, estados e critérios de aceite. Informe a versão e diferencie as orientações da biblioteca das adaptações do projeto. Se não conseguir consultar o Magoo, informe essa limitação.”

Conexão direta no Figma: conectores personalizados do agente do Figma e do Figma Make exigem um servidor MCP remoto por URL. O Magoo atual usa npx/STDIO local e ainda não oferece esse endereço. Registrar uma instrução no arquivo não ativa uma conexão automaticamente.

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.”