optimize

Visão geral da skill optimize

O que a skill optimize faz

A skill optimize ajuda um agente a diagnosticar e melhorar problemas de performance de UI sem cair em “correções de velocidade” no chute. Ela foi feita para casos em que um site ou app parece lento, travado, engasgando, pesado ou pouco responsivo, e foca nas áreas concretas que normalmente mais importam: carregamento, renderização, animações, imagens, tamanho do bundle e comportamento em runtime.

Para quem a skill optimize é indicada

Esta skill optimize é mais indicada para desenvolvedores, product engineers, especialistas em frontend e fluxos de coding com apoio de IA que precisam de uma análise prática de performance em uma interface já existente. Ela é mais útil quando você já tem uma página, componente ou comportamento do app para inspecionar, e não quando quer apenas dicas genéricas de performance.

O trabalho real que precisa ser resolvido

Em geral, o usuário quer mais do que “deixar mais rápido”. Ele precisa:

• encontrar o gargalo real,
• evitar otimização prematura,
• escolher mudanças com maior impacto para o usuário,
• e verificar se a mudança realmente melhorou a performance.

É aí que optimize for Performance Optimization se destaca em relação a um prompt amplo: ele direciona o trabalho para medição, identificação de gargalos e correções focadas.

O que diferencia esta skill optimize

O principal diferencial é a disciplina de escopo. A skill não trata performance como um problema único e vago. Ela divide o trabalho em categorias mensuráveis, como Core Web Vitals, tempo de carregamento, peso do bundle, fluidez das animações, custo de CPU, uso de memória e overhead de rede. Isso torna o uso da optimize muito mais fácil de operacionalizar em um repositório real.

Como usar a skill optimize

Como instalar a skill optimize

Use a skill pelo seu fluxo de skills:

npx skills add pbakaus/impeccable --skill optimize

Após a instalação, abra:

• SKILL.md

As evidências disponíveis neste repositório são enxutas, então SKILL.md é a principal fonte de verdade para o guia e o fluxo de trabalho da optimize.

Quando acionar optimize na prática

Chame optimize quando o usuário disser coisas como:

• “A página carrega devagar”
• “O scroll está engasgando”
• “As animações travam”
• “O bundle está grande demais”
• “A performance no mobile está ruim”
• “Você pode melhorar os Core Web Vitals?”

Ela se encaixa bem quando a tarefa envolve uma UI existente e alguma lentidão perceptível. É menos indicada para latência exclusivamente de backend, tuning de banco de dados ou otimização de custo de infraestrutura.

Que entradas a skill optimize precisa

A skill optimize funciona melhor quando você informa:

• a página, rota ou componente alvo,
• o que parece lento,
• onde o problema acontece,
• o contexto de dispositivo ou navegador,
• qualquer medição que você já tenha,
• e suas restrições.

Boas entradas:

• “Optimize the product listing page on mobile Safari; LCP is high and scroll stutters.”
• “Optimize our React dashboard initial load; bundle grew after adding charts.”
• “Optimize modal open/close animation; it drops frames on mid-range Android devices.”

Entrada fraca:

• “Make the app faster.”

Como transformar um pedido vago em um prompt forte para optimize

Um padrão de uso mais forte para optimize é:

1. Nomear o alvo.
2. Descrever o sintoma.
3. Fornecer evidências.
4. Informar as restrições.
5. Pedir correções priorizadas.

Exemplo de prompt:
“Use the optimize skill on our /pricing page. Problem: slow first load on 4G and layout shifts after hero image loads. Current signals: LCP 4.1s, CLS 0.19, JS bundle increased after adding testimonials carousel. Constraints: keep design unchanged, no framework migration. Please identify likely bottlenecks, rank fixes by impact, and propose code-level changes.”

Esse prompt dá ao agente contexto suficiente para fazer uma triagem real de performance, em vez de gerar conselhos genéricos.

Comece com medição, não com correções

A instrução mais importante da skill é, na prática: medir antes e depois. No uso real, isso significa que seu fluxo com optimize deve começar por uma avaliação do estado atual:

• Core Web Vitals: LCP, INP/FID, CLS
• tempos de paint e interatividade,
• tamanhos de bundle e de assets,
• frame rate e custo em runtime,
• contagem de requisições e padrões do waterfall.

Se você pular essa etapa, a qualidade da saída cai rápido, porque o agente precisa inferir o gargalo.

O que a skill optimize tende a inspecionar

Com base na fonte, a skill optimize é orientada por estes blocos de performance:

• performance de carregamento,
• performance de renderização,
• otimização de imagens,
• fluidez de animações,
• peso de JavaScript e CSS,
• eficiência de rede e de payload.

Isso a torna especialmente útil para auditorias de performance em frontend e planos de remediação direcionados.

Fluxo sugerido para usar optimize

Um fluxo prático é:

1. Identificar a tela ou interação lenta.
2. Reunir medições ou detalhes de reprodução.
3. Acionar optimize com o alvo e os sintomas.
4. Revisar os gargalos e correções propostos.
5. Aplicar primeiro as mudanças de maior impacto e menor risco.
6. Medir novamente.
7. Iterar sobre os gargalos restantes.

Essa sequência reflete o que o usuário realmente quer: resultado mais rápido com menos refatoração desperdiçada.

Caminho de leitura do repositório para adotar mais rápido

Para esta skill, não há muita estrutura de apoio além de SKILL.md, então o melhor caminho de leitura é simples:

1. SKILL.md para entender escopo e fluxo
2. primeiro a seção “Assess Performance Issues”
3. depois as categorias de otimização, como loading e rendering

