From 55076b9ad0a41f35e6ae13a8b4ae9f0ad833ed8c Mon Sep 17 00:00:00 2001 From: Zhongwei Li Date: Sun, 30 Nov 2025 08:27:20 +0800 Subject: [PATCH] Initial commit --- .claude-plugin/plugin.json | 12 +++ README.md | 3 + plugin.lock.json | 45 +++++++++++ skills/optimizing-assets/SKILL.md | 121 ++++++++++++++++++++++++++++++ 4 files changed, 181 insertions(+) create mode 100644 .claude-plugin/plugin.json create mode 100644 README.md create mode 100644 plugin.lock.json create mode 100644 skills/optimizing-assets/SKILL.md diff --git a/.claude-plugin/plugin.json b/.claude-plugin/plugin.json new file mode 100644 index 0000000..eb719fc --- /dev/null +++ b/.claude-plugin/plugin.json @@ -0,0 +1,12 @@ +{ + "name": "leapmultix-skill-optimizing-assets", + "description": "Skill optimizing-assets 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..f92872e --- /dev/null +++ b/README.md @@ -0,0 +1,3 @@ +# leapmultix-skill-optimizing-assets + +Skill optimizing-assets from LeapMultix diff --git a/plugin.lock.json b/plugin.lock.json new file mode 100644 index 0000000..6d52315 --- /dev/null +++ b/plugin.lock.json @@ -0,0 +1,45 @@ +{ + "$schema": "internal://schemas/plugin.lock.v1.json", + "pluginId": "gh:jls42/leapmultix:leapmultix-marketplace/skills/optimizing-assets", + "normalized": { + "repo": null, + "ref": "refs/tags/v20251128.0", + "commit": "802b88f7c23421682b3dd6b0f021a71180c90d68", + "treeHash": "711b019855ff21ccc8e36e2d748dba88fd8420c7d9febb603deed82f000f323a", + "generatedAt": "2025-11-28T10:19:13.740927Z", + "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-optimizing-assets", + "description": "Skill optimizing-assets from LeapMultix", + "version": "1.0.0" + }, + "content": { + "files": [ + { + "path": "README.md", + "sha256": "d9b62b8513abee6d2aeca20753558d06daf8a445d42efa1322ad11eb54bd1521" + }, + { + "path": ".claude-plugin/plugin.json", + "sha256": "8719b2e4860cbab8f829d88ae290366e6df63b3bb63c70077f92e9d9db4425f1" + }, + { + "path": "skills/optimizing-assets/SKILL.md", + "sha256": "f35dd0c0d830a988fd8d6677fcb71c6f8bbba9e3e11761b8473837ed3c323934" + } + ], + "dirSha256": "711b019855ff21ccc8e36e2d748dba88fd8420c7d9febb603deed82f000f323a" + }, + "security": { + "scannedAt": null, + "scannerVersion": null, + "flags": [] + } +} \ No newline at end of file diff --git a/skills/optimizing-assets/SKILL.md b/skills/optimizing-assets/SKILL.md new file mode 100644 index 0000000..5131c2a --- /dev/null +++ b/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