106.9K+Baixar
Ir para o guia de uso
UI Animationpor mblode

UI Animation Skill.

Crie, depure e meça motion de interface com propósito.

  • Motion de UI
  • Movimento reduzido
Baixar OpenDesignVer guia de uso
Análise da fonte · ui-animationSKILL.md
Tarefa Crie, depure e meça motion de interface com propósito. Entregáveis Uma implementação ou revisão direcionada de motion de interface. Antes de começar Forneça o código do componente ou gravação clara de referência, com frequência da ação e dispositivos de destino. Defina se a tarefa é revisão, mudança de implementação ou reconstrução medida.
Resumo editorial · fonte revisada em 2026-11-02 · não é um exemplo gerado

01 Funcionalidades

Crie, depure e meça motion de interface com propósito

Revise transições, molas e gestos de UI ou ajuste movimento a partir de gravações, verificando interrupção, taxa de quadros e movimento reduzido.

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

A abordagem de trabalho

ui-animation cobre criação, revisão e medição de motion de interface. Começa pelo propósito e frequência da interação, depois escolhe timing e implementação. Feedback, orientação e continuidade guiam a decisão; ações frequentes devem continuar imediatas.

Outro fluxo mede movimento de uma gravação. Extrai quadros, rastreia um elemento e ajusta curvas de mola ou easing antes de gerar parâmetros de implementação. Abertura e fechamento são tratados separadamente; uma nova gravação é comparada à referência para verificar se as fases reconstruídas foram preservadas.

Entregas esperadas

  • Uma implementação ou revisão direcionada de motion de interface.
  • Uma especificação de easing ou mola medida a partir de gravação.
  • Uma entrega com timing, fases de propriedades e observações de validação.
Ver o briefing de exemplo

Do briefing à revisão

  1. 01
    Decida por que o estado deve se mover

    Identifique necessidades de feedback, continuidade ou orientação e a frequência da ação. Preserve conclusão imediata da tarefa e foco de teclado.

  2. 02
    Escolha ou meça o movimento

    Selecione a receita do componente ou extraia uma gravação na taxa real e ajuste o movimento relevante. Mantenha abertura e fechamento como fases distintas.

  3. 03
    Teste a interação real

    Alterne rapidamente, inspecione reprodução lenta e teste toque e movimento reduzido. Na reconstrução, compare uma gravação da implementação com a original.

02 Quando usar

Quando usar

Forneça o código do componente ou gravação clara de referência, com frequência da ação e dispositivos de destino. Defina se a tarefa é revisão, mudança de implementação ou reconstrução medida.

Bom encaixe

  • Uma interação parece erradaA fonte direciona lentidão, saltos e disparos incorretos a verificações específicas de timing ou implementação.
  • É preciso reproduzir um efeito gravadoOs scripts de medição oferecem um caminho além de adivinhar uma mola visualmente.

Limites a verificar

  • Não define toda a direção visualPaleta, tipografia e design mais amplo do produto ficam fora do escopo principal.
  • Medição exige dependênciasA rota de gravação por scripts usa FFmpeg e pacotes Python para rastreamento e ajuste de curvas.
  • Um ajuste não prova equivalênciaQuadros perdidos, taxa variável e movimento com várias fases podem tornar uma única curva ajustada enganosa.

Traga estas entradas

  • Componente ou gravaçãoForneça o código a melhorar ou um clipe claro da interação de referência.
  • Comportamento e frequênciaDescreva a ação do usuário, o estado resultante e a frequência de repetição.
  • Plataforma de destinoEspecifique stack, dispositivos e requisitos de acessibilidade.

03 Decisões importantes

Decisões importantes

  1. Propósito antes de decoração

    O sistema de decisão pode rejeitar animação desnecessária, além de recomendá-la.

  2. Tratamento de interrupções

    Alternâncias rápidas revelam problemas de reinício e redirecionamento que a reprodução normal não mostra.

  3. Entrega baseada em medições

    Timings separados por propriedade e parâmetros ajustados tornam a reconstrução mais precisa.

04 Exemplo de briefing

Experimente um briefing específico

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

Confira a fonte e a configuração

Forneça o código a melhorar ou um clipe claro da interação de referência.

Arquivo-fonte original
https://github.com/mblode/agent-skills/blob/391508702523088f564fecfdd95ce76304efb117/skills/ui-animation/SKILL.md

A referência abaixo abre as instruções originais. Confira a configuração do repositório antes de usá-las; não é um comando de instalação.

Comece com um entregável

Adapte o escopo, o material de origem e as restrições deste briefing antes de executar a skill.

Briefing de exemplo
Use ui-animation para diagnosticar a interação da gaveta na gravação e no componente React fornecidos. Meça abertura e fechamento separadamente na taxa de quadros real. Identifique se o atraso percebido vem do easing, de pausa inicial ou de trabalho bloqueando a thread principal. Mantenha foco de teclado imediato e o comportamento atual. Proponha a menor mudança de implementação; depois teste alternância rápida e movimento reduzido. Se ajustar mola ou curva, informe limites do ajuste e compare uma gravação da interação revisada com a referência, sem alegar correspondência visual apenas pelos parâmetros.

Inspecione o resultado

Compare o resultado real com estes critérios observáveis.

  • Teste redirecionamento rápido e reprodução lenta nas duas direções.
  • Iguale as taxas de quadros da extração e do ajuste de curvas.
  • Exercite a mesma tarefa com movimento reduzido e entrada por toque.

OpenDesign oferece um espaço de trabalho de design local para agentes de programação. Esta listagem não significa que a skill esteja incluída nem que suas ferramentas externas, credenciais e dependências de software estejam incluídas.

Baixar OpenDesignLer o guia rápido

05 Fonte e licença

Fonte e licença

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

Responsável pela fonte
mblode
Repositório
mblode/agent-skills
Arquivo da skill
SKILL.md
Licença
MIT
Versão revisada
2026-11-02 · 391508702523
Resumo editorial da fonte
Crie, depure e meça motion de interface com propósito.

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

Pode encontrar lugares para adicionar animação?

Sim. A rota de descoberta relata oportunidades conforme propósito e frequência, incluindo sugestões rejeitadas. Descoberta sozinha não autoriza implementação.

Por que medir abertura e fechamento separadamente?

Frequentemente têm timing e caráter diferentes. A fonte alerta contra ajustar uma direção e apenas invertê-la.

Uma regra CSS de movimento reduzido cobre tudo?

Não necessariamente. A fonte observa que motion controlado por JavaScript precisa de tratamento próprio e teste na interação real.

OpenDesign

Mantenha o briefing e o trabalho de design juntos.

Mantenha seu briefing, o material de origem e o trabalho de design juntos em um espaço de trabalho local. Verifique a configuração da própria skill antes de adicioná-la ao seu fluxo de trabalho.

Baixar OpenDesignExplorar skills de design
Arquivo-fonte original
https://github.com/mblode/agent-skills/blob/391508702523088f564fecfdd95ce76304efb117/skills/ui-animation/SKILL.md