Animation Performancepor Emil Kowalski

Animation Performance Skill.

Descubra por que uma animação web existente perde quadros. O Animation Performance orienta seu agente de código pelo custo de renderização, pelo trabalho ocupando a thread principal e pelas atualizações a cada quadro, com uma causa associada a cada mudança proposta.

Animação web
Desempenho de quadros
Revisão diagnóstica

Baixar OpenDesign Ver guia de uso

Revisão da fonte · animation-performanceSKILL.md

Tarefa Movimento e vídeo Produz • Um inventário de elementos animados, drivers e propriedades • Achados baseados em causas, com localização nos arquivos e propostas de antes/depois • Uma distinção clara entre inspeção de código e evidências registradas em dispositivo Antes de começar Código da animação e uma interação reproduzível; profiling no navegador e um dispositivo real de destino para verificar o desempenho.

Resumo editorial · fonte revisada em 2026-10-12 · não é um exemplo gerado

01 O que ela faz

Rastreie o custo por trás de um quadro perdido

Este fluxo de trabalho está descrito na fonte fixada. Não é uma execução registrada nem um benchmark.

Fluxo de trabalho baseado na fonteNão é um benchmark de execução

A abordagem de trabalho

O mesmo indicador de aba pode parecer fluido em repouso e travar durante a navegação. Esta skill separa duas perguntas: quanto trabalho de renderização cada quadro dispara e se o driver da animação disputa a thread principal com outras tarefas. Ela começa pelas propriedades e pelo driver, em vez de adicionar dicas de GPU por padrão.

A fonte também verifica caminhos menos óbvios: uma atualização de estado do React a cada quadro, uma variável CSS herdada que muda em uma subárvore grande, blur custoso e transforms em notação abreviada do Motion. As recomendações são ligadas ao código e condicionadas ao comportamento do navegador e do dispositivo; um desktop rápido não é tratado como prova de correção.

Entregas esperadas

Um inventário de elementos animados, drivers e propriedades
Achados baseados em causas, com localização nos arquivos e propostas de antes/depois
Uma distinção clara entre inspeção de código e evidências registradas em dispositivo

Ver o briefing de exemplo

Da entrada aos achados

01
Inventariar o movimento em escopo
Liste cada elemento, driver de animação e propriedade, junto com trabalhos simultâneos, como navegação ou hidratação. Expanda transições genéricas e atalhos de bibliotecas antes de julgar o custo.
02
Encontrar a causa provável
Inspecione primeiro o trabalho de layout e de pintura, depois a disputa pela thread principal, as renderizações do React a cada quadro e o recálculo de estilos. Relacione cada mudança proposta a um caminho específico, em vez de chamá-la de otimização genérica.
03
Fazer profiling da interação real
Use gravações de desempenho do navegador para inspecionar quadros perdidos e tarefas longas. Verifique em um celular de destino real sempre que possível; a limitação de CPU no desktop não reproduz uma GPU fraca nem os limites de memória de um dispositivo.
04
Relatar com os limites de verificação
Informe localizações nos arquivos, causas e propostas de antes/depois, ordenadas pelo custo esperado. Diga o que foi inferido do código e o que foi medido, e aguarde autorização para aplicar as correções.

02 Quando usar

Quando usar

Use para movimento na web que engasga ou fica lento sob carga. O foco é a entrega de quadros, não a escolha de uma animação mais atraente.

Bom encaixe

Movimento durante a navegaçãoIndicadores de aba, transições de página e movimentos próximos ao carregamento podem competir com mudanças de rota, hidratação ou tarefas longas.
Gavetas que ficam lentas com o conteúdoInspecione variáveis herdadas, cálculo de estilo repetido e excesso de nós animados quando um arrasto funciona com poucos itens, mas piora com uma lista maior.
Animação em React escrita à mãoEncontre atualizações de estado dentro de handlers de quadro, ponteiro ou rolagem que fazem o React renderizar mais do que o efeito exige.

Limites a verificar

Não é um designer de easing ou de tempoEscolher uma curva, uma duração ou se o movimento deve existir na interface está fora do escopo restrito de desempenho desta skill.
Web, não React NativeA fonte trata da renderização no navegador e dos drivers de animação web. O comportamento de threads do React Native é tratado por outra skill do repositório.
A aceleração não é garantidaVersões do navegador, propriedades e decisões de camadas afetam a aceleração. Preserve a correção do layout e verifique nos dispositivos de destino, em vez de prometer uma taxa de quadros.

Traga estas entradas

Uma interação reproduzívelDescreva exatamente quando o travamento aparece: ao abrir uma gaveta, trocar de rota ou arrastar depois que os dados carregam. Inclua a quantidade de conteúdo necessária para reproduzir.
Código da animação e dos componentesForneça o CSS, o driver ou a versão da biblioteca, as propriedades animadas e os handlers de estado relevantes. Inclua o trabalho ao redor que roda ao mesmo tempo.
Navegador e dispositivo de destinoInforme o navegador, o dispositivo e, se souber, a taxa de atualização afetados. Compartilhe gravações de desempenho quando houver e distinga-as de impressões subjetivas.

