·auto-animate
</>

auto-animate

Configurazione testata in produzione per AutoAnimate (@formkit/auto-animate): una libreria di animazione drop-in a configurazione zero che aggiunge automaticamente transizioni fluide quando gli elementi DOM vengono aggiunti, rimossi o spostati. Questa abilità dovrebbe essere utilizzato durante la creazione di interfacce utente che necessitano di animazioni semplici e automatiche per elenchi, fisarmoniche, toast o convalida di moduli messaggi senza la complessità delle librerie di animazioni complete. Da utilizzare quando: si aggiungono animazioni fluide a elenchi dinamici, si creano interfacce di filtro/ordinamento, si creano componenti a fisarmonica, implementare notifiche di avviso popup, animare messaggi di convalida dei moduli, richiedere transizioni semplici senza codice di animazione, lavorare con Vite + React + Tailwind, eseguire la distribuzione su risorse statiche Workers Cloudflare o riscontrare errori SSR con librerie di animazione. Parole chiave: auto-animate, @formkit/auto-animate, formkit, animazione zero-config, animazioni automatiche, animazione drop-in, animazioni di elenchi, animazione a fisarmonica, animazione di toast, animazione di convalida del modulo, animazione leggera, animazione da 2 KB, preferisce il movimento ridotto, animazioni accessibili, animazione vite react, animazione lavoratori cloudflare, animazione sicura ssr

21Installazioni·1Tendenza·@jackspace

Installazione

$npx skills add https://github.com/jackspace/claudeskillz --skill auto-animate

Come installare auto-animate

Installa rapidamente la skill AI auto-animate nel tuo ambiente di sviluppo tramite riga di comando

  1. Apri il terminale: Apri il tuo terminale o strumento da riga di comando (Terminal, iTerm, Windows Terminal, ecc.)
  2. Esegui il comando di installazione: Copia ed esegui questo comando: npx skills add https://github.com/jackspace/claudeskillz --skill auto-animate
  3. Verifica l'installazione: Dopo l'installazione, la skill verrà configurata automaticamente nel tuo ambiente AI di coding e sarà pronta all'uso in Claude Code, Cursor o OpenClaw

Fonte: jackspace/claudeskillz.

Status: Production Ready ✅ Last Updated: 2025-11-07 Dependencies: None (works with any React setup) Latest Versions: @formkit/auto-animate@0.9.0

Issue #1: SSR/Next.js Import Errors Error: "Can't import the named export 'useEffect' from non EcmaScript module" Source: https://github.com/formkit/auto-animate/issues/55 Why It Happens: AutoAnimate uses DOM APIs not available on server Prevention: Use dynamic imports (see templates/vite-ssr-safe.tsx)

Issue #2: Conditional Parent Rendering Error: Animations don't work when parent is conditional Source: https://github.com/formkit/auto-animate/issues/8 Why It Happens: Ref can't attach to non-existent element Prevention:

Configurazione testata in produzione per AutoAnimate (@formkit/auto-animate): una libreria di animazione drop-in a configurazione zero che aggiunge automaticamente transizioni fluide quando gli elementi DOM vengono aggiunti, rimossi o spostati. Questa abilità dovrebbe essere utilizzato durante la creazione di interfacce utente che necessitano di animazioni semplici e automatiche per elenchi, fisarmoniche, toast o convalida di moduli messaggi senza la complessità delle librerie di animazioni complete. Da utilizzare quando: si aggiungono animazioni fluide a elenchi dinamici, si creano interfacce di filtro/ordinamento, si creano componenti a fisarmonica, implementare notifiche di avviso popup, animare messaggi di convalida dei moduli, richiedere transizioni semplici senza codice di animazione, lavorare con Vite + React + Tailwind, eseguire la distribuzione su risorse statiche Workers Cloudflare o riscontrare errori SSR con librerie di animazione. Parole chiave: auto-animate, @formkit/auto-animate, formkit, animazione zero-config, animazioni automatiche, animazione drop-in, animazioni di elenchi, animazione a fisarmonica, animazione di toast, animazione di convalida del modulo, animazione leggera, animazione da 2 KB, preferisce il movimento ridotto, animazioni accessibili, animazione vite react, animazione lavoratori cloudflare, animazione sicura ssr Fonte: jackspace/claudeskillz.

Fatti (pronti per citazione)

Campi e comandi stabili per citazioni AI/ricerca.

Comando di installazione
npx skills add https://github.com/jackspace/claudeskillz --skill auto-animate
Categoria
</>Sviluppo
Verificato
Prima apparizione
2026-02-01
Aggiornato
2026-03-11

Browse more skills from jackspace/claudeskillz

Risposte rapide

Che cos'è auto-animate?

Configurazione testata in produzione per AutoAnimate (@formkit/auto-animate): una libreria di animazione drop-in a configurazione zero che aggiunge automaticamente transizioni fluide quando gli elementi DOM vengono aggiunti, rimossi o spostati. Questa abilità dovrebbe essere utilizzato durante la creazione di interfacce utente che necessitano di animazioni semplici e automatiche per elenchi, fisarmoniche, toast o convalida di moduli messaggi senza la complessità delle librerie di animazioni complete. Da utilizzare quando: si aggiungono animazioni fluide a elenchi dinamici, si creano interfacce di filtro/ordinamento, si creano componenti a fisarmonica, implementare notifiche di avviso popup, animare messaggi di convalida dei moduli, richiedere transizioni semplici senza codice di animazione, lavorare con Vite + React + Tailwind, eseguire la distribuzione su risorse statiche Workers Cloudflare o riscontrare errori SSR con librerie di animazione. Parole chiave: auto-animate, @formkit/auto-animate, formkit, animazione zero-config, animazioni automatiche, animazione drop-in, animazioni di elenchi, animazione a fisarmonica, animazione di toast, animazione di convalida del modulo, animazione leggera, animazione da 2 KB, preferisce il movimento ridotto, animazioni accessibili, animazione vite react, animazione lavoratori cloudflare, animazione sicura ssr Fonte: jackspace/claudeskillz.

Come installo auto-animate?

Apri il tuo terminale o strumento da riga di comando (Terminal, iTerm, Windows Terminal, ecc.) Copia ed esegui questo comando: npx skills add https://github.com/jackspace/claudeskillz --skill auto-animate Dopo l'installazione, la skill verrà configurata automaticamente nel tuo ambiente AI di coding e sarà pronta all'uso in Claude Code, Cursor o OpenClaw

Dov'è il repository sorgente?

https://github.com/jackspace/claudeskillz