animate-expopar Emil Kowalski

Animate Expo Skill.

Un skill Claude Code et Codex pour la conception d'applications mobiles : gestes, ressorts et transitions pour React Native et Expo.

Applications mobiles
Code UI

Télécharger OpenDesign Voir le guide d'utilisation

emilkowalski/skills · skills/animate-expo/SKILL.mdSKILL.md

--- name: animate-expo description: Build animations in React Native and Expo, making the decisions in the order that determines whether they feel right — should it animate, which thread it runs on, which properties, spring or timing, how the gesture hands off, how it degrades. Writes the implementation with Reanimated, Gesture Handler, Expo Router and expo-haptics. Use when animating anything in an Expo app, adding gestures, sheets, screen … --- ## Operating Posture ## Hard Rules ## The Build Sequence ## Setup that silently breaks motion ## 120fps ## Recipes

Entête et titres de section lus depuis le fichier source le 14/09/2026 · 17 458 caractères au total

01 Ce qu'il fait

Ce que fait le skill animate-expo dans Claude Code et Codex

Résumé, workflow et sorties, tous lus dans le SKILL.md du skill.

D'après le SKILL.mdLu le 14-09-2026 · pas une exécution enregistrée

Dans les termes du Skill

Un skill de construction pour le mouvement dans React Native et Expo. Il transforme une demande d'animation en une implémentation qui survit à la revue sur un appareil réel, en prenant les décisions dans l'ordre qui détermine si le résultat est juste : faut-il animer, sur quel thread cela s'exécute, quelles propriétés, ressort ou timing, comment le geste se transmet, comment le tout se dégrade.

Tout découle de trois faits du mobile : il n'y a pas de survol, il y a deux runtimes, et le doigt de l'utilisateur est sur l'élément. Il s'adresse à quiconque anime une app Expo, ajoute des gestes, des sheets, des transitions d'écran, un retour au toucher ou des haptiques, ou corrige un mouvement qui saccade sur l'appareil. Le code est écrit avec Reanimated, Gesture Handler, Expo Router et expo-haptics.

Ce qu'il produit

Le code d'implémentation lui-même, écrit directement plutôt que proposé sous forme d'options.
Un court résultat de contrôle indiquant le palier de fréquence et l'objectif nommé, y compris ce qui a été rejeté et pourquoi.
La ligne des ingrédients : outil, propriétés, un spring ou une courbe plus une durée, et le runtime sur lequel le travail s'exécute.
Une liste des points à vérifier sur l'appareil, car la transmission des gestes et le minutage de l'haptique ne peuvent pas se lire dans le code.

Voir l'exemple de prompt ↗

Fonctionnement

01
Verrouillez l’animation avant tout le reste
Une table de fréquences détermine si le mouvement a lieu ou non ; le palier supérieur s'arrête et n'écrit aucun code. Les changements d'onglet ne glissent jamais, car les onglets sont des pairs, non une hiérarchie.
02
Nommer l'objectif en un mot
Le skill impose un intent en un seul mot avant de continuer — feedback, cohérence spatiale, indication d'état, prévention d'un changement brusque, explication, ou delight, ce dernier réservé aux rares moments de première découverte.
03
Choisissez l'outil le moins cher qui fonctionne
Parcourez un tableau et arrêtez-vous à la première ligne qui convient : transition CSS, keyframes CSS, animation de mise en page, valeur partagée plus Gesture, puis stack natif, formSheet, NativeTabs, Link.Menu, RefreshControl, Lottie ou Skia.
04
Restreindre les propriétés animées
Transform et opacity ne coûtent rien ; tout le reste force un passage de mise en page qui relance Yoga sur le nœud et ses frères à chaque frame.
05
Choisissez Spring ou Timing à partir de Finger
Toute interaction déclenchée par un doigt reçoit un ressort afin que la vélocité se poursuive à travers une interruption ; tout le reste utilise une courbe de timing, jamais un ease-in.
06
Garder le frame hors du thread JS
Les valeurs partagées alimentent useAnimatedStyle au lieu de l'état React, et les appels au runtime RN sont reportés vers onEnd ou une réaction à seuil plutôt que déclenchés à l'intérieur d'une mise à jour de gesture.

02 Trouvez celui qui vous convient

Quand utiliser le skill animate-expo

Utilisez le skill animate-expo dans Claude Code ou Codex lorsque le travail est de la conception d'application mobile de ce type. La portée et les limites ci-dessous sont tirées du propre fichier du skill.

Bon choix

Animer n'importe quoi dans une application Expo, y compris les gestes, les sheets, les transitions d'écran, le retour au clic et les haptics.
Mouvement impliquant un doigt, où l'interruptibilité et le transfert de vélocité sont traités comme la base plutôt que comme une finition.
Une demande qui correspond à une des recettes nommées, pour laquelle vous devez partir de la recette plutôt que d'un fichier vierge.
Repenser les affordances web pour une plateforme sans survol, où les états de survol doivent devenir des appuis, des positions, ou disparaître.

