Repository navigation
Agente frontend engineer
Esta página descreve o agente frontend-engineer de forma didática. Se algum termo for novo, consulte o Glossário.
Este agente é o engenheiro de frontend: ele programa a parte visível do software, as telas e os botões com que você interage. (Backend e frontend estão explicados no Glossário.) Ele transforma o desenho de tela em código que funciona de verdade em aparelhos reais, e não só na ferramenta de design.
O Claude Code aciona o engenheiro de frontend quando o trabalho é na interface. Exemplos:
- "Implemente essa tela."
- "Programe esse componente (um pedaço reaproveitável da interface, como um botão ou um menu)."
- "Ajuste o CSS" (a linguagem que define cores, tamanhos e posições na tela).
- "Deixe responsivo" (que se adapta a celular, tablet e computador).
- "A tela está lenta no navegador."
- "Esse componente não funciona."
- Traduz o desenho de tela em código de produção, fiel ao que foi planejado.
- Garante responsividade: a tela funciona bem em celular, tablet e computador, começando pelo celular (mobile-first).
- Cuida da performance: que a página carregue rápido e responda sem travar, otimizando imagens e o peso do código enviado.
- Cuida da acessibilidade de verdade no código: que o site funcione com teclado e com leitor de tela (programa que lê a tela em voz alta para quem não enxerga). Usa primeiro os elementos certos do HTML antes de recursos extras.
- Gerencia o estado da tela: o que muda quando você clica, digita ou navega, mantendo tudo em sincronia.
- Integra com o servidor: busca dados da API e trata os três momentos (carregando, sucesso e erro) de forma que a tela nunca trave.
- Escreve testes e depura no navegador real, simulando até aparelhos mais fracos e internet lenta para entender o pior caso.
Funcionar não basta: quando o trabalho cria ou refaz uma tela visível, o agente também pensa no visual antes de programar, para a interface ficar memorável e com personalidade, em vez de genérica (o "cara de IA": fontes padrão, gradiente roxo sobre fundo branco, layout previsível). Esses princípios vêm da skill oficial frontend-design da Anthropic e estão embarcados dentro do próprio agente, porque um agente (subagente) não consegue chamar uma skill sozinho.
Na prática, antes de codar uma interface nova, ele decide em poucas linhas:
- Propósito e público: que problema a tela resolve e para quem.
- Tom: escolhe um estilo e se compromete com ele (minimalista, maximalista, retrô, refinado/luxo, editorial e assim por diante). O que estraga é a indecisão tímida, não a intensidade.
- Diferenciação: a única coisa que a pessoa vai lembrar daquela tela.
- Estética: tipografia com personalidade (não fontes genéricas), paleta de cores coesa, animação com impacto em momentos-chave (sempre respeitando quem prefere menos movimento), composição de layout intencional e fundos com profundidade.
Tudo isso convive com os cuidados de sempre (performance, acessibilidade e responsividade): beleza e funcionamento andam juntos, não são troca.
Cor azul (agente operacional). Família: Engenharia.
-
CONTRACT: o padrão de código e a autoridade do projeto. -
TESTES: a disciplina de testes (TDD) e os níveis de teste. -
ORG: governança e quem decide o que (papéis RACI). -
pipeline_release_1.0: as fases de engenharia do projeto (da 4 à 9).
Você diz: "A tela de cadastro precisa funcionar bem no celular e ser acessível para leitor de tela." O engenheiro de frontend implementa o formulário com os elementos corretos, valida os campos mostrando erros de forma acessível, garante que funciona no toque e no teclado, testa em tela pequena e entrega o código com testes.
Veja também o Engenheiro Backend (a API que ele consome), o Engenheiro Mobile (aplicativos de celular), o Especialista em Acessibilidade (parceiro em acessibilidade) e Caetano (CTO), o C-level da engenharia. Voltar para a Home.