Quem contrata um desenvolvedor frontend quer alguém que transforme um protótipo em interface rápida, acessível e estável em qualquer navegador, e que trabalhe com design e backend sem travar a entrega. O currículo precisa provar isso com produto no ar: qual interface, com qual framework, para quantos usuários e com que efeito em performance, conversão ou acessibilidade.
A maioria dos currículos do cargo lista frameworks e omite o resultado. "Desenvolvimento de telas em React" não diz se a tela carregava em um segundo ou em cinco. Este guia mostra o que o recrutador técnico procura, quais termos as vagas filtram, como escrever tópicos com métrica e como fica um exemplo completo dentro da área de tecnologia.
Neste guia
O que pesa no currículo de desenvolvedor frontend
A experiência precisa responder três perguntas em cada cargo: que produto era (e-commerce, SaaS, portal, sistema interno), qual a stack (framework, linguagem, ferramenta de build, testes) e o que mudou em métricas de interface: Core Web Vitals, taxa de conversão, violações de acessibilidade corrigidas, tempo de desenvolvimento de novas telas.
O portfólio pesa mais do que em qualquer outro cargo de desenvolvimento. Um link para produto em produção, um site pessoal bem construído ou um repositório com componentes documentados diz mais do que qualquer adjetivo. Recrutadores costumam abrir o link antes de ler a experiência; se a página demora ou quebra no celular, a candidatura acaba ali.
A seção de habilidades deve separar linguagens (JavaScript, TypeScript), frameworks (React, Vue, Angular), estilo (CSS, Tailwind, styled-components) e ferramentas (Vite, Jest, Cypress, Storybook, Figma). Formação em Ciência da Computação ou tecnólogo em Análise e Desenvolvimento de Sistemas ajuda, mas muitas vagas de frontend são preenchidas por perfis de outras origens com portfólio sólido.
Palavras-chave que as vagas buscam
Os termos mais frequentes nas vagas de frontend no Brasil:
- React e Next.js
- TypeScript
- Vue.js ou Angular
- HTML semântico e CSS moderno (Flexbox, Grid)
- Tailwind CSS, styled-components ou Sass
- Design system e Storybook
- Consumo de APIs REST e GraphQL
- Gerenciamento de estado (Redux, Zustand, Context)
- Testes (Jest, Testing Library, Cypress, Playwright)
- Acessibilidade (WCAG, ARIA)
- Performance web e Core Web Vitals
- SSR e SSG
- Vite ou Webpack
- Figma
- Git e CI/CD
Esses termos rendem mais nos tópicos de experiência, onde ganham contexto, e repetidos na seção de habilidades com a grafia exata da vaga. Antes de enviar, a ferramenta para adaptar o currículo à vaga mostra quais termos do anúncio ainda não aparecem no documento.
Descrições de experiência que funcionam
O recrutador técnico procura o efeito da tela, não a tela. Os pares abaixo mostram a diferença:
| Assim não | Assim sim |
|---|---|
| Desenvolvimento de telas em React | Reconstruí o fluxo de checkout em React e TypeScript (2,1 milhões de acessos mensais) e elevei a conversão de 2,9% para 3,6% |
| Melhorias de performance | Reduzi o LCP da página de produto de 4,2 s para 1,7 s com carregamento sob demanda e otimização de imagens, subindo a nota do Lighthouse de 54 para 92 |
| Criação de componentes reutilizáveis | Criei o design system em Storybook com 64 componentes, adotado por 4 squads, que reduziu em 35% o tempo de desenvolvimento de novas telas |
| Garantia de acessibilidade | Adequei o portal do cliente aos critérios WCAG 2.1 AA e eliminei 140 violações apontadas em auditoria |
| Implementação de testes | Implementei testes E2E com Cypress em 30 fluxos críticos e reduzi as regressões em produção de 6 para 1 por mês |
| Integração com backend | Migrei o consumo de dados para GraphQL com cache no Apollo e cortei 45% das requisições da tela inicial |
Júnior vs. sênior
Um desenvolvedor frontend júnior mostra o que construiu: um site pessoal, um projeto de curso publicado com deploy, clones de interfaces conhecidas com código limpo. O que se avalia é domínio de HTML, CSS e JavaScript antes do framework, além de atenção a detalhes visuais. O link do portfólio vai no cabeçalho, e a seção de projetos pode ficar acima da experiência quando esta ainda é curta, como no guia de currículo sem experiência.
No sênior, o currículo mostra decisões: arquitetura do frontend (monorepo, micro frontends, SSR), design system mantido por outras equipes, padrões de performance e acessibilidade definidos para a empresa, mentoria de outros desenvolvedores e participação em contratações. As métricas passam da tela para o produto: conversão, retenção, tempo de entrega das equipes que usam o que se construiu.
Portfólio com três projetos bem acabados e responsivos vale mais do que dez inacabados. Antes de enviar, convém testar cada link no celular.
Erros frequentes neste cargo
Os currículos de frontend costumam falhar em detalhes que o recrutador técnico enxerga de imediato:
- Portfólio quebrado ou lento. Link para site fora do ar, projeto que não abre no celular ou repositório sem README anulam o resto do currículo.
- Listar frameworks sem resultado. "React, Vue, Angular, Svelte" sem nenhum tópico com métrica soa como lista de cursos.
- Ignorar acessibilidade e performance. As vagas mais exigentes filtram por WCAG e Core Web Vitals; um currículo que não menciona nenhum dos dois parece incompleto.
- Currículo em duas colunas com ícones. A tentação de "mostrar design" costuma produzir um documento que o ATS lê fora de ordem. Um modelo de currículo sóbrio com bom espaçamento comunica critério visual sem esse risco.
- Omitir testes. Nenhuma menção a Jest, Cypress ou Testing Library sugere código sem rede de proteção.
- Confundir frontend com design. Descrever o Figma como habilidade principal em vaga de desenvolvimento desloca o perfil para outro cargo.
Exemplo de currículo de desenvolvedor frontend
O exemplo abaixo aplica as recomendações a um perfil pleno, em uma página. Nome e empresas são fictícios.
Desenvolvedora frontend pleno em produto digital, com foco em performance, acessibilidade e design system.
Desenvolvedora frontend com 4 anos em e-commerce e agência, especializada em React, Next.js e TypeScript. Experiência com design systems usados por várias equipes, otimização de Core Web Vitals e adequação a WCAG. Trabalho próximo de design e backend em squads ágeis.
Desenvolvedora frontend pleno, Terra Viva Marketplace, Florianópolis. 2023 - atual
- Reconstruí o fluxo de checkout em Next.js e TypeScript (2,1 milhões de acessos mensais) e elevei a conversão de 2,9% para 3,6%.
- Reduzi o LCP da página de produto de 4,2 s para 1,7 s, subindo a nota do Lighthouse de 54 para 92.
- Criei o design system em Storybook com 64 componentes, adotado por 4 squads, com redução de 35% no tempo de desenvolvimento de novas telas.
Desenvolvedora frontend júnior, Prisma Digital (agência), Florianópolis. 2021 - 2023
- Desenvolvi 18 sites institucionais e landing pages em React e Vue com média de 95 pontos de performance no Lighthouse.
- Adequei o portal de um cliente do setor público aos critérios WCAG 2.1 AA, eliminando 140 violações apontadas em auditoria.
- Implementei testes E2E com Cypress nos fluxos de formulário e reduzi as regressões pós-deploy de 6 para 1 por mês.
Tecnólogo em Análise e Desenvolvimento de Sistemas, IFSC, 2021.
React, Next.js, TypeScript, Vue.js, HTML, CSS, Tailwind, Storybook, Jest, Testing Library, Cypress, GraphQL, Vite, Figma, Git. Inglês intermediário (leitura técnica fluente).
Perguntas frequentes
O currículo de frontend precisa de portfólio?
Na prática, sim. Um link para produto em produção, um site pessoal bem construído ou um repositório com componentes documentados é o primeiro lugar que o recrutador técnico abre. Sem isso, a experiência precisa compensar com métricas de performance e conversão.
Quais métricas colocar no currículo de desenvolvedor frontend?
As que o cargo controla: Core Web Vitals (LCP, CLS, INP), nota do Lighthouse, taxa de conversão de fluxos específicos, violações de acessibilidade corrigidas, tempo de desenvolvimento de novas telas com um design system, regressões evitadas por testes.
Um currículo de frontend pode ter design mais elaborado?
Pode ter bom espaçamento, hierarquia clara e uma cor de destaque discreta, mas em uma coluna e sem texto em imagem. Colunas, ícones e barras de nível atrapalham a leitura automática e não demonstram critério visual melhor do que um documento limpo.
Como listar frameworks conhecidos mas não usados em produção?
Em uma linha separada, com a indicação "estudo" ou "projetos pessoais", nunca misturados com os usados profissionalmente. A entrevista técnica costuma perguntar sobre qualquer item da lista, e a diferença aparece rápido.