03 Decisões que importam

Decisões que importam

O custo de renderização vem antes das dicas de camada
A fonte prefere transform e opacity quando preservam o comportamento pretendido. Mudanças de layout, efeitos que repintam e transições genéricas exigem escrutínio explícito.
O driver importa sob carga
Um loop de requestAnimationFrame precisa da thread principal. Efeitos de CSS ou da Web Animations API podem usar um caminho acelerado para propriedades elegíveis, mas o comportamento real do navegador ainda precisa ser verificado.
Pequenos padrões de código podem afetar uma subárvore inteira
Uma propriedade personalizada herdada ou uma atualização de estado repetida pode tornar um movimento simples caro. A revisão segue esses caminhos de atualização, em vez de presumir que só o transform deixa um efeito barato.

04 Experimente um briefing focado

Experimente um briefing focado

O briefing de exemplo abaixo não foi testado. Confira a configuração da skill antes de usá-lo.

Revise a configuração

Instale a partir do repositório público de skills de Emil Kowalski e selecione esta skill para o seu agente.

Comando de instalação com escopo

npx skills@latest add emilkowalski/skills --skill animation-performance

O README documenta a instalação do repositório com npx skills@latest add emilkowalski/skills. O comando com escopo abaixo seleciona esta entrada. Ele requer Node.js/npm para o npx; a fonte não fixa uma versão mínima. Leia as instruções originais antes de executá-lo.

Reproduza uma interação que trava

Este briefing de exemplo é original e não foi testado. Substitua os detalhes de componente e ambiente pelo contexto real do seu projeto.

Briefing de exemplo

Use animation-performance para revisar a gaveta do nosso painel web, que trava enquanto uma rota carrega e piora com 60 itens de lista. Leia o CSS existente e os handlers do React sem alterá-los. Liste as propriedades animadas, o driver, as atualizações de estado e as propriedades personalizadas envolvidas. Proponha as menores mudanças que tratem uma causa identificada, preservando o layout, a interrupção de gestos e o comportamento de movimento reduzido. Se houver acesso ao navegador, grave a interação com 5 e com 60 itens sintéticos e inspecione tarefas longas e a entrega de quadros. Informe o navegador e o dispositivo usados. Não afirme melhoria de desempenho em celular com base em uma gravação apenas de desktop, não adicione will-change por padrão e pare após o relatório.

Revise as evidências antes de corrigir

Compare o relatório com o código e com o comportamento real do navegador. Mantenha observações não verificadas separadas de falhas reproduzidas.

Cada mudança proposta indica uma causa no caminho de renderização ou de atualização e uma localização no código-fonte.
As afirmações de antes/depois usam interações gravadas comparáveis; o comportamento não medido em dispositivos é claramente indicado.
A otimização proposta preserva o layout e a interação pretendidos, em vez de apenas parecer mais fluida isoladamente.

OpenDesign oferece um espaço de trabalho de design local para agentes de código. Esta listagem não significa que a skill inclua suas ferramentas externas, credenciais e dependências de software.

Baixar OpenDesign Ler o início rápido

05 Fonte e licença

Fonte e licença

Esta página descreve a revisão da fonte fixada e vinculada abaixo. O comportamento e os requisitos do original podem mudar.

Responsável pela fonte: Emil Kowalski
Repositório: emilkowalski/skills
Arquivo da skill: skills/animation-performance/SKILL.md
Licença: MIT
Snapshot revisado: 2026-10-12 · 2d228630ba14

Resumo editorial da fonte

Diagnostique quadros perdidos em animações web: custo de renderização, disputa pela thread principal, atualizações do React a cada quadro e variáveis CSS herdadas. Este é um resumo editorial da fonte fixada, não um relatório de execução.

Resumo original de OpenDesign, baseado na fonte vinculada. As estrelas do repositório são um sinal de popularidade datado, não uso da skill nem nota de qualidade.

06 Perguntas antes de começar

Perguntas antes de começar

Toda animação deve ser reescrita em CSS?

Não. A fonte mantém as bibliotecas JavaScript úteis para springs, efeitos de layout compartilhado, gestos e interrupção. A preocupação é se o driver e as propriedades escolhidos conseguem atender às necessidades da interação sob carga.

Adicionar will-change resolve os quadros perdidos?

Em geral, não. A fonte o trata como uma medida pontual, após identificar um problema relevante; camadas extras consomem memória, e a dica não elimina o trabalho de layout nem libera uma thread principal ocupada.

Uma gravação fluida no desktop é suficiente?

Não. A fonte pede evidências em dispositivo real ao avaliar o desempenho em celular. A limitação de CPU é útil para investigação, mas não recria as restrições de GPU e memória de um celular.

Animation Performance

Encontre o trabalho por trás do travamento

Escolha uma interação reproduzível, rastreie o custo dos quadros e verifique as mudanças no dispositivo de destino. Uma recomendação de código é um ponto de partida, não um benchmark de desempenho.

Baixar OpenDesign Explorar skills de design