What is the animate-expo skill?
The animate-expo skill is a SKILL.md plus RECIPES.md in emilkowalski/skills. It adapts Emil Kowalski's animation rules to React Native and Expo with Reanimated, Gesture Handler, Expo Router and expo-haptics. It covers springs, gestures, native navigation options, haptics and the two-runtime rule.
The animate-expo skill is the mobile counterpart to the web animate skill in Emil Kowalski's repository. It targets React Native and Expo projects that use Reanimated, Gesture Handler, Expo Router and expo-haptics.
It states three changes on mobile: there is no hover, there are two runtimes (the React Native runtime and the UI runtime), and gestures are the primary input. The rest of the skill follows from those.
What changes in your agent's output
- The agent applies the same frequency and purpose test as on the web, and tab switches never slide.
- It picks from a tool table that runs from Reanimated CSS-style transitions and layout animations to shared values with gestures, native stack options, formSheet, NativeTabs and Skia.
- Gesture and scroll handlers stay off the JavaScript thread: no
setStateinside them, andscheduleOnRNonly inonEnd. - Press feedback scales to 0.97 in 100 to 150ms, touch targets are 44 by 44 points, and haptics fire in the same frame as the visual.
Who the animate-expo skill is for
Best for
- Expo apps with bottom sheets, swipe-to-dismiss, press feedback or tab transitions.
- Agents that write gesture code with state updates on the wrong thread.
- Teams adding haptics with consistent rules.
Not for
- Web interfaces. Use animate for CSS and the browser.
- Auditing existing mobile motion in a codebase, which is improve-animations.
- Mobile screen design and layout. design-mobile-apps covers that.
Use it with UiChemy
UiChemy targets WordPress sites rather than native apps, so animate-expo is for a companion app, not the site. For the web build, UiChemy Composer or AI to WordPress gets you a site you can edit. Click Get Started on uichemy.com.
How to install Animate Expo Skill: React Native Animation for Agents
git clone https://github.com/emilkowalski/skills.gitClone the repository
Run
git clone https://github.com/emilkowalski/skills.git. The skill is the skills/animate-expo folder.Copy the skill folder
Copy skills/animate-expo into your agent's skills folder with SKILL.md and RECIPES.md.
Install the dependencies
In your Expo project, use
npx expo installfor react-native-reanimated, react-native-worklets, react-native-gesture-handler, expo-router and expo-haptics.Invoke it on a task
Ask your agent to use animate-expo for a sheet, press state or swipe gesture.
Check that it loaded
Invoke animate-expo and ask for a bottom sheet with swipe to dismiss. The agent should use shared values with a gesture, keep state updates off the handler, fire one haptic, and add a reduced-motion path.
Key features
- Three mobile differencesNo hover, two runtimes and gestures as primary input frame every decision.
- Same animation gateThe frequency and purpose test from the web skill still applies, and tab switches use no animation.
- Tool tableOptions range from Reanimated transitions and layout animations to gesture-driven shared values, native stack options, formSheet, NativeTabs, link menus, keyboard handling, Lottie and Skia.
- Apple-style springsSprings use duration and damping ratio, such as 400ms at a ratio of 1 for most motion and 300ms at 0.8 for sheets with velocity.
- UI-thread disciplineNever call
setStatein a gesture or scroll handler. Use.get()and.set()on shared values andscheduleOnRNonly inonEnd. - Haptics rulesOne haptic per action, fired in the same frame as the visual, and never the only feedback. A table maps selection, impact and notification feedback to uses.
- Press feedback and targetsPresses scale to 0.97 in 100 to 150ms and every target is at least 44 by 44 points.
- Reduced motion and frame rateIt uses
useReducedMotionand notes the iOS settingCADisableMinimumFrameDurationOnPhonefor 120fps. - Release-build checkJudge feel on a release build, not Expo Go, and note that Reanimated 4 requires the New Architecture.
- Never Ship tableA list of banned patterns, including PanResponder, keeps old APIs out.
Frequently asked questions
What is the animate-expo skill?
It is the skills/animate-expo folder in emilkowalski/skills. It adapts Emil Kowalski's animation rules to React Native and Expo, covering Reanimated, Gesture Handler, springs, native navigation options and haptics, with SKILL.md and RECIPES.md.
How do I install animate-expo?
Clone emilkowalski/skills, copy skills/animate-expo into your agent's skills folder and keep both files together. Install the app dependencies with npx expo install. Then invoke the skill from your Expo project when you build or tune motion.
Why does it care about two runtimes?
Reanimated runs animation on the UI runtime while your app logic runs on the React Native runtime. Calling setState in a gesture handler crosses them every frame. The skill keeps handlers on shared values and uses scheduleOnRN only in onEnd.
Does it cover haptics?
Yes. It maps selection, impact and notification feedback to uses with expo-haptics. The rules are one haptic per action, fired in the same frame as the visual, and never the only feedback, since users can turn haptics off.
Does it work in Expo Go?
The skill says to judge feel on a release build rather than Expo Go. It also notes that Reanimated 4 requires the New Architecture, so check your project's setup before you add it.
Which AI agents can use animate-expo?
The repository gives no per-agent list. It is a SKILL.md folder, so an agent that loads skills from a folder, including Claude Code, Cursor and Codex, can use it. Confirm the skills path in your agent's documentation.
What else from this repository helps on mobile?
Start with emil-design-eng for general taste, then review-animations to review a mobile diff before merging. For screen layout and visual design rather than motion, design-mobile-apps is the better fit for building the screens themselves.