106.9K+Scarica
Vai alla guida all’uso
UI Animationdi mblode

UI Animation Skill.

Crea, correggi e misura animazioni d’interfaccia con uno scopo.

  • Animazione UI
  • Movimento ridotto
Scarica OpenDesignVedi la guida all'uso
Esame della fonte · ui-animationSKILL.md
Attività Crea, correggi e misura animazioni d’interfaccia con uno scopo. Risultati Implementazione o revisione mirata del movimento UI. Prima di iniziare Fornisci codice o riferimento registrato chiaro, frequenza dell’azione e dispositivi. Definisci revisione, modifica o ricostruzione misurata.
Sintesi editoriale · fonte esaminata il 2026-11-02 · non è un esempio generato

01 Funzionalità

Crea, correggi e misura animazioni d’interfaccia con uno scopo

Esamina transizioni, molle e gesti UI o ricostruisci movimenti da registrazioni, verificando interruzioni, frame rate e movimento ridotto.

Flusso di lavoro basato sulla fonteNon è un benchmark di esecuzione

L'approccio di lavoro

ui-animation copre creazione, revisione e misurazione del movimento UI. Parte da scopo e frequenza dell’interazione, poi sceglie tempi e implementazione. Feedback, orientamento e continuità guidano le decisioni; le azioni frequenti devono restare immediate.

Un secondo flusso misura il movimento da una registrazione. Estrae fotogrammi, segue un elemento e adatta curve elastiche o di accelerazione prima di generare parametri. Apertura e chiusura sono separate; una nuova registrazione si confronta con il riferimento per verificare le fasi ricostruite.

Risultati attesi

  • Implementazione o revisione mirata del movimento UI.
  • Specifica misurata di una curva o molla da registrazione.
  • Consegna con tempi, fasi delle proprietà e osservazioni di validazione.
Vedi il brief di esempio

Dal brief alla revisione

  1. 01
    Decidere perché lo stato si muove

    Identifica esigenze di feedback, continuità o orientamento e frequenza dell’azione. Preserva completamento immediato e focus da tastiera.

  2. 02
    Scegliere o misurare

    Seleziona una ricetta o estrai la registrazione al frame rate reale e adatta il movimento pertinente. Separa apertura e chiusura.

  3. 03
    Testare l’interazione reale

    Alterna rapidamente, esamina al rallentatore e prova touch e movimento ridotto. Per ricostruzioni, confronta una registrazione dell’implementazione con l’originale.

02 Quando usarlo

Quando usarla

Fornisci codice o riferimento registrato chiaro, frequenza dell’azione e dispositivi. Definisci revisione, modifica o ricostruzione misurata.

Adatta a

  • Un’interazione sembra sbagliataLa fonte indirizza lentezza, salti e attivazioni errate verso verifiche specifiche dei tempi o dell’implementazione.
  • Serve riprodurre un effetto registratoGli script consentono misure invece di stimare una molla a occhio.

Limiti da verificare

  • Non definisce tutta la direzione visivaPalette, tipografia e design generale del prodotto sono fuori dall’ambito principale.
  • Le misure richiedono dipendenzeIl flusso usa FFmpeg e pacchetti Python per tracking e adattamento delle curve.
  • L’adattamento non prova equivalenzaFotogrammi persi, frame rate variabile e movimenti multifase possono rendere fuorviante una curva unica.

Cosa portare

  • Componente o registrazioneFornisci il codice da migliorare o una clip chiara dell’interazione di riferimento.
  • Comportamento e frequenzaDescrivi azione, stato risultante e ripetizione.
  • Piattaforma previstaSpecifica stack, dispositivi e requisiti di accessibilità.

03 Decisioni importanti

Le decisioni importanti

  1. Scopo prima della decorazione

    Il quadro decisionale può rifiutare animazioni inutili oltre a consigliarle.

  2. Gestione delle interruzioni

    Alternanze rapide rivelano problemi di riavvio e cambio di destinazione invisibili nella riproduzione normale.

  3. Consegna misurata

    Tempi distinti per proprietà e parametri adattati rendono più precisa la ricostruzione.

04 Esempio di brief

Prova un brief mirato

Il brief di esempio qui sotto non è stato testato. Controlla la configurazione della skill prima di usarlo.

Esamina la fonte e la configurazione

Fornisci il codice da migliorare o una clip chiara dell’interazione di riferimento.

File sorgente originale
https://github.com/mblode/agent-skills/blob/391508702523088f564fecfdd95ce76304efb117/skills/ui-animation/SKILL.md

Il riferimento seguente apre le istruzioni originali. Verifica la configurazione del repository prima di usarle: non è un comando di installazione.

Inizia con un solo risultato

Adatta ambito, materiale di partenza e vincoli di questo brief prima di eseguire la skill.

Brief di esempio
Usa ui-animation per diagnosticare il pannello laterale nella registrazione e nel componente React forniti. Misura apertura e chiusura separatamente al frame rate reale. Individua se il ritardo percepito deriva dalla curva, da una pausa iniziale o da lavoro che blocca il thread principale. Mantieni immediato il focus da tastiera e preserva il comportamento. Proponi la modifica minima, poi prova alternanza rapida e movimento ridotto. Se adatti una molla o curva, riporta i limiti e confronta una registrazione della versione rivista con il riferimento, senza dichiarare equivalenza visiva dai soli parametri.

Esamina il risultato

Confronta l'output effettivo con questi criteri osservabili.

  • Prova cambi rapidi di destinazione e rallentatore in entrambe le direzioni.
  • Allinea frame rate di estrazione e adattamento.
  • Esegui la stessa attività con movimento ridotto e touch.

OpenDesign offre uno spazio di lavoro di design locale per agenti di programmazione. Questa scheda non significa che la skill sia inclusa nel pacchetto né che i suoi strumenti esterni, le credenziali e le dipendenze software siano compresi.

Scarica OpenDesignLeggi la guida rapida

05 Fonte e licenza

Fonte e licenza

Questa pagina descrive la revisione della fonte fissata e collegata qui sotto. Comportamento e requisiti upstream possono cambiare.

Proprietario della fonte
mblode
Repository
mblode/agent-skills
File della skill
SKILL.md
Licenza
MIT
Snapshot esaminato
2026-11-02 · 391508702523
Sintesi editoriale della fonte
Crea, correggi e misura animazioni d’interfaccia con uno scopo.

Sintesi originale di OpenDesign, basata sulla fonte collegata. Le stelle del repository sono un indicatore di popolarità datato, non l'uso della skill né un punteggio di qualità.

06 Domande prima di iniziare

Domande prima di iniziare

Può trovare dove aggiungere animazioni?

Sì. L’esplorazione riporta opportunità secondo scopo e frequenza, incluse proposte rifiutate. Esplorare non autorizza implementare.

Perché misurare apertura e chiusura separatamente?

Spesso hanno tempi e carattere diversi. La fonte avverte di non adattare una direzione e semplicemente invertirla.

Una regola CSS copre tutto il movimento ridotto?

Non necessariamente. La fonte precisa che il movimento gestito da JavaScript richiede una propria gestione del movimento ridotto e va testato nell’interazione reale.

OpenDesign

Tieni insieme il brief e il lavoro di design.

Tieni brief, materiali di partenza e lavoro di design insieme in uno spazio di lavoro locale. Controlla la configurazione della skill prima di aggiungerla al tuo flusso di lavoro.

Scarica OpenDesignSfoglia le skill di design
File sorgente originale
https://github.com/mblode/agent-skills/blob/391508702523088f564fecfdd95ce76304efb117/skills/ui-animation/SKILL.md