Connaître les limites

Animation web, qui appartient à un autre skill.
Tester l'animation dans Expo Go, qui n'est pas un environnement de performance et masque les problèmes recherchés.
Les requêtes qui échouent au frequency gate — le skill nomme la raison et refuse d'écrire l'animation.
Projets encore sur l'ancienne architecture, car Reanimated 4 nécessite la New Architecture.

Quoi fournir

L'interaction et sa fréquenceLe niveau de fréquence décide si quoi que ce soit doit être construit ; les changements d'onglets, l'ouverture et la fermeture du clavier, le défilement et les bascules de paramètres se trouvent dans le niveau le plus élevé.
L'objectif, nommé en un motSans un objectif unique et identifiable, il n'y a pas de build.
Les packages dont le projet a besoin, installés via ExpoL'installation passe par le CLI Expo pour que les versions se résolvent contre le SDK du projet, ce qu'un simple npm install ne fera pas.

03 Dans le skill

Règles que le skill animate-expo donne à Claude Code et Codex

8 instructions concrètes, valeurs par défaut et limites que le SKILL.md fixe pour l'agent — la partie du fichier qui change le résultat.

Exécuter la séquence dans l'ordre
Les étapes 1 et 2 conditionnent tout ce qui suit, la fréquence et l'objectif nommé doivent donc être établis avant tout choix d'outil ou de propriété.
Reanimated, pas Core Animated
Core Animated ne peut pas être piloté par un geste sans traverser le bridge, et useNativeDriver refuse tout sauf transform et opacity.
Aucune valeur approximée
Les courbes et les configurations de spring doivent être prises dans les tableaux du fichier plutôt qu'inventées.
Le mouvement réduit livré avec l'animation
La gestion de l'accessibilité fait partie du même changement, pas d'un ticket ultérieur.
Juger le rendu uniquement sur une build de release
La vérification se fait sur l'appareil le plus lent que vous supportez, sur une build de release ; le simulateur et les builds de développement ne comptent pas.
Utiliser les deux paramètres de spring d'Apple
Les springs s'écrivent en duration plus dampingRatio plus velocity, pas mass, stiffness et damping ; le settle par défaut est { duration: 400, dampingRatio: 1 }, et overshootClamping: true quand un bord dur doit tenir.
Respecter la zone tactile
Minimum 44x44pt sur iOS et 48dp sur Android, obtenu avec hitSlop plutôt qu'en agrandissant le visuel, plus pressRetentionOffset pour que la dérive n'annule pas un appui.
Un retour haptique par action utilisateur
Les retours haptiques se déclenchent dans la même frame que le visuel, au moment causal, jamais lors du scroll ou par frame, et jamais comme seul retour.

04 Mettez-le en pratique

Installer animate-expo dans Claude Code ou Codex

Une commande npx skills add, puis une première tâche dans votre agent et une checklist pour le résultat.

Ajouter animate-expo à Claude Code, Codex ou votre agent

Exécutez-la dans votre projet ; l'installateur demande à quel agent l'ajouter.

Terminal

npx skills add https://github.com/emilkowalski/skills --skill animate-expo

Forme générique du CLI skills pour skills/animate-expo/SKILL.md ; le dépôt peut documenter son propre chemin.

Donner au skill une première tâche de conception d'application mobile

Rédigé dans les termes propres du skill ; remplacez les parties entre crochets par votre contenu.

Starter prompt

In my Expo app the [filter sheet] is a bottom sheet people open a few times a session, and dragging it down should dismiss it, snapping back if the drag was short. Add press feedback to the [row component] in the list and a selection haptic when the sheet detent catches. Keep all of it on the UI thread — nothing should stutter on a three-year-old Android — and ship reduced-motion handling in the same change.

Source : rédigé à partir du SKILL.md, dans les termes propres du skill.

Vérifiez le premier résultat

Ce que le SKILL.md lui-même présente comme un résultat correct :

Pilotez l'interaction à la main sur l'appareil : lancez-la d'un geste, interrompez-la en plein vol, inversez-la.
Vérifiez que CADisableMinimumFrameDurationOnPhone est présent pour les iPhone ProMotion, car les SDK Expo récents le définissent par défaut.
Vérifiez que le mouvement réduit dégrade vers moins et plus doux plutôt que vers zéro, en conservant l'explication d'opacité et de couleur.
Vérifiez d'abord les bloqueurs silencieux quand rien ne se lance : le plugin Babel worklets et l'enveloppement de l'app par GestureHandlerRootView.

Dans OpenDesign, importez animate-expo depuis son lien SKILL.md : Plugins → Add → Skill → Import from link, puis sélectionnez-le dans la barre supérieure.

