fixing-motion-performancepor Julien Thibeaut

Fixing Motion Performance Skill.

Uma skill de Claude Code e Codex para motion e vídeo: encontra e corrige animações CSS/JS travadas e motion vinculado ao scroll.

Motion e Vídeo
Relatório de revisão

Baixar OpenDesign Ver guia de uso

ibelick/ui-skills · skills/fixing-motion-performance/SKILL.mdSKILL.md

--- name: fixing-motion-performance description: Audit and fix animation performance issues including layout thrashing, compositor properties, scroll-linked motion, and blur effects. Use when animations stutter, transitions jank, or reviewing CSS/JS animation performance. --- ## how to use ## when to apply ## rendering steps glossary ## rule categories by priority ## common fixes ## review guidance

Front matter e títulos de seção lidos do arquivo upstream em 2026-09-14 · 5.561 caracteres no total

01 O que faz

O que a Skill fixing-motion-performance Faz no Claude Code e no Codex

Resumo, fluxo de trabalho e resultados, todos lidos do SKILL.md do skill.

Do SKILL.mdLido em 14/09/2026 · não é uma execução registrada

Nos termos do próprio skill

Um playbook de auditoria e correção para desempenho de animação em CSS e JS, voltado a designers e desenvolvedores que revisam ou refatoram transições travadas, movimento vinculado ao scroll e efeitos de blur. É oferecido como um slash command: invocado sem argumentos, aplica as diretrizes a qualquer trabalho de animação em discussão na conversa; ao receber um arquivo, relata violações citando a linha exata, o motivo da relevância e uma correção no nível do código.

As regras são ordenadas por prioridade, dos padrões proibidos, escolha do mecanismo e limites de ferramentas em nível crítico, passando por medição, scroll, pintura, camadas e blur, até as view transitions. Ele se recusa a migrar bibliotecas de animação a menos que solicitado, aplicando as regras dentro da stack existente.

O que ele produz

Uma frase curta por violação explicando por que ela é relevante.
Uma correção concreta, no nível do código, para cada violação.
Uma justificativa declarada para qualquer escolha não padrão de trabalho de renderização.

Veja o exemplo de prompt ↗

Como funciona

01
Invoque-o Como um Slash Command
Execute /fixing-motion-performance para vincular as restrições a qualquer trabalho de animação já em discussão na sessão.
02
Ou Aponte-o para um Arquivo
Passar um caminho o coloca em modo de revisão, verificando esse arquivo em relação a todas as regras em vez de restringir o trabalho em andamento.
03
Relate em Três Partes
Cada descoberta cita a linha problemática, dá uma frase curta sobre por que ela é relevante e propõe uma correção no nível do código.
04
Ordenar Propriedades por Etapa de Renderização
O glossário divide o trabalho em composite, paint e layout, para que o revisor saiba quais animações são baratas e quais são caras.
05
Aplicar em Ordem de Prioridade
As categorias críticas são verificadas antes das de menor impacto, de modo que padrões proibidos e limites de ferramentas sejam resolvidos primeiro.
06
Permanecer Dentro da Stack Atual
A migração de biblioteca não faz parte do trabalho; as regras são aplicadas ao sistema de animação que a base de código já utiliza.

02 Encontre o ideal para você

Quando Usar a Skill fixing-motion-performance

Use a skill fixing-motion-performance no Claude Code ou Codex quando o trabalho for motion e video deste tipo. Adequação e limites abaixo são extraídos do próprio arquivo da skill.

Boa Combinação

Adicionar ou alterar animações de UI escritas com CSS, WAAPI, Motion, rAF ou GSAP.
Refatorar interações ou transições que já parecem travadas.
Implementar movimento vinculado ao scroll ou efeitos de revelação ao rolar que atualmente dependem de eventos de scroll.
Animar layout, filtros, máscaras, gradientes ou variáveis CSS, em que o custo de desempenho é a questão central.
Revisar componentes que dependem de will-change, transforms ou medições.

Conheça os Limites

