frontend-patterns

frontend-patterns é a referência do agente pras decisões de arquitetura de uma UI baseada em componentes — como compor componentes, onde o estado deve viver, como buscar dados, como estilizar, e como impedir que a acessibilidade vire um detalhe de última hora — de forma consistente entre React, Next.js e Vue.

O que resolve

Codebases de front-end apodrecem de jeitos característicos: dado de servidor empurrado pra estado local e re-sincronizado à mão, um componente que sabe de tudo, styling feito de cinco jeitos, acessibilidade colada no fim (ou nunca). Cada um é uma pequena decisão tomada isolada; juntas, fazem uma UI difícil de mudar e que exclui usuários reais. A skill transforma essas decisões espalhadas num default compartilhado.

Como resolve

Codifica as decisões recorrentes com árvores de decisão:

• Composição de componentes — peças pequenas e componíveis em vez de prop-drilling profundo ou god components.
• Estado vs. cache de servidor — estado local no escopo mais estreito; dado de servidor pertence a um cache (camada de query), não copiado pro estado do componente.
• Data fetching — um padrão consistente pra estados de loading, erro e vazio em vez de tratamento ad-hoc por tela.
• Convenções de styling — um jeito de estilizar, não cinco.
• Acessibilidade de primeira classe — roles semânticas e suporte a teclado/leitor de tela como parte de construir o componente, não um polimento.

Quando usar

Projetando ou revisando um componente, tela ou feature de front-end. Faz par com a role frontend-developer e com test-component / test-e2e — os padrões construídos aqui são exatamente o que esses testes verificam.