Initial commit

skills/optimizing-assets/SKILL.md

@@ -0,0 +1,121 @@
+---
+name: optimizing-assets
+description: Optimizes images, sprites, sounds and media to reduce bandwidth and improve loading. Use before adding large assets or during mobile optimization
+allowed-tools: Read, Grep, Glob, Bash
+---
+
+# Asset Optimizer
+
+Optimise images, sprites, sons, vidéos pour chargement rapide et performance mobile.
+
+## Table des matières
+
+- [Quand utiliser](#quand-utiliser)
+- [Objectifs de taille](#objectifs-de-taille)
+- [Principes essentiels](#principes-essentiels)
+- [Workflow](#workflow)
+- [Checklist](#checklist)
+- [En cas de doute](#en-cas-de-doute)
+
+## Quand utiliser
+
+- Avant ajouter images/sprites
+- Assets > 100 KB
+- Optimisation mobile (3G/4G)
+- Audit Lighthouse Performance
+- PWA bande passante
+- Images non responsive
+
+## Objectifs de taille
+
+- Images PNG: < 50 KB, JPG: < 30 KB
+- Audio: < 50 KB (96-128 kbps)
+- Sprites: < 100 KB total
+- Total first load: < 2 MB
+- Lighthouse Performance: > 90
+
+## Principes essentiels
+
+**Images :**
+
+- Compresse (TinyPNG, Squoosh): -30-50% PNG, -20-40% JPG
+- WebP + fallback PNG/JPG (-25% vs JPG)
+- Responsive (1x, 2x, 3x via srcset)
+- Lazy loading (loading="lazy" ou Intersection Observer)
+
+**Audio :**
+
+- Bitrate: 96 kbps effets, 128 kbps musique
+- Formats: MP3 + OGG/WebM (compatibilité)
+- Preload sons critiques
+
+**Sprites :**
+
+- Combiner en sheets (moins requêtes HTTP)
+- SVG icônes (scalable, modifiable CSS)
+- Optimize avec SVGO
+
+**Cache :**
+
+- cache-updater.js (versioning auto)
+- responsive-image-loader.js (chargement adapté densité)
+
+## Workflow
+
+1. **Analyser :** `npm run assets:analyze`
+2. **Compresser :** Images TinyPNG/Squoosh, audio bitrate
+3. **Intégrer :** Respecter patterns existants (loaders, versioning)
+4. **Vérifier :** `npm run assets:diff`, Lighthouse > 90
+
+## Checklist
+
+**Images :**
+
+- [ ] Compressées (TinyPNG/Squoosh)
+- [ ] WebP + fallback PNG/JPG
+- [ ] Responsive si > 50 KB (srcset)
+- [ ] Lazy loading si hors-viewport
+- [ ] Alt text présent
+- [ ] Versioning cache-updater.js
+
+**Audio :**
+
+- [ ] Bitrate optimisé (96-128 kbps)
+- [ ] Formats multiples (MP3 + OGG)
+- [ ] < 50 KB par fichier
+- [ ] Preload si critique
+
+**Général :**
+
+- [ ] assets:analyze exécuté
+- [ ] assets:diff vérifié
+- [ ] Lighthouse > 90
+- [ ] First load < 2 MB
+
+## En cas de doute
+
+**Règles absolues :**
+
+1. Compresse TOUJOURS (TinyPNG/Squoosh)
+2. WebP + fallback PNG/JPG
+3. Versioning via cache-updater.js
+4. Lighthouse > 90 OBLIGATOIRE
+
+**Outils :**
+
+- TinyPNG/Squoosh - Compression (web)
+- ffmpeg - Audio/vidéo (CLI)
+- Lighthouse - Vérification
+
+**Modules clés :**
+
+- responsive-image-loader.js (9 KB)
+- cache-updater.js (10 KB)
+- npm run assets:\*
+
+**Où chercher :**
+
+- responsive-image-loader.js - Chargement images
+- cache-updater.js - Versioning
+- assets/ - Organisation actuelle
+- npm run assets:analyze - État