Gsap

frontend-dev est une compétence frontend-dev conçue pour créer des pages web soignées, prêtes pour la production, avec une UI haut de gamme, des animations cinématiques, des médias générés par IA, une rédaction persuasive et de l’art génératif. Utilisez-la pour les landing pages, les sites marketing, les pages produit, les dashboards et plus généralement tout travail frontend où la cohérence entre design, contenu et implémentation doit être préservée.

gsap-frameworks est le skill GSAP pour Vue, Nuxt, Svelte, SvelteKit et les autres frameworks non React. Il couvre la mise en place d’animations compatible avec le cycle de vie, les sélecteurs à portée limitée et le nettoyage au démontage, afin que les animations de composants se comportent correctement en Frontend Development.

gsap-performance est la compétence GSAP dédiée aux performances pour le développement frontend. Utilisez-la pour réduire les saccades, éviter le thrashing de layout, privilégier les transforms et l’opacity, utiliser `will-change` avec discernement, et regrouper les lectures et écritures pour des animations plus fluides à 60 fps. Elle est idéale si vous avez besoin de conseils pratiques sur l’usage de gsap-performance dans du code d’animation existant.

gsap-react est la compétence GSAP officielle pour React et Next.js. Elle couvre `useGSAP()`, les refs, `gsap.context()`, les sélecteurs limités au scope et le nettoyage, afin de créer des animations sûres dans React sans bugs liés au rerender ou au démontage. Utilisez ce guide gsap-react quand vous avez besoin d’aide pour l’installation et l’utilisation en développement frontend.

Skill gsap-utils pour les helpers utilitaires GSAP : clamp, mapRange, normalize, interpolate, random, snap, toArray, wrap et pipe. Découvrez comment utiliser gsap-utils dans le développement frontend, notamment quand privilégier les fonctions réutilisables, comment intégrer ces helpers dans des tweens et des callbacks, et pourquoi aucune registration n’est nécessaire.

gsap-plugins aide les développeurs frontend à choisir, installer et utiliser correctement les plugins GSAP. Le contenu couvre l’enregistrement des plugins, les imports et des conseils pratiques pour ScrollToPlugin, ScrollSmoother, Flip, Draggable, Inertia, Observer, SplitText, ScrambleText, les plugins SVG, les outils d’easing et GSDevTools. Utilisez-le lorsque vous avez besoin d’un guide clair sur gsap-plugins plutôt que de conseils génériques sur l’animation.

gsap-scrolltrigger est le skill GSAP officiel pour les animations liées au défilement, le pinning, le comportement de scrub et les déclencheurs basés sur le viewport. Utilisez-le en Frontend Development si vous avez besoin d’un guide gsap-scrolltrigger, d’aide à l’installation ou d’un usage concret de gsap-scrolltrigger pour le parallax, les sections épinglées et les animations pilotées par le scroll.

gsap-timeline vous aide à créer des séquences de timeline GSAP avec des étapes ordonnées, des recouvrements, des labels et une lecture imbriquée. Utilisez le skill gsap-timeline lorsque l’objectif est de coordonner plusieurs animations, en particulier pour le design d’interface, les parcours d’onboarding ou des systèmes de motion réutilisables. Il inclut des conseils d’installation et d’utilisation de gsap-timeline pour structurer clairement l’enchaînement.

Le skill gsap-core est le guide officiel GSAP pour l’utilisation de l’API d’animation de base, notamment `gsap.to()`, `from()`, `fromTo()`, les easing, le stagger, les defaults et les animations responsives. Utilisez-le pour travailler avec gsap-core en JavaScript vanilla, React, Vue, Svelte, DOM, SVG et dans les workflows de UI design, surtout si vous avez besoin d’un guide fiable sur gsap-core.

hyperframes-registry vous aide à installer et à brancher des éléments de registre HyperFrames réutilisables avec moins d’hésitation. Utilisez-le pour exécuter `hyperframes add`, distinguer les blocks des components, fusionner des extraits, relier des blocks dans `index.html` et suivre les mappages de chemins de `hyperframes.json` pour l’implémentation design et la découverte du registre.

gsap est une référence pratique d’animation pour les compositions HyperFrames. Elle vous aide à choisir entre `gsap.to()`, `from()`, `fromTo()` et `gsap.timeline()`, puis à appliquer les bons `vars`, `easing`, `stagger`, transformations et patterns de performance. Utilisez ce guide gsap quand vous avez besoin d’animations prêtes à implémenter pour des entrées, des transitions et des effets de design réutilisables.

hyperframes est un skill de workflow pour créer des compositions vidéo en HTML dans HyperFrames. Utilisez-le pour les cartes de titre, les superpositions, les sous-titres, les voix off, les mouvements réactifs à l'audio et les transitions de scène lorsque vous avez besoin de hyperframes structurés, pensés d'abord en code, pour le montage vidéo. Il privilégie les choix de mise en page, de timing et d'animation plutôt que de simples requêtes vidéo génériques basées sur du prompt.

gpt-taste est une skill orientée design pour créer des pages UI soignées, avec une direction artistique éditoriale, une discipline des espacements et des animations GSAP. Utilisez la skill gpt-taste pour des pages marketing, des landing pages et des sites vitrine lorsque vous voulez plus de variété dans les mises en page, un meilleur contrôle de la typographie et moins de patterns front-end génériques. Le guide inclut des notes d’installation et d’utilisation pour une mise en œuvre pratique.

fixing-motion-performance aide à auditer et corriger les problèmes de performance des animations UI sans changer votre stack par défaut. Utilisez-la pour les travaux frontend lorsque les animations saccadent, que les effets liés au scroll coûtent cher, ou que les transitions déclenchent du travail de layout, de paint ou de compositing. Elle transforme les bugs d’animation en corrections claires, au niveau du code.