Télécharger OpenDesign Lire le démarrage rapide

05 Open source, traçable

Source, licence et vérification

D'où proviennent les faits de cette page et quand ils ont été vérifiés pour la dernière fois.

Author: Emil Kowalski
Repository: github.com/emilkowalski/skills Branche main
Fichier du skill: skills/animate-expo/SKILL.md Somme de contrôle du contenu enregistrée lors de la vérification ; commit d23d7f8
License: MIT Depuis LICENSE.
Étoiles du dépôt: 37 516 Instantané GitHub pris le 2026-09-14 pour l'ensemble du dépôt emilkowalski/skills, qui contient 9 compétences dans ce catalogue. Ce n'est pas une note ou un compteur d'utilisation pour animate-expo.
Vérifié par OpenDesign: 2026-09-14 Le fichier source, le chemin, le texte de licence et le nombre d'étoiles ont été vérifiés. Non intégré dans OpenDesign main (vérifié le 2026-08-28) ; aucune exécution en conditions réelles n'a été enregistrée sur cette page.

Dans le SKILL.md

Posture opérationnelleAgissez comme l'ingénieur senior : décidez, énoncez la raison en une ligne, écrivez le code.
Règles strictesCinq points non négociables : ordre des séquences, Reanimated, valeurs mises en table, mouvement réduit, jugement en build de release.
La séquence de constructionNeuf étapes ordonnées, du filtre de fréquence aux propriétés, ressorts, thread et retours haptiques.
Une configuration qui casse le mouvement en silenceInstallation, plugin Babel, vue racine et architecture : les causes d'une animation qui ne se lance jamais.
120 fpsActiver CADisableMinimumFrameDurationOnPhone pour donner aux iPhone ProMotion un budget de 8 ms par image.
RecettesRenvoie à RECIPES.md pour le retour au toucher, les feuilles, le balayage, les en-têtes, l'UI clavier, les onglets.
À ne jamais livrerTableau à deux colonnes associant chaque motif interdit au remplacement à utiliser.
SortieDu code, plus quelques lignes sur le résultat du filtre, les ingrédients et ce qu'il faut vérifier au ressenti.
TonAffirmé et bref ; dites-le quand quelque chose ne devrait pas être animé du tout.

Description du skill lui-même

« Construire des animations dans React Native et Expo, en prenant les décisions dans l'ordre qui détermine si elles sont justes — doit-elle animer, sur quel thread elle s'exécute, quelles propriétés, spring ou timing, comment le geste se transmet, comment elle se dégrade. Écrit l'implémentation avec Reanimated, Gesture Handler, Expo Router et expo-haptics. Utiliser quand vous animez quoi que ce soit dans une app Expo, ajoutez des gestes, sheets, transitions d'écran, feedback de pression ou haptiques, ou corrigez un mouvement qui bégaie sur l'appareil. Pour l'animation web, utilisez `animate`. »

Description front-matter de SKILL.md. Le fichier complet fait environ 17 458 caractères. Lire le fichier complet sur GitHub.

06 Avant d'installer

Questions fréquentes sur la skill animate-expo

Les réponses proviennent du SKILL.md tel que lu le 2026-09-14, et non d'une exécution enregistrée.

Pourquoi Reanimated plutôt que l'API Animated du core ?

Animated du core ne peut pas être piloté par un geste sans traverser le bridge, et useNativeDriver refuse tout sauf transform et opacity. Les worklets Reanimated s'exécutent sur le thread UI et continuent même quand le JS est occupé.

Que se passe-t-il si l'interaction a lieu des dizaines de fois par jour ?

Le filtre ne renvoie aucune animation pour le palier de fréquence le plus élevé — utilisez la valeur par défaut de la plateforme, ou rien, et arrêtez-vous. L'animation est réservée aux moments occasionnels et rares : feuilles, modales, toasts et états de succès.

Animate Expo

Exécuter animate-expo sur une vraie tâche de conception d'application mobile.

Téléchargez OpenDesign, importez animate-expo depuis son lien SKILL.md, collez le prompt ci-dessus, et lisez le plan avant le résultat.

Télécharger OpenDesign Parcourir tous les skills

Terminal

npx skills add https://github.com/emilkowalski/skills --skill animate-expo

Ce que fait le skill animate-expo dans Claude Code et Codex

Dans les termes du Skill

Fonctionnement

Quand utiliser le skill animate-expo

Bon choix

Connaître les limites

Quoi fournir

Règles que le skill animate-expo donne à Claude Code et Codex

Exécuter la séquence dans l'ordre

Reanimated, pas Core Animated

Aucune valeur approximée

Le mouvement réduit livré avec l'animation

Juger le rendu uniquement sur une build de release

Utiliser les deux paramètres de spring d'Apple

Respecter la zone tactile

Un retour haptique par action utilisateur