Animate Skill for Muse **Nom FR:** Skill Animation UI pour Muse **Tagline EN:** UI motion that feels right — decided, not decorated **Tagline FR:** Des animations d'interface qui tombent juste **Créateur:** @emilkowalski **URL source:** https://github.com/emilkowalski/skills/blob/main/skills/animate/SKILL.md **Licence — Type — Catégorie — Mots-clés:** MIT — Skill — Design — UI animation, motion design, easing curves, spring physics, CSS transitions, WAAPI, micro-interactions, reduced motion, design engineering **Description EN:** Curated by Skill Harbor — a free, open-source skill (MIT) by @emilkowalski, listed here with credit to its creator. Encodes Emil Kowalski's animation philosophy as a construction skill: it turns a request for motion into an implementation that would survive a strict review, by running a decision sequence in order — should it animate at all (the frequency gate: 100+ uses/day means never), what is its purpose (feedback, spatial consistency, state indication, delight only for rare moments), the cheapest tool that works (CSS transition, @starting-style, CSS animation, WAAPI, or Motion for springs), transform-and-opacity-only properties, exact easing curves and duration tables (never hand-rolled beziers), interruption and exit handling, and reduced-motion plus hover gating shipped with every animation. Ready-to-build recipes cover buttons, dropdowns, tooltips, modals, drawers, toasts, accordions, and more, and a "never ship" checklist blocks the classic defects (transition: all, scale(0) entrances, ease-in on UI, ungated hover motion). Discovered via skills.sh. Honest note: it is opinionated on purpose — "this shouldn't animate" is a valid and celebrated answer; it covers web UI only (React Native is a separate skill, animate-expo); it writes implementation code, not design mockups; and feel-checking still needs a human eye (play at 2–5× duration, DevTools animation inspector, real-device gestures). Skill Harbor never reviews the code, review it yourself before use. Not verified. **Description FR:** Sélectionné par Skill Harbor — un skill gratuit et open-source (MIT) par @emilkowalski, listé ici avec crédit à son créateur. Encode la philosophie d'animation d'Emil Kowalski en skill de construction : il transforme une demande de mouvement en implémentation capable de passer une revue stricte, en suivant une séquence de décision dans l'ordre — faut-il animer du tout (le filtre de fréquence : 100+ utilisations/jour = jamais), quel est le but (retour d'action, cohérence spatiale, indication d'état, délice réservé aux moments rares), l'outil le moins cher qui convient (transition CSS, @starting-style, animation CSS, WAAPI, ou Motion pour les ressorts), des propriétés limitées à transform et opacity, des courbes d'easing et des durées exactes issues de tables (jamais de béziers improvisés), la gestion des interruptions et des sorties, et le respect de prefers-reduced-motion plus le filtrage hover livrés avec chaque animation. Des recettes prêtes à construire couvrent boutons, menus déroulants, infobulles, modales, tiroirs, toasts, accordéons et plus, et une liste « à ne jamais livrer » bloque les défauts classiques (transition: all, entrées en scale(0), ease-in sur l'UI, hover non filtré). Découvert via skills.sh. Note honnête : il est volontairement dogmatique — « ça ne devrait pas animer » est une réponse valide et célébrée ; il couvre uniquement l'UI web (React Native est un skill séparé, animate-expo) ; il écrit du code d'implémentation, pas des maquettes ; et le contrôle du ressenti exige toujours un œil humain (lecture à 2–5× la durée, inspecteur d'animations des DevTools, gestes sur appareil réel). Skill Harbor ne vérifie jamais le code, examinez-le vous-même avant usage. Non vérifié. **Install prompt EN:** ``` Prerequisites: a web project (HTML/CSS/JS or a component framework) where the animation will live; optionally a motion library (Motion / motion.dev) if the task needs springs or gesture-driven motion — the skill picks the cheapest tool that works. No API keys. Install "Animate Skill for Muse" for me. Builds UI animations that feel right using Emil Kowalski's animation philosophy: a decision sequence (should it animate, purpose, cheapest tool, transform/opacity-only properties, exact easing and duration tables, interruption/exit handling, reduced-motion and hover gating), ready-to-build recipes, and a never-ship defect checklist. Repository: https://github.com/emilkowalski/skills/blob/main/skills/animate/SKILL.md 1. Fetch the SKILL.md file (and any helper files: RECIPES.md) from the repository path into a temporary folder and summarize what it does in one or two sentences. 2. Safety check: review the SKILL.md and scripts for anything suspicious (unexpected network calls, shell commands, credential harvesting). This repo should contain zero secrets in code, credentials only via the secure vault, allowed hosts declared in the SKILL.md. Verify that holds here; STOP on any red flag and tell me. 3. Install it as a skill: copy SKILL.md and its helper files into the agent's skills directory, in a folder named "animate". 4. Verify with no network calls: frontmatter valid, files in place. 5. Report what was installed, where, and what I still need to do myself (e.g. have my web project ready and tell me which element or interaction should move). GitHub is optional: if I have a GitHub account or the gh CLI, you may use it; otherwise public access is fine. Never require it unless it's in the prerequisites above. Rules: don't touch anything outside the temp folder and the install target. If anything looks off, stop and ask me. ``` **Install prompt FR:** ``` Prérequis : un projet web (HTML/CSS/JS ou framework de composants) où vivra l'animation ; optionnellement une bibliothèque de mouvement (Motion / motion.dev) si la tâche exige des ressorts ou des gestes — le skill choisit l'outil le moins cher qui convient. Aucune clé API. Installe-moi « Skill Animation UI pour Muse ». Construit des animations d'interface qui tombent juste selon la philosophie d'Emil Kowalski : une séquence de décision (faut-il animer, but, outil le moins cher, propriétés limitées à transform/opacity, tables exactes d'easing et de durées, gestion des interruptions et sorties, reduced-motion et filtrage hover), des recettes prêtes à construire, et une liste de défauts à ne jamais livrer. Dépôt : https://github.com/emilkowalski/skills/blob/main/skills/animate/SKILL.md 1. Récupérez le fichier SKILL.md (et les fichiers auxiliaires : RECIPES.md) depuis le chemin du dépôt dans un dossier temporaire et résumez ce qu'il fait en une ou deux phrases. 2. Contrôle de sécurité : examinez le SKILL.md et les scripts pour tout contenu suspect (appels réseau inattendus, commandes shell, récolte d'identifiants). Ce dépôt ne doit contenir aucun secret dans le code ; les identifiants passent uniquement par le coffre sécurisé, les hôtes autorisés sont déclarés dans le SKILL.md. Vérifiez que c'est bien le cas ; STOP sur le moindre signal d'alerte et prévenez-moi. 3. Installez-le comme skill : copiez SKILL.md et ses fichiers auxiliaires dans le répertoire des skills de l'agent, dans un dossier nommé « animate ». 4. Vérifiez sans appels réseau : frontmatter valide, fichiers en place. 5. Indiquez ce qui a été installé, où, et ce qu'il me reste à faire moi-même (ex. avoir mon projet web prêt et préciser quel élément ou interaction doit bouger). GitHub est optionnel : si j'ai un compte GitHub ou le CLI gh, vous pouvez l'utiliser ; sinon, l'accès public suffit. Règles : ne touchez à rien en dehors du dossier temporaire et de la cible d'installation. Si quelque chose semble anormal, arrêtez et demandez-moi. ```

Des animations d'interface qui tombent juste **Créateur:** @emilkowalski **URL source:** https://github.com/emilkowalski/skills/blob/main/skills/animate/SKILL.md **Licence — Type — Catégorie — Mots-clés:** MIT — Skill — Design — UI animation, motion design, easing curves, spring physics, CSS transitions, WAAPI, micro-interactions, reduced motion, design engineering **Description EN:** Curated by Skill Harbor — a free, open-source skill (MIT) by @emilkowalski, listed here with credit to its creator. Encodes Emil Kowalski's animation philosophy as a construction skill: it turns a request for motion into an implementation that would survive a strict review, by running a decision sequence in order — should it animate at all (the frequency gate: 100+ uses/day means never), what is its purpose (feedback, spatial consistency, state indication, delight only for rare moments), the cheapest tool that works (CSS transition, @starting-style, CSS animation, WAAPI, or Motion for springs), transform-and-opacity-only properties, exact easing curves and duration tables (never hand-rolled beziers), interruption and exit handling, and reduced-motion plus hover gating shipped with every animation. Ready-to-build recipes cover buttons, dropdowns, tooltips, modals, drawers, toasts, accordions, and more, and a "never ship" checklist blocks the classic defects (transition: all, scale(0) entrances, ease-in on UI, ungated hover motion). Discovered via skills.sh. Honest note: it is opinionated on purpose — "this shouldn't animate" is a valid and celebrated answer; it covers web UI only (React Native is a separate skill, animate-expo); it writes implementation code, not design mockups; and feel-checking still needs a human eye (play at 2–5× duration, DevTools animation inspector, real-device gestures). Skill Harbor never reviews the code, review it yourself before use. Not verified. **Description FR:** Sélectionné par Skill Harbor — un skill gratuit et open-source (MIT) par @emilkowalski, listé ici avec crédit à son créateur. Encode la philosophie d'animation d'Emil Kowalski en skill de construction : il transforme une demande de mouvement en implémentation capable de passer une revue stricte, en suivant une séquence de décision dans l'ordre — faut-il animer du tout (le filtre de fréquence : 100+ utilisations/jour = jamais), quel est le but (retour d'action, cohérence spatiale, indication d'état, délice réservé aux moments rares), l'outil le moins cher qui convient (transition CSS, @starting-style, animation CSS, WAAPI, ou Motion pour les ressorts), des propriétés limitées à transform et opacity, des courbes d'easing et des durées exactes issues de tables (jamais de béziers improvisés), la gestion des interruptions et des sorties, et le respect de prefers-reduced-motion plus le filtrage hover livrés avec chaque animation. Des recettes prêtes à construire couvrent boutons, menus déroulants, infobulles, modales, tiroirs, toasts, accordéons et plus, et une liste « à ne jamais livrer » bloque les défauts classiques (transition: all, entrées en scale(0), ease-in sur l'UI, hover non filtré). Découvert via skills.sh. Note honnête : il est volontairement dogmatique — « ça ne devrait pas animer » est une réponse valide et célébrée ; il couvre uniquement l'UI web (React Native est un skill séparé, animate-expo) ; il écrit du code d'implémentation, pas des maquettes ; et le contrôle du ressenti exige toujours un œil humain (lecture à 2–5× la durée, inspecteur d'animations des DevTools, gestes sur appareil réel). Skill Harbor ne vérifie jamais le code, examinez-le vous-même avant usage. Non vérifié. **Install prompt EN:** ``` Prerequisites: a web project (HTML/CSS/JS or a component framework) where the animation will live; optionally a motion library (Motion / motion.dev) if the task needs springs or gesture-driven motion — the skill picks the cheapest tool that works. No API keys. Install "Animate Skill for Muse" for me. Builds UI animations that feel right using Emil Kowalski's animation philosophy: a decision sequence (should it animate, purpose, cheapest tool, transform/opacity-only properties, exact easing and duration tables, interruption/exit handling, reduced-motion and hover gating), ready-to-build recipes, and a never-ship defect checklist. Repository: https://github.com/emilkowalski/skills/blob/main/skills/animate/SKILL.md 1. Fetch the SKILL.md file (and any helper files: RECIPES.md) from the repository path into a temporary folder and summarize what it does in one or two sentences. 2. Safety check: review the SKILL.md and scripts for anything suspicious (unexpected network calls, shell commands, credential harvesting). This repo should contain zero secrets in code, credentials only via the secure vault, allowed hosts declared in the SKILL.md. Verify that holds here; STOP on any red flag and tell me. 3. Install it as a skill: copy SKILL.md and its helper files into the agent's skills directory, in a folder named "animate". 4. Verify with no network calls: frontmatter valid, files in place. 5. Report what was installed, where, and what I still need to do myself (e.g. have my web project ready and tell me which element or interaction should move). GitHub is optional: if I have a GitHub account or the gh CLI, you may use it; otherwise public access is fine. Never require it unless it's in the prerequisites above. Rules: don't touch anything outside the temp folder and the install target. If anything looks off, stop and ask me. ``` **Install prompt FR:** ``` Prérequis : un projet web (HTML/CSS/JS ou framework de composants) où vivra l'animation ; optionnellement une bibliothèque de mouvement (Motion / motion.dev) si la tâche exige des ressorts ou des gestes — le skill choisit l'outil le moins cher qui convient. Aucune clé API. Installe-moi « Skill Animation UI pour Muse ». Construit des animations d'interface qui tombent juste selon la philosophie d'Emil Kowalski : une séquence de décision (faut-il animer, but, outil le moins cher, propriétés limitées à transform/opacity, tables exactes d'easing et de durées, gestion des interruptions et sorties, reduced-motion et filtrage hover), des recettes prêtes à construire, et une liste de défauts à ne jamais livrer. Dépôt : https://github.com/emilkowalski/skills/blob/main/skills/animate/SKILL.md 1. Récupérez le fichier SKILL.md (et les fichiers auxiliaires : RECIPES.md) depuis le chemin du dépôt dans un dossier temporaire et résumez ce qu'il fait en une ou deux phrases. 2. Contrôle de sécurité : examinez le SKILL.md et les scripts pour tout contenu suspect (appels réseau inattendus, commandes shell, récolte d'identifiants). Ce dépôt ne doit contenir aucun secret dans le code ; les identifiants passent uniquement par le coffre sécurisé, les hôtes autorisés sont déclarés dans le SKILL.md. Vérifiez que c'est bien le cas ; STOP sur le moindre signal d'alerte et prévenez-moi. 3. Installez-le comme skill : copiez SKILL.md et ses fichiers auxiliaires dans le répertoire des skills de l'agent, dans un dossier nommé « animate ». 4. Vérifiez sans appels réseau : frontmatter valide, fichiers en place. 5. Indiquez ce qui a été installé, où, et ce qu'il me reste à faire moi-même (ex. avoir mon projet web prêt et préciser quel élément ou interaction doit bouger). GitHub est optionnel : si j'ai un compte GitHub ou le CLI gh, vous pouvez l'utiliser ; sinon, l'accès public suffit. Règles : ne touchez à rien en dehors du dossier temporaire et de la cible d'installation. Si quelque chose semble anormal, arrêtez et demandez-moi. ```

Version :