optimize

Vue d'ensemble

La compétence optimize est conçue pour aider les développeurs à diagnostiquer et résoudre systématiquement les problèmes de performance UI dans les applications web. Elle se concentre sur l'amélioration de la vitesse de chargement, l'efficacité du rendu, la fluidité des animations, l'optimisation des images et la réduction de la taille des bundles. Utilisez optimize lorsque vous rencontrez des interfaces lentes, saccadées ou peu réactives, ou lorsque les utilisateurs signalent des problèmes de performance tels que des temps de chargement longs ou des interactions non réactives.

Qui devrait utiliser optimize ?

• Les développeurs frontend souhaitant améliorer la rapidité et la réactivité des sites.
• Les équipes confrontées à des plaintes d'utilisateurs concernant des interfaces lentes ou non réactives.
• Les projets avec de gros bundles JavaScript, des images non optimisées ou des problèmes d'animation.

Problèmes résolus par optimize

• Chargements initiaux lents et temps élevé avant interaction.
• Images volumineuses ou non compressées impactant la performance.
• Rendu inefficace ou thrashing de mise en page.
• Saccades et irrégularités dans les animations.
• Bundles JavaScript ou CSS trop volumineux.

Comment utiliser

Étapes d'installation

1. Installez la compétence optimize avec la commande suivante :

   npx skills add https://github.com/pbakaus/impeccable --skill optimize

2. Commencez par lire le fichier SKILL.md pour une vue d'ensemble structurée du workflow et des recommandations.

3. Consultez les fichiers complémentaires tels que README.md, AGENTS.md, metadata.json ainsi que les dossiers rules/, resources/, references/ ou scripts/ pour plus de contexte et d'outils d'aide.

Application d'optimize dans votre projet

• Évaluer la performance : Mesurez les indicateurs actuels comme les Core Web Vitals (LCP, FID/INP, CLS), le temps de chargement, la taille des bundles et la performance à l'exécution. Identifiez les goulots d'étranglement spécifiques — qu'ils proviennent d'images volumineuses, de JavaScript lourd ou d'un rendu inefficace.
• Élaborer un plan d'optimisation : Priorisez les corrections selon leur impact. Concentrez-vous sur l'optimisation des images (formats modernes, compression, chargement paresseux), la réduction de la taille des bundles, et l'amélioration du rendu et des animations.
• Itérer et mesurer : Effectuez toujours des benchmarks avant et après les modifications pour vérifier que les optimisations ont l'effet escompté.

Fichiers suggérés à consulter

• SKILL.md (workflow principal et recommandations)

FAQ

Que fait la compétence optimize ?

La compétence optimize offre une méthode structurée pour diagnostiquer et corriger les problèmes de performance frontend, incluant les chargements lents, les retards de rendu, les problèmes d'animation et la taille importante des ressources.

Quand dois-je utiliser optimize ?

Utilisez optimize lorsque votre application semble lente, que les utilisateurs signalent des saccades ou des lenteurs, ou si vous souhaitez améliorer des indicateurs comme le temps de chargement et la réactivité.

Comment commencer ?

Installez la compétence avec la commande npx fournie, puis suivez les instructions dans SKILL.md pour évaluer et résoudre les points de blocage en performance.

Où puis-je trouver plus de détails ou des scripts ?

Consultez l'onglet Fichiers dans le dépôt pour accéder à des ressources supplémentaires, références et scripts d'aide pour accompagner votre workflow d'optimisation.