optimize

Visão geral da skill optimize

O que a skill optimize faz

A optimize é uma skill focada em otimização de performance para interfaces. Ela ajuda um agente a diagnosticar por que uma UI parece lenta, travada, engasgando ou pesada, e depois propor correções direcionadas em carregamento, renderização, animações, imagens e tamanho de bundle. Se você quer optimize for Performance Optimization em vez de uma revisão de código genérica, esta skill é uma boa escolha.

Quem deve instalar optimize

Instale optimize se você cria aplicações web, UIs de produto, landing pages, dashboards ou frontends interativos e precisa de ajuda prática para transformar “isso está lento” em melhorias mensuráveis. Ela é mais útil para desenvolvedores, product engineers e fluxos de desenvolvimento com apoio de IA em que o problema de performance é visível, mas a causa raiz ainda não está clara.

O trabalho real que ela resolve

Em geral, os usuários não querem teoria; querem saber:

• o que de fato está lento
• como medir isso
• qual é a causa mais provável
• quais correções importam primeiro
• como verificar a melhora depois das mudanças

A optimize skill foi construída em torno desse fluxo, não em torno de dicas genéricas de performance.

Por que esta skill é diferente de um prompt comum

Um prompt simples costuma pular direto para suposições. A optimize é melhor porque começa por medição, isolamento de gargalos e priorização antes de sugerir correções. Isso reduz otimização prematura e torna a saída mais acionável em projetos reais.

O que está incluído — e o que não está

Esta skill é enxuta e útil: ela oferece um caminho estruturado para diagnosticar e corrigir problemas de performance no frontend. Ela não traz scripts, benchmarks ou automação específica de framework neste snapshot do repositório, então espere orientação e apoio à decisão, não ferramentas prontas para uso.

Como usar a skill optimize

Instalação e invocação do optimize

Instale a skill com:
npx skills add https://github.com/pbakaus/impeccable --skill optimize

Depois, invoque-a pedindo ao seu agente para usar optimize com um alvo específico, como uma página, fluxo, componente ou área do app:

• Use optimize on our homepage load performance
• Use optimize for checkout jank on mobile
• Use optimize on the dashboard bundle size

Melhor contexto de instalação antes da primeira execução

As evidências do repositório mostram apenas SKILL.md, então sua preparação prática importa mais do que explorar o repo. Antes de usar optimize, reúna:

• a URL, rota ou componente afetado
• o contexto do dispositivo: desktop, celular de entrada, rede lenta, navegador específico
• os sintomas: carregamento lento, input lag, dropped frames, CLS, bundle grande demais
• quaisquer medições que você já tenha de Lighthouse, DevTools, RUM ou saídas de profiler

Sem esse contexto, a skill ainda pode ajudar, mas as recomendações tendem a ser mais amplas e menos confiáveis.

Leia este arquivo primeiro

Comece por:

• SKILL.md

Como esta skill é um guia de arquivo único, não há regras ou recursos de apoio para estudar antes. Isso é bom para adoção rápida, mas também significa que você deve fornecer mais evidências específicas do seu projeto no prompt.

Que entrada o optimize precisa para funcionar bem

Um bom optimize usage depende de evidências concretas. As melhores entradas incluem:

• métricas atuais: LCP, INP/FID, CLS, FCP, TTI, FPS, memória, CPU
• escopo: uma página, uma interação, uma animação ou um artefato de build
• causa suspeita, se houver
• restrições: sem migrar de framework, sem trocar CDN, sem mudar o pipeline de imagens etc.
• meta de sucesso: “reduzir o LCP para menos de 2,5s no mobile” é melhor do que “deixar mais rápido”

Como transformar um pedido vago em um prompt forte para optimize

Fraco:

• Make my app faster

Mais forte:

• Use optimize on our React product page. Mobile Lighthouse shows LCP 4.1s, CLS 0.18, bundle is 1.2MB JS, hero image is 2.4MB, and filtering interactions feel laggy on low-end Android. Prioritize fixes by impact and implementation cost, explain likely causes, and suggest how to re-measure after each change.

Por que isso funciona:

• define o alvo
• inclui medições
• delimita a plataforma
• pede priorização, não um despejo de dicas

Um fluxo prático de optimize

Um bom optimize guide normalmente segue esta sequência:

1. Medir a linha de base.
2. Separar problemas de carregamento de problemas em tempo de execução.
3. Identificar o maior gargalo.
4. Aplicar primeiro a correção de maior impacto.
5. Medir de novo.
6. Só então passar para melhorias secundárias.

Isso reflete o conselho mais forte da skill: medir antes e depois, e não otimizar no escuro.

Que tipos de problema o optimize resolve melhor

A skill é especialmente útil para:

• carregamento inicial lento da página
• páginas pesadas em imagens
• payloads grandes de JavaScript ou CSS
• interações lentas
• animações engasgando
• layout thrashing e jank causado por reflow
• excesso de requisições de rede

Essas são as áreas mais claramente cobertas no material de origem.

Que tipo de saída pedir para a skill

Para melhorar a qualidade das decisões, peça ao optimize uma resposta estruturada:

• diagnóstico
• gargalos ranqueados
• correções recomendadas
• impacto esperado
• tradeoffs
• plano de verificação

Esse formato é mais útil do que “liste ideias de otimização”, especialmente quando você precisa decidir o que entra primeiro em produção.

Dicas que melhoram de forma concreta o uso do optimize

Peça à skill para distinguir entre:

• métricas de laboratório vs sintomas de usuários reais
• performance em desktop vs mobile
• carregamento inicial vs visitas recorrentes
• problemas limitados por rede vs limitados por CPU
• trabalho caro executado uma vez vs trabalho caro repetido

