commit b25181ad2af429fa04a3c001ff0f57eb2a262582 Author: Zhongwei Li Date: Sun Nov 30 08:27:17 2025 +0800 Initial commit diff --git a/.claude-plugin/plugin.json b/.claude-plugin/plugin.json new file mode 100644 index 0000000..314f6e9 --- /dev/null +++ b/.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" + ] +} \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..427fdb7 --- /dev/null +++ b/README.md @@ -0,0 +1,3 @@ +# leapmultix-skill-managing-animations + +Skill managing-animations from LeapMultix diff --git a/plugin.lock.json b/plugin.lock.json new file mode 100644 index 0000000..8988d16 --- /dev/null +++ b/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": [] + } +} \ No newline at end of file diff --git a/skills/managing-animations/SKILL.md b/skills/managing-animations/SKILL.md new file mode 100644 index 0000000..7a58d05 --- /dev/null +++ b/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