Initial commit

skills/managing-animations/SKILL.md

@@ -0,0 +1,118 @@
+---
+name: managing-animations
+description: Creates and manages CSS and JavaScript animations (keyframes, transitions, sprite animations, canvas animations). Use when adding visual animations or user feedback
+allowed-tools: Read, Write, Grep, Glob, Bash
+---
+
+# Système d'Animation
+
+Crée animations fluides (CSS, JS, sprites, particules) pour feedback utilisateur et jeux.
+
+## Table des matières
+
+- [Quand utiliser](#quand-utiliser)
+- [Types d'animations](#types-danimations)
+- [Patterns essentiels](#patterns-essentiels)
+- [Optimisations](#optimisations)
+- [Workflow](#workflow)
+- [Checklist](#checklist)
+- [En cas de doute](#en-cas-de-doute)
+
+## Quand utiliser
+
+- Feedback visuel (boutons, transitions)
+- Animations sprites (jeux arcade)
+- Transitions slides
+- Effets visuels (particules, explosions)
+- Micro-interactions UI
+- Animations canvas jeux
+
+## Types d'animations
+
+**CSS Transitions :**
+
+- Hover, focus, state changes
+- Propriétés : transform, opacity (GPU), color, box-shadow
+- Easing : ease-out (UI), ease-in-out (transitions), linear (rotations)
+
+**CSS Keyframes :**
+
+- Pulse, shake, bounce, rotate, fade
+- Animations répétables sans événement
+- Trouve keyframes existantes dans CSS
+
+**JavaScript (requestAnimationFrame) :**
+
+- Animations complexes programmées
+- `performance.now()` → progress (0-1) → easing → interpolate
+- Batch multiple animations dans un RAF
+
+**Sprite Animations (Canvas) :**
+
+- Frame-based (FPS adaptatif)
+- Sprite sheets, frame index qui boucle
+- Directional sprites, callbacks (onLoop, onComplete)
+
+**Particle Systems :**
+
+- Effets visuels (explosions, étincelles)
+- Particle class (position, velocity, life, color)
+- Max 100 simultanées, object pooling, cleanup
+
+Examine animationen existantes dans le code.
+
+## Patterns essentiels
+
+- **Feedback :** Correct (vert, pulse), Wrong (rouge, shake), Coins (trajectoires)
+- **Transitions slides :** TranslateX, fade, cleanup, historique
+- **Accessibility :** Respecter `prefers-reduced-motion`, fallback simple
+- **Easing :** Linear, Quad, Cubic, Elastic, Bounce (trouve dans utils)
+
+## Optimisations
+
+**GPU Acceleration :**
+
+- Utiliser transform + opacity (pas left/top)
+- will-change: transform, opacity (retirer après)
+
+**Performance :**
+
+- Batch RAF multiple animations
+- Particules < 100 simultanées, cleanup chaque frame
+- 60 FPS obligatoire (profile DevTools)
+
+## Workflow
+
+1. **Choisir type :** CSS transition (simple), CSS keyframes (feedback), RAF (complexe), Sprite (jeu), Particles (effets)
+2. **Examiner existant :** Patterns, conventions, optimisations
+3. **Implémenter :** Suivre mêmes patterns, cleanup, 60 FPS
+4. **Tester :** Fluide, prefers-reduced-motion OK, mobile OK
+
+## Checklist
+
+- [ ] CSS pour animations simples
+- [ ] RAF pour animations complexes
+- [ ] transform + opacity (GPU)
+- [ ] prefers-reduced-motion respecté
+- [ ] Particules < 100, cleanup
+- [ ] Easing appropriée
+- [ ] 60 FPS maintenu
+- [ ] Testé mobile
+
+## En cas de doute
+
+**Règles absolues :**
+
+1. Examiner animations similaires dans code
+2. Prioriser CSS (simplicité + perf)
+3. JavaScript uniquement si nécessaire
+4. Profile DevTools (60 FPS OBLIGATOIRE)
+5. Toujours respecter prefers-reduced-motion
+
+**Références :**
+
+- CSS keyframes/transitions existantes
+- Feedback animations (coins, scores)
+- Slides transitions
+- Jeux arcade (sprites, particules)
+- Easing functions utils