Essas distinções costumam mudar a correção certa. Por exemplo, compressão de imagem ajuda páginas limitadas por rede, enquanto corrigir layout thrash melhora a fluidez em tempo de execução.

Limitações comuns de aderência

Esta skill prioriza orientação, não profundidade de ecossistema. Se você precisa de detalhes exatos sobre internals de framework, comandos personalizados de bundler ou patching automatizado, use optimize junto com contexto específico do seu próprio código. A skill ajuda mais quando recebe evidências suficientes para raciocinar em cima delas, e menos quando se espera que ela conheça sua stack por padrão.

FAQ da skill optimize

A optimize é boa para iniciantes?

Sim, desde que você consiga fornecer sintomas e métricas. A estrutura da skill é amigável para iniciantes porque começa por medição e priorização. Mas iniciantes absolutos ainda podem precisar de ajuda para coletar dados do DevTools ou Lighthouse antes que apareçam as melhores recomendações.

Quando devo usar optimize em vez de um prompt normal de programação?

Use optimize quando performance for o trabalho principal, não um detalhe secundário. Se a tarefa é “corrigir jank”, “melhorar tempo de carregamento” ou “reduzir tamanho de bundle”, a skill é melhor do que um prompt genérico porque foi desenhada em torno de trabalho de performance com diagnóstico em primeiro lugar.

O optimize substitui ferramentas de profiling?

Não. A optimize skill complementa ferramentas como Lighthouse e profilers do navegador; ela não as substitui. Ela ajuda a interpretar os achados, priorizar correções e transformar sinais brutos em um plano de ação.

O optimize serve só para performance web?

Pelo material de origem, o foco principal está em preocupações de performance de UI e de web: Core Web Vitals, imagens, payloads de rede, renderização e animações. Não é a primeira escolha certa para tuning de queries no backend ou latência de infraestrutura.

Quando o optimize não é uma boa opção?

Evite optimize se:

• você não tem um alvo específico de UI
• o problema é apenas de backend
• você quer “boas práticas” prematuras sem medição
• você precisa de detalhes de implementação específicos de framework sem contexto do projeto

Nesses casos, a saída pode ficar genérica demais para sustentar mudanças com confiança.

O repositório inclui referências extras ou automação?

Não no snapshot atual. As evidências do repositório mostram um único SKILL.md e nenhuma pasta de suporte. Isso simplifica a instalação, mas significa que a qualidade do seu prompt e suas medições locais têm um peso maior no resultado.

Como melhorar a skill optimize

Dê ao optimize evidências melhores, não objetivos mais amplos

A forma mais rápida de melhorar a saída do optimize é fornecer entradas mais precisas:

• página ou rota exata
• valores de métricas
• screenshots ou achados copiados do profiler
• dispositivo/rede afetados
• regressões recentes ou mudanças suspeitas

“Homepage está lenta” gera orientações mais fracas do que “o LCP no mobile regrediu de 2,6s para 4,0s depois de adicionar vídeo em autoplay e uma nova tag de analytics”.

Peça priorização por impacto e esforço

Trabalho de performance fica ruidoso rápido. Diga ao optimize para ranquear recomendações por:

• impacto na experiência do usuário
• nível de confiança
• esforço de implementação
• risco de regressão

Isso ajuda a evitar que limpezas de baixo valor disputem espaço com ganhos importantes, como imagens superdimensionadas ou JavaScript em excesso.

Separe correções de carregamento das correções de renderização

Um modo de falha comum é misturar todo tipo de conselho de performance junto. Melhore os resultados pedindo optimize for Performance Optimization em uma frente por vez:

• carregamento: imagens, payloads, quantidade de requisições, code splitting
• renderização: reflows, custo de paint, estratégia de animação, trabalho na main thread

Essa separação geralmente produz próximos passos mais claros.

Informe as restrições logo no começo

Diga à skill o que você não pode mudar:

• sem migração de CDN
• sem reescrita de framework
• sem mudança de formato de imagem neste sprint
• precisa preservar o comportamento das animações
• o bundle precisa continuar compatível com navegadores legados

Restrições forçam recomendações mais realistas e reduzem saída desperdiçada.

Peça ao optimize que explique por que cada correção importa

Se a primeira resposta parecer genérica, peça:

• qual gargalo cada correção ataca
• qual métrica ela deve melhorar
• como validar o ganho
• quais tradeoffs existem, como CPU vs banda ou fluidez vs fidelidade

Isso torna a recomendação mais confiável e mais fácil de implementar corretamente.

Itere depois da primeira rodada

O melhor fluxo de optimize guide é iterativo:

1. obter o diagnóstico inicial
2. aplicar uma ou duas correções principais
3. coletar novas medições
4. rodar optimize de novo com dados de antes/depois

Isso transforma a skill de um motor de sugestões pontual em um ciclo prático de otimização.

Falhas comuns a evitar

Os resultados pioram quando os usuários:

• pedem “todas as melhorias de performance”
• não fornecem métricas
• misturam problemas de backend, infraestrutura e frontend no mesmo pedido
• omitem contexto de dispositivo e rede
• pedem correções antes de confirmar o gargalo

A skill é mais forte quando o problema está bem delimitado e apoiado por evidências.

Como obter uma saída mais pronta para implementação

Se você quer mudanças que deem para executar rapidamente, peça:

• uma lista com as 3 principais correções
• exemplos em nível de código para a sua stack
• um checklist de medição
• um plano de rollback ou verificação
• “o que fazer primeiro esta semana” em vez de uma auditoria completa

Esse enquadramento melhora a adoção porque transforma orientação em plano de entrega.