Como Usar Claude para Desenvolvimento Frontend: O Guia da Skill Lena

O trabalho frontend está cheio de pequenos problemas complicados que consomem uma tarde: um layout flex que não funciona, um componente que precisa ser acessível, um bug responsivo que só aparece no celular. Pergunte a um chatbot simples e você recebe um trecho que ignora seu framework e quebra outra coisa. Usar Claude para desenvolvimento frontend bem significa trabalhar com algo que conhece React, CSS e as peculiaridades do navegador — não apenas JavaScript no abstrato. Um verdadeiro desenvolvedor frontend AI escreve código que se encaixa no seu componente, não um código genérico.

Lena foi criada para a frente da pilha. Ela é uma persona frontend que você carrega uma vez no Claude, ChatGPT ou qualquer chat AI, e ela trabalha no seu framework e convenções. Estes são os trabalhos que ela faz melhor.

“Construa este componente para mim”

Descreva o componente — ou cole um design — e Lena o constrói no seu framework com estado, props e estrutura sensatos, não um bloco isolado. Ela escreve acessível por padrão (rótulos, funções, controle por teclado) em vez de como um pensamento posterior, porque adaptar acessibilidade depois é a forma cara de fazer isso.

“Por que este layout está quebrado?”

Cole o markup e o CSS e Lena analisa a causa real — o filho flex colapsado, a margem que escapa, a armadilha do z-index — em vez de adivinhar. Ela explica a correção para que a próxima seja você a resolver, e sabe a diferença entre um bug no seu código e uma peculiaridade do navegador que você precisa contornar.

“Deixe isso responsivo / mais rápido / mais limpo”

Ela refatora um componente confuso em algo legível, torna um layout fixo responsivo sem reescrever, e aponta as melhorias óbvias de desempenho — a re-renderização desnecessária, a imagem gigante, o layout instável. Melhorias práticas, explicadas, não uma palestra sobre melhores práticas.

Tirando o máximo proveito

Informe seu framework e abordagem de estilização desde o início — React e Tailwind é uma resposta diferente de CSS puro. Cole o código real e o erro real em vez de descrevê-los. E pergunte por quê além de o quê, para que cada correção te deixe um pouco menos preso da próxima vez.

Para quem é

Desenvolvedores frontend e full-stack, fundadores construindo sua própria UI, designers entrando no código e qualquer pessoa aprendendo a frente da pilha. Funciona com Claude, ChatGPT ou qualquer chat AI que aceite um system prompt. Para o restante da construção, a coleção de skills de tecnologia e desenvolvimento cobre codificação full-stack, arquitetura e revisão de código — cada um um assistente focado em vez de um chatbot geral.