CSS Animation
Génère des animations autonomes de démo de fonctionnalités HTML/CSS et de carrousel.
Testé · Fonctionne
Ce que fait
Recherche une application en direct via Claude-in-Chrome pour extraire son langage de conception et sa géométrie de mise en page, interroge l'utilisateur, puis génère un brief structuré plus une animation autonome HTML/CSS (démo de fonctionnalité ou carrousel multi-scène), itérant à travers une boucle de révision de gel-inspection-feedback jusqu'à approbation. Se déclenche sur 'animation css', 'animer cette fonctionnalité', 'créer une présentation css', ou une demande de démo visuelle basée sur CSS d'une fonctionnalité d'application.
Rapport de test
A construit deux fois la même animation 'marquer la tâche comme terminée' et a rendu les deux en direct dans un navigateur : les règles obligatoires de la compétence (JS de basculement de classe uniquement, association opacité+visibilité d'élément caché, easing spring, passage de jetons de langage de conception) ont produit une couche de polissage de coche/badge/curseur que la base (JS de style inline, pas de jetons, fondu linéaire) manquait clairement — une différence concrète, capturée par capture d'écran, pas juste une revendication.
Testé le: 2026-07-16 · Claude Code 2.x (agent harness)
Installation
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
Commandes et exemples de prompts
/css-animationGénère des animations autonomes de démo de fonctionnalités HTML/CSS et de carrousel.
Les skills se déclenchent sur des demandes en langage courant — aucune commande à retenir. Après installation, des prompts comme ceux-ci l'activent (en anglais) :
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