Motion Foundations
Tokens de mouvement, presets de ressorts et règles d'animation accessibles pour React et Next.js.
- Quoi
- Tokens de mouvement, presets de ressorts et règles d'animation accessibles pour React et Next.js.
- Coût
- Gratuit
- Prérequis
- Utilisez « Fondations motion » avec votre Muse.
- Installation
- Copiez le prompt d’installation ci-dessous dans votre Muse — votre agent fait le reste.
Sélectionné par Skill Harbor : la couche fondation d'un système de mouvement pour React et Next.js, construit sur motion/react. Elle définit le vocabulaire partagé que chaque animation de l'app devrait parler : un objet motionTokens (durée, easing, distance, échelle), une carte de cinq presets de ressorts nommés, un garde shouldAnimate utilisé par tous les composants, des défauts conformes à l'accessibilité via useReducedMotion, et des états initiaux compatibles SSR sans aucun avertissement d'hydratation. Les principes sont stricts à dessein : le mouvement doit guider l'attention, communiquer un état ou préserver la continuité spatiale, sinon on le retire. La réactivité passe toujours avant la décoration. C'est la couche de base dont héritent les skills motion en aval, donc c'est celui à charger avant tout travail d'animation. Par @affaan-m, listé ici avec crédit à son créateur. Tiré du dépôt affaan-m/ECC (MIT). Bémols honnêtes : pur guide, rien à installer au-delà de la bibliothèque motion/react dans votre propre projet ; spécifique à React et Next.js, et les règles de mouvement réduit et de SSR supposent une cible web. Skill Harbor ne vérifie jamais le code, examinez-le vous-même avant usage.
Version :
Installation
Copiez le dossier d’installation ci-dessous, puis collez-le dans MuseOn scanne automatiquement chaque fiche et on signale tout ce qui semble louche, mais on ne peut pas relire chaque ligne du code de la communauté. Voici comment vérifier une création vous-même avant de l'installer.
Utilisez « Fondations motion » avec votre Muse. Prérequis : l'app Muse (mobile ou web), et un projet React ou Next.js avec la bibliothèque motion/react disponible. Skill de pur guide, rien à installer. 1. Ouvrez le skill : https://github.com/affaan-m/ECC/blob/main/skills/motion-foundations/SKILL.md et copiez le texte complet du SKILL.md. 2. Collez-le dans un chat avec Muse et ajoutez : « Mets en place la fondation motion pour [projet] : motionTokens, les cinq presets de ressorts, le garde shouldAnimate, et les défauts mouvement-réduit plus SSR-safe. » 3. Demandez à Muse de faire passer un composant par le pipeline complet (tokens, ressort, garde, vérification mouvement-réduit) comme implémentation de référence, puis d'appliquer la même forme partout ailleurs. Astuce : commencez chaque révision d'animation par le test en trois questions : guide-t-elle l'attention, communique-t-elle un état, préserve-t-elle la continuité spatiale ? Si non aux trois, retirez-la. Sécurité : un skill est du texte d'instructions ; il n'exécute rien tout seul. Relisez tout code avant de le committer, ne collez jamais de secrets dans un chat, et relisez tout ce que Muse propose avant qu'il n'agisse.
Enregistré dans vos installs récentes. Retrouvez-le à tout moment sur /connect.
Questions
Comment installer une création ?
Chaque fiche produit contient un prompt d’installation à copier-coller. Collez-le dans votre Muse et il installe la création pour vous — sans configuration manuelle.
Où va mon argent ?
Directement au vendeur. Skill Harbor ne traite jamais les paiements : le paiement se fait sur la page du vendeur, généralement via Stripe.
Que signifie le ✓ à côté du nom d’un créateur ?
Il signifie que nous avons confirmé l’identité de la personne derrière la fiche. Il ne dit rien sur le code lui-même — vérifiez toujours une création avant de l’installer.