É uma skill compacta, então a fricção de adoção é baixa, mas isso também significa que você precisa trazer suas próprias ferramentas e evidências específicas do repositório.

Como devem ser saídas fortes da skill optimize

Um bom resultado de optimize deve incluir:

• o gargalo mais provável,
• por que ele afeta os usuários,
• como validá-lo,
• as opções de correção,
• e a ordem de prioridade.

Por exemplo, “convert oversized hero images to AVIF/WebP” fica muito melhor quando vem acompanhado de “current image is 3000px wide but renders at 360px on mobile, delaying LCP.”

Restrições comuns para informar logo no início

Para obter melhores resultados de instalação e uso da optimize, diga ao agente se você precisa preservar:

• a escolha do framework,
• o design visual,
• o comportamento de SEO,
• a sensação das animações,
• o suporte a navegadores,
• scripts de analytics,
• ou widgets de terceiros.

As recomendações de performance mudam bastante dependendo de você poder remover código, adiar scripts, alterar a entrega de imagens ou simplificar o comportamento da UI.

FAQ da skill optimize

A optimize é melhor do que um prompt comum para trabalho de performance?

Na maioria dos casos, sim, se você tiver um problema real de performance de UI. Um prompt genérico costuma pular direto para correções aleatórias. A skill optimize é mais útil porque enquadra a tarefa primeiro como diagnóstico e só depois como intervenção direcionada.

A optimize serve apenas para apps web de frontend?

Em grande parte, sim. A skill optimize é claramente centrada em performance de UI: velocidade de carregamento, renderização, animações, imagens, tamanho do bundle e fluidez percebida pelo usuário. Ela não é a ferramenta principal certa para tuning de banco de dados, filas ou servidor.

Eu preciso ter dados de Lighthouse ou Web Vitals antes?

Não, mas isso ajuda bastante. Ainda dá para usar optimize com entradas baseadas em sintomas, mas os melhores resultados vêm quando você fornece medições reais ou ao menos um caminho de reprodução confiável.

Iniciantes podem usar a skill optimize?

Sim, desde que consigam descrever com clareza a página e os sintomas. A skill traz estrutura, mas iniciantes ainda podem precisar de ajuda para coletar evidências e aplicar correções específicas do framework.

Quando eu não deveria usar optimize?

Ignore este guia de optimize quando:

• o problema for apenas latência de backend,
• a questão não for performance, e sim usabilidade,
• você precisar de orientação de escalabilidade em nível de arquitetura,
• ou não houver tela, fluxo ou sintoma específico para inspecionar.

A skill optimize faz mudanças no código automaticamente?

A skill em si é mais orientada a orientação e diagnóstico. Em um fluxo de coding com IA, ela pode conduzir alterações de código, mas a qualidade dessas alterações depende de quanto contexto do repositório, dados de medição e restrições você fornecer.

Como melhorar a skill optimize

Dê à optimize um alvo específico, não o app inteiro

A forma mais rápida de melhorar os resultados com optimize é reduzir o escopo. “Optimize checkout page submit flow on low-end Android” é muito melhor do que “optimize my app.” Um alvo claro reduz adivinhação e gera correções mais acionáveis.

Inclua sintomas percebidos pelo usuário e sinais técnicos

Combine entradas qualitativas e quantitativas:

• “scroll stutters after opening filters”
• “INP regressed to 280ms”
• “hero image loads late”
• “bundle grew by 400 KB after adding editor”

Essa combinação ajuda a skill optimize a conectar métricas às causas raiz.

Peça recomendações ranqueadas

Um bom prompt pede ao agente que separe:

• ganhos rápidos de alto impacto,
• melhorias de esforço médio,
• e mudanças invasivas.

Isso torna optimize for Performance Optimization mais amigável para decisão, especialmente quando a equipe não pode bancar reescritas amplas.

Informe restrições que mudam a solução

As recomendações de performance variam se:

• SSR é obrigatório,
• o design não pode mudar,
• scripts de terceiros são obrigatórios,
• a qualidade de imagem precisa continuar alta,
• ou a riqueza das animações faz parte do produto.

Se você não explicitar as restrições, a skill optimize pode sugerir mudanças tecnicamente válidas, mas inviáveis no seu ambiente.

Peça etapas de validação antes e depois

Não pare em “aplique as correções”. Peça à skill que defina o que deve ser medido novamente após as mudanças:

• qual métrica deve melhorar,
• onde inspecioná-la,
• e qual limite de sucesso importa.

Esse é um dos maiores ganhos práticos na qualidade de uso da optimize.

Fique atento aos modos de falha mais comuns

A skill optimize tem mais chance de render abaixo do esperado quando:

• o prompt não traz um alvo,
• nenhuma medição é fornecida,
• os sintomas estão misturados entre várias páginas,
• ou o agente é instruído a otimizar tudo de uma vez.

Outro modo de falha comum é focar demais no tamanho do bundle quando o problema real é thrashing de layout, mídia superdimensionada ou custo de execução de scripts.

Peça causa raiz, não uma lista de dicas

Se o primeiro resultado vier genérico, refine com:
“Use the optimize skill again, but identify the top two likely root causes for this page and explain why they are more probable than the others.”

Isso empurra a saída do modo checklist para o modo diagnóstico.

Faça iterações depois da primeira rodada de otimização

Na prática, o melhor guia de optimize é iterativo:

1. corrigir o maior gargalo,
2. medir de novo,
3. revelar a próxima restrição,
4. otimizar novamente.

Trabalho de performance raramente se resolve em uma única passada, e a skill se torna mais valiosa quando usada em loop, e não como um comando único.