Animation

remotion-video-creation est un skill centré sur Remotion pour le travail vidéo avec React. Il aide à réduire les erreurs de rendu grâce à 29 règles couvrant les animations, les assets, l’audio, les sous-titres, les graphiques, les compositions et les transitions. À utiliser pour les workflows de montage vidéo, les explications sur modèle, les clips pour les réseaux sociaux et les motion graphics pilotés par les données.

manim-video vous aide à planifier et produire des vidéos explicatives propres, basées sur Manim, pour des graphiques, des workflows, des schémas système, des démonstrations produit et des visuels de lancement. Utilisez le skill manim-video lorsque vous voulez une explication animée précise avec un workflow centré sur les scènes, plutôt qu’un montage type face caméra. Il inclut des étapes pratiques du guide manim-video pour l’installation, la planification des scènes et le rendu.

frontend-slides vous aide à créer des présentations HTML riches en animations, à partir de zéro ou en convertissant des fichiers PowerPoint. Utilisez le skill frontend-slides pour des conférences, des pitch decks, des ateliers, des démos internes et frontend-slides pour la conception d’interface quand vous voulez explorer visuellement, obtenir un rendu navigateur sans dépendance et des slides qui tiennent sur une seule vue.

slack-gif-creator est une skill orientée code pour créer des GIF animés compatibles avec Slack, avec des helpers Python pour générer les frames, optimiser et valider. Servez-vous-en pour installer les dépendances, créer des boucles avec GIFBuilder et exporter des GIF d’emoji ou de message respectant les contraintes de Slack en taille, timing et couleurs.

ui-ux-pro-max est une skill complète pour le design UI/UX assisté par IA. Elle offre un accompagnement structuré sur les layouts, styles, systèmes de couleurs, typographie et règles UX pour projets web et mobile. Parfaite pour les développeurs et équipes cherchant des décisions design concrètes sur React, Next.js, Vue, Svelte, Tailwind, shadcn/ui, SwiftUI, React Native, Flutter et HTML/CSS. Utilisez-la pour planifier, revoir et améliorer vos interfaces avec une intelligence design sélectionnée.

La skill interaction-design aide les équipes à concevoir et mettre en œuvre des animations d’interface utiles, des micro-interactions, des transitions, des états de chargement et des patterns de feedback, avec des références pratiques orientées React et des conseils d’usage concrets.

react-native-design est une skill ciblée pour les patterns d’interface React Native, avec une couverture de la mise en forme via StyleSheet, de React Navigation typé et de l’usage de Reanimated 3 pour des écrans cross-platform.

overdrive est une skill GitHub conçue pour les projets de design UI ambitieux, avec un fort accent sur le contexte, une planification orientée proposition et une qualité d’interaction remarquable. Utilisez-la pour installer et appliquer overdrive afin de créer des transitions cinématographiques, des interfaces réactives et des expériences produit à fort impact.

Utilisez la skill delight pour apporter une touche soignée à l’UI, des micro-interactions et de la personnalité aux états de succès, de chargement, de vide et d’onboarding, sans nuire à l’utilisabilité ni à la concentration.

overdrive est une skill que l’utilisateur peut invoquer pour un design UI ambitieux, afin de pousser les interfaces au-delà des composants standard. Elle nécessite d’abord le contexte /frontend-design, puis demande de proposer des concepts avant de construire des interactions ciblées à fort impact.

La skill optimize aide à diagnostiquer et à améliorer les problèmes de performances UI sur le chargement, le rendu, les animations, les images, la taille du bundle et le comportement à l’exécution, avec une approche centrée d’abord sur la mesure.

La skill delight aide à apporter de la joie mesurée, de la personnalité et un niveau de finition subtil aux travaux de design d’interface. Utilisez-la pour enrichir les états de réussite, les états vides, les temps de chargement et les interactions, avec des conseils adaptés au contexte sur l’installation, la configuration et l’usage de delight.

Utilisez la skill animate pour analyser une fonctionnalité UI et planifier des animations, micro-interactions et transitions réellement utiles. Elle aide à repérer les mouvements qui améliorent le feedback, la clarté, la hiérarchie visuelle et le plaisir d’usage, avec le contexte de design requis depuis /frontend-design et une attention portée aux performances comme à l’accessibilité.

overdrive est une skill GitHub dédiée au design UI ambitieux. Elle aide les équipes à choisir et concevoir des interactions à fort impact, adaptées au contexte. Utilisez-la pour planifier des animations marquantes, des interfaces exigeantes en performances et des parcours avancés soignés, avec le travail de conception requis avant l’implémentation.

Le skill delight aide les équipes UI à ajouter des micro-interactions, du copy et des moments de feedback bien dosés pour rendre les interfaces plus chaleureuses et mémorables. Il convient surtout à la finition d’écrans ou de parcours précis, pas à une refonte complète. Utilisez delight avec un contexte /frontend-design préalable, et lancez /teach-impeccable d’abord si nécessaire.

Utilisez la skill animate pour passer en revue une fonctionnalité et ajouter des animations intentionnelles, des micro-interactions et des effets de mouvement qui améliorent la clarté, le feedback et la finition. Idéale pour le design d’interface avec des objectifs précis, un contexte de conception clair et des contraintes de performance.

shader-dev est un skill GLSL pratique pour des visuels temps réel à la ShaderToy. Utilisez le skill shader-dev pour créer ou déboguer du ray marching, des scènes SDF, l’éclairage, des particules, le mouvement fluide, le post-traitement et le shader-dev pour la conception d’interface, avec moins d’approximation qu’avec un prompt générique.

Utilisez le skill remotion pour transformer des écrans de projet Stitch en vidéos de démonstration soignées, avec transitions, zooms et superpositions de texte. Il inclut les étapes d’installation, des fichiers d’exemple et un guide remotion reproductible pour le montage vidéo et des compositions prêtes au rendu.

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.