106.9K+Scarica
Vai alla guida all’uso
CSS Animationdi neonwatty

CSS Animation Skill.

Crea dimostrazioni HTML/CSS basate sull’interfaccia di un’applicazione reale.

  • CSS
  • Fotogrammi chiave
Scarica OpenDesignVedi la guida all'uso
Esame della fonte · css-animationSKILL.md
Attività Crea dimostrazioni HTML/CSS basate sull’interfaccia di un’applicazione reale. Risultati Un brief strutturato con token di design, geometria e tempi delle scene. Prima di iniziare Il flusso originale richiede Claude-in-Chrome e un’app accessibile. Un altro ambiente deve avere un percorso di ispezione equivalente o dichiarare le evidenze mancanti.
Sintesi editoriale · fonte esaminata il 2026-11-02 · non è un esempio generato

01 Funzionalità

Crea dimostrazioni HTML/CSS basate sull’interfaccia di un’applicazione reale

Studia un’app, scrivi un brief dimostrativo e crea animazioni HTML/CSS con composizioni desktop/mobile separate e verifica degli stati congelati.

Flusso di lavoro basato sulla fonteNon è un benchmark di esecuzione

L'approccio di lavoro

css-animation crea dimostrazioni nel browser di funzionalità reali. Prima studia linguaggio visivo e layout dell’app, poi pianifica una sequenza prima-azione-dopo oppure un carosello di schermate. Il risultato è un’animazione HTML/CSS autonoma accompagnata da un brief.

La revisione separa la correttezza degli stati statici dalla temporizzazione. Congela e controlla i layout prima e dopo, quindi riproduce il ciclo completo per regolare il ritmo. Desktop e mobile sono composizioni separate: quella mobile semplifica la scena e sostituisce il cursore con un indicatore di tocco.

Risultati attesi

  • Un brief strutturato con token di design, geometria e tempi delle scene.
  • Una demo di funzionalità o un carosello di schermate in HTML autonomo.
  • File desktop e mobile separati quando sono richiesti entrambi.
Vedi il brief di esempio

Dal brief alla revisione

  1. 01
    Studia l’interfaccia reale

    Esamina l’app accessibile e gli stati pertinenti. Registra colori, tipografia, spaziatura e geometria reale nel viewport previsto.

  2. 02
    Pianifica e costruisci la dimostrazione

    Scegli una trasformazione di singola funzionalità o un carosello di schermate. Scrivi il brief, calcola le posizioni e usa CSS con un piccolo controllo del ciclo basato su classi.

  3. 03
    Esamina gli stati fissi, poi i tempi

    Congela gli stati importanti per controllare layout ed etichette. Una volta corretti, riproduci il ciclo intero e regola la fase specifica troppo veloce o lenta.

02 Quando usarlo

Quando usarla

Il flusso originale richiede Claude-in-Chrome e un’app accessibile. Un altro ambiente deve avere un percorso di ispezione equivalente o dichiarare le evidenze mancanti.

Adatta a

  • Una funzionalità reale richiede una demo marketingIl flusso ricava il linguaggio visivo dall’app invece di inventare un’interfaccia generica.
  • Il mobile richiede una spiegazione mirataLa fonte semplifica esplicitamente il layout invece di rimpicciolire la scena desktop.

Limiti da verificare

  • La ricerca presuppone strumenti browserIl flusso originale richiede Claude-in-Chrome e un’app accessibile. Un altro ambiente deve avere un percorso di ispezione equivalente o dichiarare le evidenze mancanti.
  • HTML è il risultato principaleL’output documentato è un’animazione web, non un GIF o MP4 codificato.
  • Il brief è un punto di revisioneLa fonte chiede l’approvazione del brief prima della generazione; l’autorizzazione già concessa dall’utente e il flusso locale determinano comunque come gestire la revisione.

Cosa portare

  • Accesso all’appFornisci URL della funzionalità o anteprima locale e accesso agli stati necessari.
  • Storia della funzionalitàIdentifica condizione iniziale, azione e risultato visibile utile.
  • Viewport e destinazioneSpecifica desktop, mobile o entrambi e dove verranno usati i file.

03 Decisioni importanti

Le decisioni importanti

  1. Aspetto specifico dell’app

    Colori, tipografia e geometria misurati rendono riconoscibile la demo.

  2. Revisione riproducibile

    Il brief registra layout e tempi insieme all’HTML.

  3. Problemi di revisione separati

    Gli stati congelati rivelano difetti di layout; la riproduzione mostra problemi di ritmo.

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 URL della funzionalità o anteprima locale e accesso agli stati necessari.

File sorgente originale
https://github.com/neonwatty/css-animation-skill/blob/68580a34101c83c7a6c4d28005d2d5ea243bcf63/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 css-animation per dimostrare il raggruppamento nella mia app di pianificazione locale. Esamina la funzionalità reale prima di preparare una sequenza prima-azione-dopo: elementi non raggruppati, azione dell’utente, risultato organizzato. Rispetta colori e tipografia dell’app e mantieni le etichette reali. Crea un brief desktop e una composizione mobile separata focalizzata sull’azione centrale. Sul mobile usa un indicatore di tocco. Esamina gli stati congelati iniziale, di elaborazione e finale prima di regolare l’intero ciclo. Consegna brief e file HTML e dichiara i comportamenti dell’app che non hai potuto ispezionare.

Esamina il risultato

Confronta l'output effettivo con questi criteri osservabili.

  • Confronta layout congelati ed etichette con l’applicazione reale.
  • Verifica separatamente i limiti del contenuto nelle composizioni desktop e mobile.
  • Guarda tutto il ciclo dopo le correzioni dei singoli stati per valutarne il ritmo.

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
neonwatty
Repository
neonwatty/css-animation-skill
File della skill
SKILL.md
Licenza
MIT
Snapshot esaminato
2026-11-02 · 68580a34101c
Sintesi editoriale della fonte
Crea dimostrazioni HTML/CSS basate sull’interfaccia di un’applicazione reale.

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

Il risultato è un video?

Il risultato principale è HTML/CSS autonomo con JavaScript minimo. La codifica video non rientra nell’impostazione predefinita documentata.

Desktop e mobile possono condividere un layout ridimensionato?

La fonte raccomanda file separati e una semplificazione mobile intenzionale, con meno elementi e indicatori di azione orientati al tocco.

E se l’app non è ispezionabile?

Le istruzioni originali dichiarano la mancanza degli strumenti browser e consentono di partire dalla descrizione dell’utente. Il risultato non deve dichiarare fedeltà osservata a un’app inaccessibile.

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/neonwatty/css-animation-skill/blob/68580a34101c83c7a6c4d28005d2d5ea243bcf63/SKILL.md