Quase não instalei. Outra habilidade Claude Code de código aberto, outra terça-feira, outro repositório GitHub prometendo que resolveria o problema “AI se parece com AI”. Eu já tinha visto esse filme antes. Então marquei-o e voltei ao envio.
Então executei um comando em meu próprio portfólio.
impeccable critique retornou um número que eu não queria ver: 25 de 40. Sujeira limítrofe de AI. A habilidade apontava para cinco coisas específicas – três delas eram decisões que tomei pessoalmente, defendi em revisões de design e entreguei com confiança. Os outros dois eram padrões preguiçosos que eu nunca havia notado porque vejo o mesmo site todos os dias.
Foi nesse momento que parei de tratar Impeccable como mais uma habilidade do diretório e comecei a tratá-lo como um segundo par de olhos. Na semana seguinte, reconstruí seções de dois projetos com ele, executei a entrevista craft do zero em uma página de destino SaaS falsa e quebrei o modo alfa ao vivo de seis maneiras diferentes. Este post é o relatório honesto. O que funcionou. O que não aconteceu. O que mudei no meu próprio site depois que o placar voltou feio.
Se você envia código front-end com Claude Code em 2026 e já olhou para uma página de destino recém-gerada e pensou "por que isso parece igual a qualquer outra saída AI" - a resposta está nas próximas 4.000 palavras.
O que Impeccable realmente é (sem o giro de marketing)
Retire a cópia do site e a Impeccable Skill Claude Code é uma coisa: uma pasta de arquivos markdown que carrega em seu contexto Claude Code e muda a forma como o modelo pensa sobre o código front-end.
Isso parece chato até você ler o que está na redução.
Vinte e três comandos. Sete arquivos de referência específicos de domínio – tipografia, cor, design espacial, capacidade de resposta, interações, movimento e escrita UX. Uma lista de regras explícitas de "não fazer" inseridas na memória de trabalho do modelo. A coisa toda é instalada com um comando e funciona dentro de Claude Code, Cursor, Gemini CLI e Codex CLI. A partir da v1.5.1 (lançada em 17 de março de 2026, atualmente ao norte de 10.000 estrelas do GitHub), ela cobre a maior parte do pipeline de design de front-end que um construtor solo ou uma pequena equipe de produto tocaria.
O autor é Paul Bakaus. O site que acompanha impeccable.style hospeda galerias before/after, documentos, uma extensão do Chrome e uma CLI autônoma para verificar arquivos fora de um chicote AI. Há infraestrutura de marketing em torno do projeto, mas o valor central reside na habilidade em si. Se você apenas instalar a habilidade e ignorar todo o resto, ainda obterá a maior parte dos benefícios.
Aqui está algo que ninguém mais está dizendo claramente: essa habilidade é fundamentalmente uma atualização de vocabulário. A habilidade frontend-design da própria Anthropic (aquela fornecida com Claude Code) fornece ao modelo alguma direção de design. Impeccable vai além ao fornecer palavras. Palavras específicas. "Mais silencioso." "Mais ousado." "Destilar." "Polonês." "Adaptar." Cada um é um comando que o modelo pode executar em um componente, com regras documentadas sobre o que cada palavra significa visualmente.
A maior parte da saída do design AI parece a mesma porque o modelo não possui vocabulário para a direção do design. Ele pode descrever - "use uma fonte de 16px com altura de linha de 1,5" - mas não pode direcionar - "tornar esta seção mais silenciosa para que o CTA chame a atenção". Impeccable instala essa camada de direção. Essa é a verdadeira inovação técnica.
A lista de antipadrões que me deixou quieto por dez minutos
Deixe-me mostrar o que quebrou meu cérebro quando li pela primeira vez os arquivos de habilidades.
Dentro do repositório, há uma lista de regras explícitas "NÃO". Coisas como: não use texto cinza em fundos coloridos. Não use a paleta AI (gradientes ciano sobre escuro, roxo para azul). Não use preto puro ou branco puro sem uma leve coloração. Não carregue três famílias de fontes e envie apenas duas. Não decore com modelos de telefones. Não enterre o CTA principal dentro de um cartão com o mesmo fundo da seção ao redor.
Fiquei sentado lendo e pensei: Enviei cada um desses nos últimos seis meses.
Não porque eu não conheça melhor. Porque quando estou solicitando Claude Code às 23h e digo para "construir uma seção de herói", o modelo me dá como seus dados de treinamento dizem que é uma seção de herói. Os dados de treinamento são da Internet pública. A Internet pública, a partir de 2026, é composta principalmente por Tailwind UI, modelos Vercel e páginas de destino geradas por AI. O centro estatístico dessa distribuição é exatamente a aparência descrita pelos antipadrões do Impeccable.
Antrópico tem um nome para isso – convergência distributiva. Os modelos reproduzem o centro estatístico das decisões de projeto porque foram treinados no centro estatístico das decisões de projeto. A contribuição do Impeccable não é tornar o modelo “mais inteligente”. É que isso tira o modelo do centro, injetando restrições opinativas com as quais nenhum comitê de design da Internet pública jamais concordou.
Essa é uma contribuição mais importante do que parece. A maioria das ferramentas "anti-slop" tenta detectar resultados ruins após o fato. Impeccable evita que a saída aconteça, dando ao modelo uma distribuição de referência diferente. É a diferença entre editar um rascunho e alterar o que foi redigido.
Apresentarei os sete pilares do design em um momento, mas quero deixar uma bandeira aqui: a lista de antipadrões por si só já vale a pena instalar a habilidade. Mesmo que você nunca use um único comando, ter essas regras em seu contexto Claude Code mudará de forma mensurável o que o modelo envia.
Os sete pilares (e por que importam mais que os comandos)
Os 23 comandos recebem a maior parte da pressão, mas a estrutura de suporte da habilidade são os sete arquivos de referência. Cada um deles é um mergulho profundo em um único domínio de design, e Claude extrai deles sempre que toca nessa área do código.
Tipografia. Não "use Inter" — regras reais. Dimensionamento óptico em pontos de interrupção. A relação entre a altura da linha do corpo e o espaçamento do parágrafo ao redor. Quando usar fontes de exibição versus quando aumentar a fonte do corpo. As anti-referências da habilidade chamam explicitamente o uso excessivo do Inter, o que apreciei porque fui culpado disso em três dos meus quatro projetos.
Cor. É aqui que a maior parte da saída AI se afoga. O arquivo de referência busca moderação, disciplina de sotaque e tons neutros sobre preto puro e branco puro. Há uma seção específica sobre o que a habilidade chama de “decoration discipline” – cor usada para hierarquia, não para entusiasmo. Depois de executar isso em meu site, removi dois planos de fundo gradientes e a página ficou muito mais confiante.
Design Espacial. Preenchimento, margens e ritmo entre seções. O arquivo de referência é opinativo sobre o ritmo vertical consistente entre os pontos de interrupção - algo que os layouts gerados pelo AI quase nunca acertam porque os dados de treinamento estão cheios de espaçamentos inconsistentes.
Responsividade. Regras específicas sobre como os layouts devem mudar, e não apenas redimensionar, entre pontos de interrupção. Este é um dos pilares onde a saída do Impeccable difere visivelmente da geração padrão do Claude Code.
Interações. Estados de foco, anéis de foco e o que a habilidade chama de "superfícies com estado". Há uma regra silenciosa, mas importante, sobre os estados de foco que precisam fazer algo significativo, e não apenas escurecer um pouco. Depois de lê-lo, acessei meu próprio site e percebi que sete dos meus botões tinham estados de foco que basicamente não faziam nada.
Movimento. Um arquivo de referência com opiniões fortes sobre curvas de atenuação, faixas de duração e quando o movimento é apropriado. As chamadas antipadrão são nítidas aqui - atenuação de salto em produtos sérios, paralaxe em páginas de conteúdo denso e animação que existe por si só.
UX Writing. Este me surpreendeu. A habilidade inclui orientação sobre como os rótulos dos botões, mensagens de erro e títulos devem soar. Não apenas gramática – voz. Há uma regra sobre como evitar "Clique aqui" e "Saiba mais" como texto do link que enviei para Claude Code como uma regra decoration discipline e agora me recuso a mesclar o código que a viola.
Os pilares são mais importantes do que os comandos porque os comandos são uma forma abreviada de invocar as regras dos pilares. Ao digitar impeccable polish, o modelo lê os pilares de tipografia, cor, espaço e interações de uma só vez e os aplica ao componente selecionado. Sem os pilares, os comandos seriam apenas verbos.
O fluxo de trabalho Greenfield — Executando impeccable craft do zero
Testei isso em um produto SaaS falso chamado Lighthouse – uma ferramenta de agregação de feedback do cliente. Novo repositório, nova sessão Claude Code, sem contexto de design anterior. Eu queria ver o que impeccable craft faria sem qualquer entrada anterior moldando a saída.
O comando dá início a uma entrevista. Cerca de 13 perguntas, dependendo de como você responde às ramificações. A estrutura da entrevista é a parte sobre a qual ninguém fala, então deixe-me explicar o que realmente pergunta:
- Tipo de produto. UI do aplicativo, site de marketing, painel, editorial. A resposta determina se a habilidade é executada no modo “marca” (o design É o produto) ou no modo “produto” (o design SERVE ao produto). 2. Público. Quem usará isso. Não “todos” – uma pessoa específica com um trabalho específico e um nível específico de conhecimento em design. 3. Voz e tom. Confiante, brincalhão, contido, técnico. Com subquestões sobre se a voz muda entre diferentes contextos (marketing vs. mensagens de erro, por exemplo). 4. CTA principal. Qual é a ação mais importante que o usuário realiza. A entrevista resiste fortemente a respostas vagas - "inscreva-se" recebe uma continuação de "para quê especificamente".
- Âmbito visual. Claro, escuro ou ambos. Cores da marca, se houver. Preferências de tipografia com avisos explícitos contra escolhas genéricas. 6.
Anti-referências. Como você NÃO quer que seja. Esta foi a pergunta mais inteligente. A habilidade pede que você nomeie três sites concorrentes ou direções estéticas que você deseja evitar ativamente. 7. Dimensões de personalidade. Controles deslizantes ao longo de eixos como "brincalhão ↔ sério", "mínimo ↔ máximo", "suave ↔ nítido". A composição da saída muda com base em onde você pousa.
A entrevista leva entre 5 e 8 minutos se você responder com atenção. No final, a habilidade grava dois arquivos em seu repositório: product.markdown e design.md.
product.markdown carrega a camada estratégica – registro, audiência, voz, anti-referências, princípios de design. O “quem, o quê, por que” do produto. design.md carrega a camada visual – cores, tipografia, elevação, componentes, o que fazer e o que não fazer, formatada na mesma estrutura de seis seções que o Google Stitch popularizou em 2025.
Depois que esses dois arquivos existirem, cada interação futura do Claude Code os lerá como contexto. É aí que a verdadeira alavancagem se acumula. Você não está pedindo que o modelo projete do zero todas as vezes – você está pedindo que ele estenda um sistema que já está documentado.
A demonstração Lighthouse – primeira passagem, depois três variantes
Após a entrevista, pedi ao Claude Code (com a Impeccable Skill carregada e os dois novos arquivos no contexto) para construir uma landing page para Lighthouse. Um aviso. Sem acompanhamentos.
A primeira passagem foi limpa. Não é emocionante - mas limpo. Um herói com um título focado, um único CTA principal acima da dobra, uma grade de recursos silenciosa e uma seção de depoimentos que não chama a atenção. Sem morfismo de vidro. Nenhum gradiente roxo. O Inter não estava em nenhum lugar do arquivo. A fonte era uma exibição serifada combinada com uma sans humanista, ambas escolhas que surgiram das respostas da entrevista sobre voz.
Então executei o segundo comando – impeccable variants – e pedi três direções de layout: editorial, encharcado e brutalista.
A variante editorial parecia um artigo de revista extenso - fotografia sem margens, letras maiúsculas no título, um layout de citação na barra lateral. A variante encharcada fez com que a cor da marca ocupasse 70% do campo visual com letras brancas de alto contraste. A variante brutalista despojou totalmente a decoração – bordas pretas pesadas, estética HTML bruta, tipo de exibição monoespaçada.
O que me surpreendeu não foi que as variantes fossem diferentes. Era que eles eram legivelmente diferentes. As variantes geradas por AI geralmente têm o mesmo design com três paletas de cores diferentes. Na verdade, eles estavam comprometidos com direções estéticas distintas, da mesma forma que um designer sênior se comprometeria ao esboçar opções para um cliente.
A comparação mais próxima que tenho é a geração de variantes do Google Stitch, mas o Stitch opera dentro de sua própria tela. Impeccable gera o mesmo intervalo de direções distintas, mas as envia como código de produção real em seu fluxo de trabalho Claude Code. Essa diferença é importante quando o próximo passo é “enviar” e não “captura de tela”.
Escolhi a variante encharcada para Lighthouse e mudei para o modo ao vivo.
Live Mode — Onde brilha e onde tropeça
impeccable live é o recurso alfa, e o rótulo alfa está funcionando. Deixe-me ser honesto sobre as duas metades.
O brilho primeiro. O modo Live abre uma sessão do navegador, carrega seu servidor de desenvolvimento local e permite selecionar componentes diretamente na saída renderizada. Clique em um herói. Execute bolder. O herói fica visualmente mais pesado – mais peso no tipo, composição mais densa, contraste mais profundo. Clique em quieter. O oposto. Clique em distill. O componente perde o ornamento e se reduz aos seus elementos centrais. Clique em polish. O modelo passa e reduz problemas de espaçamento, alinhamento e pequenos ritmos visuais sem alterar a estrutura.
Existe um modo micro-variations que gera quatro ou cinco pequenas variações do componente selecionado lado a lado. Você aceita a que deseja, rejeita as outras e a variante escolhida é gravada de volta no arquivo. Este loop – selecionar, variar, aceitar – é a coisa mais próxima que usei da iteração de design em tempo real com um parceiro AI. Quando funciona, é genuinamente divertido.
O comando detect executa o scanner antipadrão na página ativa e revela problemas em linha. Na demonstração Lighthouse, ele capturou um cartão de recurso com tamanho de alvo de toque insuficiente no celular, um salto de título de h1 para h3 e um CTA que era tecnicamente clicável, mas visualmente sem ênfase abaixo de um elemento concorrente. Todos os três eram problemas reais. Nenhum deles teria sido capturado por um linter padrão.
Agora os tropeços. O modo ao vivo é alfa e funciona como tal.
A sessão do navegador ocasionalmente perde a conexão com o processo Claude Code e você precisa reiniciar ambos. A seleção de componentes é complicada em páginas com DOM profundamente aninhado – às vezes você seleciona um elemento wrapper quando deseja o cartão visível. O comando adapt (que deveria traduzir um componente em um registro visual diferente) produziu duas vezes uma saída que quebrou o layout existente, exigindo uma reversão manual. E em uma sessão particularmente longa, aceitar uma variante escreveu a alteração no arquivo errado em um monorepo e perdi cerca de dez minutos na recuperação.
Se você tratar o modo ao vivo como uma ferramenta de esboço funcional - iteração rápida, expectativa de quebra, commit frequente - ele é poderoso. Se você tratá-lo como um recurso acabado, você ficará frustrado. O autor envia correções semanalmente e a trajetória parece correta, mas no final de abril de 2026 ainda está em fase alfa.
A armadilha Mood-Board - por que prompts detalhados superam inspiração visual
Aqui está uma descoberta que eu não esperava. Impeccable aceita entrada de painel de humor - você pode inserir imagens de referência e pedir à habilidade para extrair uma direção visual delas. Testei isso em prompts de texto detalhados no mesmo projeto, duas vezes.
Os prompts de texto detalhados venceram ambas as vezes.
A razão é mecânica. Quando a habilidade ingere um quadro de humor, ela precisa interpretar as imagens e traduzi-las no mesmo vocabulário que o restante da habilidade usa. Essa etapa de interpretação adiciona ruído. Quando você escreve a resposta em palavras – “Quero uma tipografia silenciosa, espaçamento generoso, uma única cor de destaque, sem decoração” – você pula a interpretação e o modelo é executado contra sua intenção direta.
Os painéis de humor ainda funcionam. Eles não são inúteis. Mas as pessoas que obtêm o melhor resultado com essa habilidade são aquelas que conseguem descrever o que desejam em palavras. Se o seu vocabulário de design for fraco, os painéis de humor preencherão a lacuna. Se o seu vocabulário de design for forte, as palavras serão mais rápidas e precisas.
Essa compensação tem uma implicação útil: esta habilidade é um treinador de vocabulário. Quanto mais você o usa, melhor você descreve o design em palavras e melhores se tornam seus resultados. Não é apenas uma ferramenta – é uma prática.
Editando sites existentes – onde obtive a pontuação 25/40
Agora deixe-me chegar à parte que machucou meu ego. Executei impeccable document em meu próprio portfólio em mejba.me. Este comando faz engenharia reversa de um design.md a partir de uma base de código existente, lendo os estilos, componentes e padrões reais para produzir um documento que descreve o que o site é atualmente - não o que você gostaria que fosse.
Esse documento é brutal. É um espelho honesto.
Então executei impeccable critique. A habilidade retornou uma pontuação de integridade do design de 25 de 40. O ponto de corte para "resíduos AI limítrofes" é 26. Eu estava um ponto abaixo.
Problemas específicos sinalizados:
- Carga cognitiva na página inicial. Três ênfases visuais concorrentes acima da dobra. O olho não sabia para onde ir primeiro. Eu defendi isso nas análises de design como “rico” – a habilidade chamava isso de “disperso”.
- Hierarquia visual no índice do blog. Os títulos das postagens e as metainformações tinham contraste de tamanho insuficiente. Enviei isso com CSS personalizado do qual fiquei orgulhoso. A habilidade identificou corretamente que o orgulho da autoria era superior à clareza. - CTAs ambíguos. Três botões no cabeçalho, nenhum deles claramente a ação principal. O modelo destacou isso e recomendou rebaixar dois para links de texto. - Uso excessivo de morfismo de vidro. Dois cartões na página do projeto usavam efeitos de desfoque de fundo sem motivo funcional. Eu os adicionei porque "pareciam modernos". Elas pareciam modernas em 2022. - Fontes não utilizadas carregadas. A página carregou três famílias de fontes. Dois foram usados.
Um deles foi uma sobra de uma iteração anterior que nunca removi. Puro desperdício, tanto visualmente quanto no peso da página.
Não consertei todos os cinco de uma vez. Escolhi os dois que mais importavam – o problema de carga cognitiva e os CTAs ambíguos – e reconstruí o herói da página inicial com impeccable craft rodando em um novo conjunto de respostas de entrevista. Executei novamente o critique. A nova pontuação foi 32 de 40. Sólida, não perfeita.
A conclusão honesta: a pontuação não é o ponto. A questão é que a habilidade identifica questões específicas e acionáveis com raciocínio anexado, e as questões geralmente estão corretas. Parei de confiar no meu próprio gosto em layouts que observei por muito tempo. Em vez disso, executo critique.
decoration discipline e delight — Os dois comandos sobre os quais ninguém fala
Os comandos amplamente discutidos são craft, polish, live e critique. Os dois que mudaram silenciosamente a forma como escrevo CSS são decoration discipline e delight.
decoration discipline audita um componente ou página em busca de decoração visual desnecessária. Cada sombra, gradiente, borda, canto arredondado e floreio de cor são avaliados em relação à pergunta: "isso merece seu lugar?" Coisas que não são removidas. A saída é geralmente 30-40% mais enxuta que a entrada. Confiante. Contido. O tipo de design que faz o usuário pensar “esta é a melhor versão deste produto” em vez de “este é um produto sofisticado”.
delight faz o oposto. Depois que uma seção for disciplinada, você executa delight para adicionar personalidade de volta - mas especificamente, apenas nos momentos em que ele atende ao usuário. Um estado de foco que faz algo inesperado. Um estado vazio com caráter. Um esqueleto de carregamento que não pede desculpas pelo tempo de carregamento. As regras da habilidade para delight são explícitas: nunca decorativa, sempre funcional, sempre rara.
A ordem é importante. Disciplina primeiro, delight depois. Se você delight antes de disciplinar, a personalidade fica soterrada pelo ruído. Se você disciplinar sem delighting, o resultado é competente, mas frio. Os dois comandos são um par e a maioria dos tutoriais que vi os tratam como separados.
Esse é o tipo de nuance que me faz pensar que a habilidade foi desenvolvida por alguém que realmente enviou o produto, e não apenas escreveu sobre design. Outras habilidades Claude Code que valem a pena instalar tendem a se concentrar na velocidade do fluxo de trabalho; Impeccable concentra-se no artesanato.
Descobertas comuns em cinco sites que testei
Após a demonstração do Lighthouse e meu próprio site, executei a habilidade em mais quatro bases de código - dois projetos de cliente (com permissão), um repositório de código aberto para o qual contribuo e um iniciador derivado do modelo Vercel. Cinco sites no total, incluindo o meu.
Algumas descobertas repetidas em cada uma delas:
- Maquetes de clip-art de telefones ou laptops na seção de heróis. Quatro em cada cinco sites tinham isso. A habilidade sinaliza isso porque adiciona complexidade visual sem comunicar nada sobre o produto real. - Uso excessivo de morfismo de vidro. Três em cada cinco. Desfoque de fundo em cartões, modais, sobreposições. A habilidade recomenda usar o morfismo de vidro somente quando ele serve ao significado da superfície – uma dica de ferramenta flutuante, um painel flutuante – nunca como decoração. - Fontes não utilizadas carregadas. Todos os cinco sites tinham pelo menos uma família de fontes carregada, mas não utilizada na página renderizada. Este é um problema de peso da página e de coerência visual ao mesmo tempo. - Falta marca pessoal. Quatro em cada cinco não tinham assinatura visual distinta. Eles poderiam ter sido qualquer produto em sua categoria.
O fluxo de trabalho craft da habilidade vai especificamente contra isso, solicitando anti-referências — o que você NÃO quer que seja — o que força a diferenciação. - CTAs que competem entre si. Cada site tinha pelo menos dois CTAs de igual peso visual na página inicial. A habilidade sinaliza isso consistentemente e recomenda uma hierarquia primária, secundária e terciária clara.
Se você está construindo ou mantendo uma base de código front-end agora e deseja saber o que um revisor externo detectaria, essas são as cinco coisas que você deve procurar primeiro. Você nem precisa ter habilidade para encontrá-los – você precisa de alguém disposto a ser honesto com você sobre o que realmente está na página.
As limitações sobre as quais devo ser honesto
Fui positivo ao longo deste post e a habilidade valeu a pena. Mas existem limites reais.
Funciona melhor em convenções de design ocidentais e modernistas. Os dados de treinamento e os arquivos de referência baseiam-se fortemente em uma tradição estética específica – tipo limpo, espaço generoso, cores restritas, ornamento mínimo. Se o seu projeto exigir uma tradição visual diferente (altamente ornamental, culturalmente específica ou deliberadamente maximalista), a habilidade será prejudicada. Às vezes, essa resistência está certa. Às vezes não é. Você tem que saber quando substituí-lo.
Não pode substituir o julgamento de design em decisões novas. A habilidade é excelente na aplicação de princípios de design conhecidos ao trabalho executado. É menos eficaz para originar uma direção visual que ninguém tenha tentado antes. Se você está construindo algo genuinamente novo, a habilidade o ajuda a lançar uma versão limpa dele, mas a centelha tem que vir de você.
O modo ao vivo é alfa. Abordei isso acima, mas merece ser reafirmado. Se você adotar essa habilidade esperando que o modo ao vivo funcione perfeitamente, você atingirá paredes. Os comandos não ativos são estáveis e excelentes. O modo ao vivo é uma prévia de onde o projeto está indo.
Isso aumenta o uso de contexto. Carregar 23 comandos e 7 arquivos de referência em uma sessão Claude Code usa mais contexto do que executar sem a habilidade. Em grandes bases de código, isso é importante. Comecei a usar impeccable seletivamente — carregado para sessões focadas em design, descarregado para sessões de refatoração — para manter os gastos de contexto equilibrados.
A extensão do Chrome e a CLI são boas, mas opcionais. O site complementar em impeccable.style fornece ferramentas de suporte, mas o valor principal é a habilidade em si. Não se distraia com a infraestrutura circundante. Instale a habilidade, execute craft, execute critique, envie front-ends melhores. Todo o resto é um bônus.
O que eu recomendo fazer na próxima hora
Se você leu até aqui, você tem contexto suficiente para tomar uma decisão real. Aqui está o que eu faria se estivesse sentado ao seu lado agora.
Abra seu terminal. Navegue até um projeto paralelo – não o mais importante, um projeto onde você pode experimentar sem consequências. Instale a habilidade com npx skills add pbakaus/impeccable. Execute impeccable document na base de código existente. Leia a saída sem se defender.
Em seguida, execute impeccable critique. Obtenha a pontuação.
Qualquer que seja a pontuação, escolha o problema de maior impacto na lista e corrija-o com a habilidade carregada em sua sessão Claude Code. Um problema. Não tente consertar tudo. Envie a correção, execute critique novamente e observe como a pontuação mudou.
Esse é o ciclo. A primeira vez leva uma hora. Depois disso, leva dez minutos. Dentro de uma semana, você terá internalizado o vocabulário da habilidade o suficiente para começar a escrever um código front-end melhor com ou sem ele carregado.
Esse é o benefício de segunda ordem que ninguém menciona no marketing – usar essa habilidade faz de você um designer melhor, não apenas um melhor prompter. As transferências de vocabulário. As transferências de consciência antipadrão. As transferências de ritmo disciplina-então-delight.
Comecei esse post dizendo que quase não instalei. Termino dizendo que é a segunda habilidade que carrego em qualquer novo projeto Claude Code, logo após minhas definições de agente. A primeira vez que você observar a pontuação de uma crítica passar de 25 para 32 porque você realmente consertou as coisas certas, você entenderá o porquê.
Se você estiver construindo um trabalho de front-end com AI em 2026 e não estiver executando a detecção antipadrão em sua saída, você estará enviando a mesma página de destino que todos os outros. A habilidade é gratuita. A instalação leva trinta segundos. A hora que você gasta executando sua base de código existente é a hora de maior aproveitamento que você terá neste mês.
O que está na sua tela agora provavelmente teria uma pontuação abaixo de 30. O meu sim. O próximo passo é seu.
Vamos trabalhar juntos
Procurando construir sistemas AI, automatizar fluxos de trabalho ou dimensionar sua infraestrutura tecnológica? Eu adoraria ajudar.
- Fiverr (compilações e integrações personalizadas): fiverr.com/s/EgxYmWD
- Portfólio: mejba.me
- Ramlit Limited (soluções empresariais): ramlit.com
- ColorPark (design e marca): colorpark.io
- xCyberSecurity (serviços de segurança): xcybersecurity.io
