web-animation-designFinalidade, utilização e fonte

O que esta habilidade faz

Crie e implemente animações web que pareçam naturais e com propósito. Use essa habilidade proativamente sempre que o usuário fizer perguntas sobre animações, movimento, suavização, tempo, duração, efeitos de mola, transições ou desempenho da animação. Isso inclui perguntas sobre como animar elementos específicos da interface do usuário, qual suavização usar, melhores práticas de animação ou considerações de acessibilidade para movimento. Gatilhos em: suavização, suavização de saída, suavização de entrada, suavização de entrada e saída, curvas de Bézier cúbicas, efeito de ricochete, física de mola, quadros-chave, transformação, opacidade, fade, deslizamento, escala, efeitos de foco, microinterações, Framer Motion, React Spring, GSAP, transições CSS.entrance/exitanimações, transições de página, escalonamento, alterações em breve, aceleração por GPU, prefere movimento reduzido,modal/dropdown/tooltip/popover/drawerAnimações, animações por gestos, interações de arrastar, sensação ao pressionar botões, parece instável, torne-o mais suave.

Como funciona o fluxo de trabalho upstream

Before: transform: scale(0)
After: transform: scale(0.95)
────────────────────────────
Before: 400ms duration
After: 200ms

Requisitos e configuração

Nenhuma passagem de requisitos resumida foi selecionada deste arquivo. Isso não significa que a Skill não tenha dependências. Verifique as instruções de configuração do repositório e os arquivos referenciados.

Limites e verificações de qualidade

Comece com um teste seguro.

1. Verifique o host compatível e as instruções de instalação do repositório. Mantenha o diretório Skill e seus scripts, recursos e documentação referenciados juntos;SKILL.mdsozinho pode omitir dependências.
2. Forneça ao agente suas entradas reais, a saída desejada e os critérios de aceitação. A sintaxe de invocação e as ferramentas disponíveis dependem do host; este site não pressupõe um comando de instalação universal.
3. Teste o fluxo de trabalho original em um projeto descartável ou em uma cópia. Analise as operações que alteram arquivos, serviços remotos ou recursos faturáveis ​​antes de permiti-las.
4. Valide o resultado comparando-o com as verificações de qualidade da fonte e com seus próprios requisitos. Um gatilho bem-sucedido ou uma alta contagem de estrelas no repositório não garantem um resultado correto.

Especificação de formato e diretório de habilidades ↗

Leia mais na fonte.

• Design de animação web
• Resposta inicial
• Formato de revisão (obrigatório)
• Início rápido
• aliviar a pressão (Mais comum)
• entrada e saída suaves (para movimento)
• facilidade (para efeitos de passar o mouse)
• linear (Evitar na interface do usuário)
• adaptação gradual (Quase nunca)
• Regra dos Elementos Emparelhados
• Diretrizes de duração
• A frequência
• Quando animar
• Animações de Primavera
• Quando usar molas
• Configuração
• Diretrizes de salto
• Interrupção
• A Regra de Ouro
• Técnicas de Otimização
• CSS vs. JavaScript
• Acessibilidade
• prefere movimento reduzido
• Diretrizes de Movimento Reduzido
• Considerações sobre dispositivos de toque
• Dicas práticas
• Fluxograma de Decisão de Alívio
• Arquivos de referência

Habilidades relacionadas

• agent-browservercel-labs/open-agents
• ai-sdkvercel-labs/open-agents
• baseline-uivercel-labs/open-agents
• chat-sdkvercel-labs/open-agents

Tradução e escopo

Este guia de leitura seleciona trechos do texto fixado a montante.SKILL.mdA tradução foi feita com auxílio de ferramentas. Este não é um manual completo nem garante compatibilidade comprovada. Leia o original e os arquivos referenciados antes de usar.

Esta introdução refere-se à versão fixada abaixo; a atividade atual do repositório e o tempo de coleta são mostrados separadamente.

Fonte fixada

Leia o original ↗

Fonte recuperada

2026-10-29T09:32:23Z

Commit de origem

cf865e94de7729751c747171785b6ce57e7b178c

Fonte SHA-256

dfcfd66edc4b09e22416c8be59160fd15259965e5f6f1cfa098858d7b23d4332