Transições de visualização que vão além de mudanças no nível de navegação, como UIs com muita interação ou fluxos que precisam ser interrompíveis.
Efeitos de blur contínuos ou em grandes superfícies, que são excluídos em vez de otimizados.

O Que Fornecer

O comando de barra isoladamentePara trabalho ao vivo, invocá-lo sozinho já basta; ele então orienta quaisquer alterações de animação feitas na conversa.
Um caminho de arquivo para o modo de revisãoPassar um único arquivo faz com que o skill revise esse arquivo em relação a todas as regras e produza o relatório de violações.
O sistema de animação existenteVocê não informa uma biblioteca de destino; o código como está é o ponto de referência, e as regras são aplicadas dentro dele.

03 Dentro da skill

Regras que o skill fixing-motion-performance dá ao Claude Code e ao Codex

8 instruções concretas, padrões e limites que o SKILL.md define para o agente — a parte do arquivo que muda o resultado.

Nunca Intercalar Leituras e Escritas
Leituras e escritas de layout não devem ser misturadas no mesmo frame, e vários sistemas de animação que medem ou alteram o layout não devem ser executados juntos.
Nunca Animar a Partir da Posição de Scroll
É proibido controlar a animação a partir de scrollTop, scrollY ou eventos de scroll; use Scroll ou View Timelines e IntersectionObserver.
Todo Loop de rAF Precisa de uma Saída
Um loop requestAnimationFrame sem condição de parada é um padrão a ser evitado sempre, não uma solução de compromisso aceitável.
Priorize Transform e Opacity por Padrão
Essas são as propriedades do compositor e o ponto de partida para movimento; a animação controlada por JS fica reservada para interações que realmente a exigem.
Limite o Blur a 8px
A animação de blur deve permanecer pequena, em 8px ou menos, e é limitada a efeitos curtos e únicos; blur contínuo e blur em grandes superfícies estão descartados.
Use will-change de Forma Cirúrgica
A promoção de camadas não é automática, então o will-change é aplicado de forma temporária e restrita, em vez de deixado em muitas camadas promovidas ou em camadas grandes.
Não Animar Variáveis CSS para Movimento
Propriedades customizadas que controlam transform, opacity ou position não devem ser animadas, e variáveis animadas herdadas são proibidas terminantemente.
Sem Migrações Parciais
Dentro de um mesmo componente, as APIs não devem ser migradas parcialmente e os estilos de animação não devem ser misturados.

04 Coloque em prática

Instalar fixing-motion-performance no Claude Code ou Codex

Um comando npx skills add, depois uma primeira tarefa no seu agente e uma checklist para o resultado.

Adicionar fixing-motion-performance ao Claude Code, Codex ou Seu Agente

Rode no seu projeto; o instalador pergunta a qual agente adicioná-lo.

Terminal

npx skills add https://github.com/ibelick/ui-skills --skill fixing-motion-performance

Formato genérico da CLI skills para skills/fixing-motion-performance/SKILL.md; o repositório pode documentar seu próprio caminho.

Dê à Skill uma Primeira Tarefa de Motion e Vídeo

Escrito nos próprios termos do skill; substitua as partes entre colchetes pelo seu material.

Starter prompt

Use /fixing-motion-performance on [path/to/Component.tsx]. The [side panel] transitions width on hover, the reveal-on-scroll is wired to a window scroll listener, and there is a blurred overlay on a full-width section. Report each violation with the exact line, why it matters, and a concrete fix, working within our existing [Motion] setup rather than migrating libraries.

Fonte: escrito a partir do SKILL.md nos próprios termos do skill.

Verifique o Primeiro Resultado

O que o próprio SKILL.md diz sobre como é um resultado correto:

Confirme que a correção proposta realiza o trabalho de renderização menos custoso que ainda corresponda ao efeito pretendido.
Verifique se tudo que foi movido para fora da tela está realmente pausado ou interrompido, e não deixado em execução.
Quando a promoção de camada for relevante, confirme-a com ferramentas em vez de simplesmente supor que ocorreu.

