Skip to main content

motion-audit

Revisao read-only de motion - encontrar lugares que deveriam animar e nao animam, julgar animacoes existentes contra um padrao alto de craft, e produzir um plano priorizado de correcoes. Use para "o que poderia ser animado aqui", "revisa as animacoes", "o motion ta ruim" ou "faz isso parecer mais vivo". Propoe com valores exatos; nao implementa.

Zur Installation springen

Quellinformationen

Repository
brunoolf/frontend-craft
Letzte Quellaktivität
27. August 2026 um 18:21
Erkannte Sprache von SKILL.md
Portugiesisch
Sterne
0
Forks
0

Installationsoptionen

Standardmäßig ist der Prompt ausgewählt, der zuerst die Quelle prüft. Sie können zu einem direkten Befehl wechseln oder eine lokale Kopie herunterladen.

Quelldateien prüfen

Lesen Sie SKILL.md und alle von SkillsMP angezeigten Begleitdateien, bevor Sie sich für eine Installation entscheiden.

SKILL.md wird angezeigt

SKILL.md
Quellanweisungen · Schreibgeschützte Vorschau
name
motion-audit
description
Revisao read-only de motion - encontrar lugares que deveriam animar e nao animam, julgar animacoes existentes contra um padrao alto de craft, e produzir um plano priorizado de correcoes. Use para "o que poderia ser animado aqui", "revisa as animacoes", "o motion ta ruim" ou "faz isso parecer mais vivo". Propoe com valores exatos; nao implementa.
# Auditoria de motion Read-only. Produz achados e planos com valores exatos, prontos para outro agente executar. Não edita. Carregue `motion-principles` antes — é o critério contra o qual você julga. ## Três modos O pedido determina qual rodar. Não rode os três por padrão. ### Encontrar oportunidades *"O que poderia ser animado aqui?"* — varredura por movimento **ausente**. Procure, nesta ordem de valor: 1. **Continuidade quebrada.** Elemento que vira outro sem transição: item de lista abrindo em detalhe, card virando modal, valor que muda de lugar. Maior retorno que existe. 2. **Feedback ausente.** Ação sem confirmação visual. Botão que não reage à pressão. Item adicionado que aparece do nada. 3. **Orientação ausente.** Painel, gaveta ou popover que aparece sem vir de lugar nenhum. 4. **Mudança de estado sem transição** onde havia continuidade a preservar. **Rejeite mais do que propõe.** A maior parte de uma interface não deve animar. Uma proposta de motion para cada elemento é o mesmo erro que nenhuma. Para cada lugar aprovado, saiba dizer qual das cinco razões ele atende. Formato: **onde**, **qual razão**, **propriedade + duração + curva exatas**, **o que acontece com reduced-motion**. ### Revisar o existente *"Revisa as animações"* — julgamento contra o padrão. **A aprovação se ganha; o default é apontar.** | Verificar | Falha típica | |---|---| | Razão | Anima porque dá, não porque comunica | | Duração | Acima de 400ms sem razão; abaixo de 100ms virando piscada | | Curva | `linear` ou `ease-in-out` por omissão | | Simetria | Saída com a mesma duração da entrada (deve ser 70–80%) | | Distância | Deslocamento de 100px onde 16px bastava | | Densidade | Toda seção com a mesma entrada dramática | | Interrupção | Clicar no meio reinicia em vez de reverter | | Estado inicial | `opacity: 0` sem garantia de reversão | | Reduced-motion | Ausente, ou removendo tudo em vez de remover o deslocamento | | Performance | Propriedades de layout animadas; `backdrop-filter` em scroll; `will-change` permanente | | Cleanup | Timeline sem destruição no unmount | | Stagger | Sem teto — doze itens somando um segundo de espera | ### Planejar melhorias *"Melhora o motion do app"* — audita e produz um roteiro executável por outro agente, possivelmente com modelo mais barato. Cada item do plano precisa ser autossuficiente: arquivo e linha, o que está errado hoje, o valor exato que entra no lugar, e como verificar. Um plano que exige o executor julgar não é plano. Ordene por **impacto sobre esforço**. Consertar um `ease-in-out` global costuma render mais que qualquer animação nova. ## Formato de achado ``` [Prioridade] Arquivo:linha — o padrão nomeado Hoje: o que existe Problema: o critério violado Correção: propriedade, duração, curva, valores exatos Reduced: o comportamento sob prefers-reduced-motion Trata: fc-motion-engineer | fc-implementer ``` Prioridade: **Bloqueante** (quebra acessibilidade ou usabilidade) · **Alto** (a pessoa nota e a qualidade cai) · **Médio** (craft) · **Nota**. ## Regras **Nomeie o padrão, não o sintoma.** "As animações estão ruins" não é achado. "Onze componentes usam `transition: all 0.3s ease-in-out`; `all` anima propriedades não intencionais e a curva é o default" é. **Não confunda gosto com defeito.** Uma escolha deliberada de motion que difere do seu padrão, mas serve a direção registrada em `DESIGN.md`, não é achado. **Ausência de motion pode ser certa.** Um dashboard quieto costuma ser um bom dashboard. Não trate a falta de animação como defeito automático.
Auf GitHub ansehen