Initial commit

.claude-plugin/plugin.json

@@ -0,0 +1,12 @@
+{
+  "name": "leapmultix-skill-managing-animations",
+  "description": "Skill managing-animations from LeapMultix",
+  "version": "1.0.0",
+  "author": {
+    "name": "Julien LE SAUX",
+    "email": "contact@jls42.org"
+  },
+  "skills": [
+    "./skills"
+  ]
+}

README.md

@@ -0,0 +1,3 @@
+# leapmultix-skill-managing-animations
+
+Skill managing-animations from LeapMultix

plugin.lock.json

@@ -0,0 +1,45 @@
+{
+  "$schema": "internal://schemas/plugin.lock.v1.json",
+  "pluginId": "gh:jls42/leapmultix:leapmultix-marketplace/skills/managing-animations",
+  "normalized": {
+    "repo": null,
+    "ref": "refs/tags/v20251128.0",
+    "commit": "11539123c199cd3b7a61a2b008ba6755856fe86c",
+    "treeHash": "9266b2a2c183a78e8cf06fc2a90ba0dd657c157dc04c9ae5092c1fddb4fdef5f",
+    "generatedAt": "2025-11-28T10:19:13.555736Z",
+    "toolVersion": "publish_plugins.py@0.2.0"
+  },
+  "origin": {
+    "remote": "git@github.com:zhongweili/42plugin-data.git",
+    "branch": "master",
+    "commit": "aa1497ed0949fd50e99e70d6324a29c5b34f9390",
+    "repoRoot": "/Users/zhongweili/projects/openmind/42plugin-data"
+  },
+  "manifest": {
+    "name": "leapmultix-skill-managing-animations",
+    "description": "Skill managing-animations from LeapMultix",
+    "version": "1.0.0"
+  },
+  "content": {
+    "files": [
+      {
+        "path": "README.md",
+        "sha256": "cc0a901a96a76b5dbb50918f237caa487c21ec4dca98625141cd2a3e9a741781"
+      },
+      {
+        "path": ".claude-plugin/plugin.json",
+        "sha256": "9a6aa4e2f2a6b7f3a3166e83080c54df50f96c7828a7b9c89e7f378f0e972bb4"
+      },
+      {
+        "path": "skills/managing-animations/SKILL.md",
+        "sha256": "688b135d47fc5021c261ba59709e61fdf24b80a7651ee1d12f0ef75a4d463de9"
+      }
+    ],
+    "dirSha256": "9266b2a2c183a78e8cf06fc2a90ba0dd657c157dc04c9ae5092c1fddb4fdef5f"
+  },
+  "security": {
+    "scannedAt": null,
+    "scannerVersion": null,
+    "flags": []
+  }
+}

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