DEV Community

Cover image for Criei habilidades reutilizáveis do Claude Code para lançar sites mais rápido
Matt Senter
Matt Senter

Posted on Originally published at mattsenter.com

Criei habilidades reutilizáveis do Claude Code para lançar sites mais rápido

A maioria dos sites gerados por IA não fracassa porque a home ficou feia. Fracassa porque todos os detalhes chatos de produção são pulados.

Coisas como:

  • metadados de SEO
  • pré-renderização
  • analytics
  • imagens de compartilhamento social
  • cabeçalhos CSP
  • otimização de Lighthouse
  • acabamento no mobile
  • geração de sitemap
  • robots.txt
  • configuração de deploy
  • IndexNow
  • cache
  • preparo do ambiente

Os componentes React em si costumam ser hoje a parte fácil.

O que ainda atrasa tudo é a infraestrutura operacional.

Depois de fazer alguns projetos assistidos por IA com o Claude Code, percebi que estava resolvendo os mesmos problemas repetidamente. Não só visualmente, mas operacionalmente.

Então, em vez de escrever prompts maiores, comecei a construir skills reutilizáveis do Claude Code.

O resultado virou um repositório open source de fluxos voltados à produção: senternet-site-skills no GitHub. O repositório contém skills reutilizáveis focadas em produção para SEO, pré-renderização, otimização mobile, compartilhamento social, configuração de CSP, ajuste de Lighthouse, instalação de analytics, fluxos de deploy e mais.

O problema do «vibe coding»

Eu gosto de desenvolvimento assistido por IA. Bastante.

O Claude Code é incrivelmente poderoso para iteração rápida, geração de frontend, reestruturação de layouts, escrita de código utilitário, integração de APIs e montagem de conteúdo.

Mas depois que a empolgação inicial passa, um padrão aparece: a IA gera páginas mais rápido do que você consegue operacionalizá-las.

Você acaba gastando uma quantidade enorme de tempo consertando:

  • problemas de SEO
  • inconsistências de deploy
  • metadados quebrados
  • comportamento ruim no mobile
  • analytics ausente
  • regressões de performance
  • problemas de prévia social
  • configuração de produção incompleta

E, ironicamente, essas costumam ser as tarefas menos empolgantes para um humano repetir na mão. Isso as tornava candidatas perfeitas a skills reutilizáveis.

De prompts gigantes a fluxos reutilizáveis

No começo tentei resolver isso com prompts cada vez maiores. Coisas assim:

«Por favor, garanta que esta página seja responsiva, otimizada para SEO, use pré-renderização, tenha metadados corretos, suporte a compartilhamento social, cabeçalhos CSP, integração de analytics e configurações de deploy seguras para produção…»

Essa abordagem virou pouco confiável rapidamente.

O Claude focava pesado numa instrução enquanto ignorava outra em silêncio. Às vezes implementava funcionalidades pela metade. Outras vezes quebrava algo que funcionava enquanto tentava «ajudar».

A virada veio quando parei de tratar prompts como conversas e passei a tratá-los como infraestrutura.

Em vez de prompts gigantes, criei skills reutilizáveis e focadas:

  • senternet-site-metatags
  • senternet-site-prerender
  • senternet-site-mobile-optimize
  • senternet-site-share-images
  • senternet-site-csp
  • senternet-site-lighthouse
  • senternet-site-indexnow
  • senternet-site-firebase

Cada skill tinha responsabilidades estreitas, expectativas determinísticas, guarda-corpos operacionais e lógica de implementação reutilizável. Os resultados ficaram drasticamente mais estáveis.

A ideia mais importante: consistência operacional

A IA é surpreendentemente boa em gerar componentes. É bem pior em manter infraestrutura de produção de forma consistente entre vários projetos.

Humanos lembram naturalmente de coisas como:

  • «Colocamos as tags OpenGraph?»
  • «Estamos pré-renderizando esta rota?»
  • «Configuramos o robots.txt?»
  • «Essa imagem social vai cortar direito?»
  • «As notas do Lighthouse continuam aceitáveis?»
  • «O analytics entrou no layout de produção?»

A IA costuma esquecer esses detalhes por completo, a menos que seja explicitamente guiada. É aí que skills reutilizáveis ficam poderosas. Em vez de depender de memória ou de prompts repetidos, os padrões operacionais ficam codificados em fluxos reutilizáveis.

O objetivo não era automação total. Era reduzir o trabalho esquecido.

O conceito de «uber skill»

Um dos padrões mais úteis acabou sendo o que passei a chamar de «uber-skills». Em vez de tratar uma única tarefa isolada, esses fluxos orquestram vários passos de configuração juntos. Por exemplo:

  • detectar o que já está configurado
  • pular o que já foi feito
  • identificar funcionalidades de produção que faltam
  • aplicar apenas melhorias incrementais
  • evitar reescritas destrutivas

Esse último ponto ficou especialmente importante. Um dos maiores modos de falha das ferramentas de código com IA é pedir uma mudança e receber uma refatoração acidental do projeto inteiro. As skills ajudaram a conter bastante esse comportamento.

O que de fato melhorou

Os maiores ganhos não foram escrever código mais rápido, gerar componentes mais bonitos ou digitar menos. Os maiores ganhos foram:

  • menos regressões
  • menos detalhes de deploy esquecidos
  • menos erros de SEO
  • menos tarefas repetitivas de configuração
  • prontidão para produção mais consistente
  • menos fadiga de decisão

Em outras palavras: a IA ficou mais útil quando o fluxo de trabalho ficou mais estruturado.

Uso no mundo real

Esses fluxos acabaram virando parte do processo de produção de projetos como:

Os dois projetos se beneficiaram de aplicar repetidamente os mesmos padrões operacionais: tratamento de metadados, otimização mobile, fluxos de imagem de compartilhamento, estrutura de SEO, consistência de deploy e otimização de performance. Sem skills reutilizáveis, eu me via resolvendo os mesmos problemas de infraestrutura em cada projeto.

Onde o desenvolvimento assistido por IA ainda tropeça

Mesmo com skills reutilizáveis, há limitações claras. O Claude Code ainda pode:

  • refatorar demais código que funcionava
  • alucinar decisões de arquitetura
  • quebrar layouts responsivos
  • inventar abstrações desnecessárias
  • aplicar instruções pela metade
  • deixar passar inconsistências sutis de UX

O acabamento de frontend ainda exige julgamento humano, e muito. Mas fluxos estruturados reduzem drasticamente o caos.

Minha visão atual

Penso cada vez mais que o futuro do desenvolvimento assistido por IA parece menos com escrever prompts e mais com engenharia operacional. Quem tirar os melhores resultados provavelmente não vai ser quem escreve os prompts mais longos, remove todas as restrições ou persegue agentes totalmente autônomos.

Vai ser quem constrói fluxos reutilizáveis, sistemas restritos, ferramentas combináveis, infraestrutura determinística e guarda-corpos operacionais. A alavancagem real vem de codificar consistência. Não apenas de gerar código.

Considerações finais

Ferramentas de código com IA já são extremamente capazes. Mas ainda há uma diferença enorme entre gerar uma demo e entregar repetidamente sites prontos para produção.

Para mim, skills reutilizáveis do Claude Code viraram um jeito de fechar essa distância. Não substituindo a disciplina de engenharia, mas tornando mais fácil aplicá-la de forma consistente.

Top comments (0)