CSS Animation
Genera animazioni demo di funzionalità e caroselli di walkthrough HTML/CSS autocontenuti.
Promosso
Cosa fa
Ricerca un'app live tramite Claude-in-Chrome per estrarre il suo linguaggio di design e la geometria del layout, intervista l'utente, quindi genera un brief strutturato più un'animazione HTML/CSS autocontenuta (demo di funzionalità o carosello multi-scena), iterando attraverso un ciclo di revisione freeze-inspect-feedback finché non approvata. Si attiva su richieste di 'animazione css', 'anima questa funzionalità', 'crea un walkthrough css' o una richiesta di una demo visiva basata su CSS di una funzionalità dell'app.
Rapporto di test
Costruite la stessa animazione 'segna attività come completata' due volte e renderizzate entrambe dal vivo in un browser: le regole obbligatorie della skill (JS solo per cambio classe, accoppiamento opacità+visibilità elementi nascosti, easing a molla, un passaggio di token del linguaggio di design) hanno prodotto uno strato di rifinitura con segno di spunta/badge/cursore che il baseline (JS inline-style, nessun token, dissolvenza lineare) chiaramente mancava — una differenza concreta, con screenshot, non solo una dichiarazione.
Testato il: 2026-07-16 · Claude Code 2.x (agent harness)
Installazione
git clone https://github.com/neonwatty/css-animation-skill cd css-animation-skill mkdir -p ~/.claude/skills/css-animation cp SKILL.md ~/.claude/skills/css-animation/SKILL.md
Comandi e prompt di esempio
/css-animationGenera animazioni demo di funzionalità e caroselli di walkthrough HTML/CSS autocontenuti.
Gli skill si attivano con richieste in linguaggio naturale, senza comandi da ricordare. Dopo l'installazione, prompt come questi lo attivano (in inglese):
Show me an animated walkthrough of how marking a task complete worksBuild a carousel walkthrough demo of our app's onboarding flowAnimate this feature so I can show it off on our landing page