No OpenDesign importe fixing-motion-performance a partir do link do seu SKILL.md: Plugins → Add → Skill → Import from link, depois selecione-o na barra superior.

Baixar OpenDesign Ler o quickstart

05 Código aberto, rastreável

Fonte, Licença e Verificação

De onde vêm os fatos desta página e quando foram verificados pela última vez.

Author: Julien Thibeaut
Repository: github.com/ibelick/ui-skills Branch main
Arquivo da skill: skills/fixing-motion-performance/SKILL.md Checksum de conteúdo registrado na verificação; commit 79081ab
License: MIT De LICENSE.
Estrelas do repositório: 8.402 Snapshot do GitHub capturado em 14/09/2026 para todo o repositório ibelick/ui-skills, que contém 5 skills neste catálogo. Não é uma avaliação ou contagem de uso para fixing-motion-performance.
Verificado pelo OpenDesign: 14/09/2026 Arquivo de origem, caminho, texto da licença e contagem de estrelas foram verificados. Não integrado ao OpenDesign principal (verificado em 28/08/2026); uma execução ao vivo não foi registrada nesta página.

Dentro do SKILL.md

como usarA invocação simples restringe a sessão; um argumento de arquivo dispara um relatório completo de violações.
quando aplicarLista as cinco situações que devem acionar estas diretrizes durante o trabalho de animação.
glossário das etapas de renderizaçãoDefine composite, paint e layout, e as propriedades que cada um abrange.
categorias de regras por prioridadeNove categorias classificadas com um rótulo de impacto, de crítico a baixo.
referência rápidaNove categorias numeradas de restrições curtas em tópicos, de padrões proibidos a limites de ferramentas.
correções comunsTrechos de CSS e JS antes/depois para layout thrashing, movimento vinculado ao scroll e medição FLIP.
orientação de revisãoComo conduzir a revisão: crítico primeiro, trabalho mais barato, escolhas não padrão justificadas, notas acionáveis.

A Descrição da Própria Skill

"Auditar e corrigir problemas de performance de animação, incluindo layout thrashing, propriedades do compositor, movimento vinculado ao scroll e efeitos de blur. Use quando animações travam, transições ficam travadas ou ao revisar performance de animação CSS/JS."

Descrição do front-matter extraída de SKILL.md. O arquivo completo tem cerca de 5.561 caracteres. Leia o arquivo completo no GitHub.

06 Antes de instalar

Perguntas Sobre a Skill fixing-motion-performance

As respostas vêm do SKILL.md conforme lido em 2026-09-14, e não de uma execução registrada.

Quais bibliotecas de animação ela cobre?

Ela cita CSS, WAAPI, Motion, rAF e GSAP em seu escopo, então é abrangente em vez de estar ligada a um único framework. Como aplica regras dentro do sistema existente, ela se adapta a qualquer um desses que você já esteja usando.

Fixing Motion Performance

Execute fixing-motion-performance em uma tarefa real de Motion e Video.

Baixe OpenDesign, importe fixing-motion-performance pelo link SKILL.md, cole o prompt acima e leia o plano antes do resultado.

Baixar OpenDesign Ver todas as skills

Terminal

npx skills add https://github.com/ibelick/ui-skills --skill fixing-motion-performance

O que a Skill fixing-motion-performance Faz no Claude Code e no Codex

Nos termos do próprio skill

Como funciona

Quando Usar a Skill fixing-motion-performance

Boa Combinação

Conheça os Limites

O Que Fornecer

Regras que o skill fixing-motion-performance dá ao Claude Code e ao Codex

Nunca Intercalar Leituras e Escritas

Nunca Animar a Partir da Posição de Scroll

Todo Loop de rAF Precisa de uma Saída

Priorize Transform e Opacity por Padrão

Limite o Blur a 8px

Use will-change de Forma Cirúrgica

Não Animar Variáveis CSS para Movimento

Sem Migrações Parciais