animate-expo Skill for Claude Code: Smooth Animations in Expo and React Native

Makes Claude build React Native and Expo animations with Reanimated, gestures and haptics that stay smooth on a real phone.

Installs: 152.6K; on skills.sh
Stars: 52.7K; on GitHub
Files: 1; besides SKILL.md
Updated: Oct 2026; last repo commit

animate-expo makes Claude work through nine steps before writing mobile motion code. It checks whether the action should animate at all, names the purpose, picks the cheapest tool, then chooses properties, timing or spring, keeps motion off the JavaScript thread, uses press instead of hover, adds haptics, and handles reduced motion.

It writes code with Reanimated, Gesture Handler, Expo Router and expo-haptics. It has a section on setup problems that stop animations from running, such as a missing GestureHandlerRootView. For web, the SKILL.md points to the separate animate skill. It bundles RECIPES.md with starting points for press feedback, sheets, swipe-to-delete, headers, list entrances and more.

Good for

Expo and React Native developers adding sheets, gestures or screen transitions
Developers fixing motion that stutters on older Android phones
Teams who want haptics used sparingly and tied to the animation

Install animate-expo

Claude Code

Copy this prompt.

Install the animate-expo skill in Claude Code. Run this command:

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

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

From its listing on skills.sh. Source.

What's in the skill

When it loads

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 transitions, press feedback or haptics, or fixing motion that stutters on device. For web animation use `animate`.

Sections in SKILL.md

Initial Response
Operating Posture
Hard Rules
The Build Sequence
1. Should this animate at all?
2. What is the purpose?
3. Pick the tool — cheapest that works
4. Pick the properties
5. Timing or spring
6. Keep it off the JS thread
7. Press, not hover
8. Haptics
9. Reduced motion and accessibility
Setup that silently breaks motion
120fps
Recipes

Key facts

Author: Emil Kowalski
License: MIT
Installs on skills.sh: 152,648 (Nov 2, 2026)
GitHub stars: 52,705 (Nov 2, 2026)
skills.sh audits: Gen Agent Trust Hub: pass, Socket: pass, Snyk: pass
Last commit: 2026-10-28
Files: SKILL.md plus RECIPES.md
Steps: 9, from the frequency gate to reduced motion
Libraries named: Reanimated, Gesture Handler, Expo Router, expo-haptics

What it includes

Skips animation for tab switches, scrolling and other 100+ a day actions
Claude says so and writes no code. Tabs never slide.
Read · 1. Should this animate?
Feedback, spatial consistency, state, a jarring change, explanation or delight
If Claude cannot name one, it does not build the animation.
Read · 2. Name the purpose
Cheapest tool that works
Claude stops at the first option that fits.
Read · 3. Pick the tool
transform and opacity, not height, width or margin
Keeps work off the layout path.
Write · 4. Pick the properties
Uses set spring configs and curves from tables
Values come from the SKILL.md tables.
Write · 5. Timing or spring
Reanimated worklets and shared values, no setState per frame
The UI runtime keeps animating while JavaScript is busy.
Write · 6. Keep it off the JS thread
Moves hover affordances into press or position
Mobile has no hover.
Write · 7. Press, not hover
expo-haptics calls matched to the visual, one per user action
Never the only feedback.
Write · 8. Haptics
Ships useReducedMotion handling with every animation
Gentler motion, not none.
Write · 9. Reduced motion
Expo install of Reanimated and worklets, GestureHandlerRootView, New Architecture
The first things to check when an animation does not run.
Runs code · Setup checks
Starting code for common patterns, like press feedback, sheets and swipe-to-delete
Includes press feedback, a drag-to-dismiss sheet, swipe-to-delete, a collapsing header, list entrances, keyboard-synced UI, a tab indicator, screen transitions, a toast and a threshold trigger.
Files · RECIPES.md

From the official docs

Permissions

Low risk

The skill is text guidance, but it can install animation packages and edit your app code. Approve the install command and review the diff.

What it can do

Read your data
Create and change things
Delete things
Read-only mode

Watch out for

It may install packages in your app
The setup section uses an Expo install command for Reanimated and worklets. Approve the command and review the package changes.

Questions

What does animate-expo do?

It makes Claude build React Native and Expo animations in a fixed order, starting with whether the motion should exist. Code uses Reanimated and Gesture Handler so it runs on the UI thread.

How do I install it in Claude Code?

Use the install box above, which adds it from the emilkowalski/skills repo. Then ask, for example, "add a drag-to-dismiss bottom sheet to this Expo screen".

What is the difference between animate and animate-expo?

animate-expo is for React Native and Expo. The SKILL.md says to use the separate animate skill for web animation.

Why does my animation not run?

The skill lists setup causes to check first: install through npx expo install so versions match the SDK, wrap the app in GestureHandlerRootView, and remember that Reanimated 4 requires the New Architecture. It also says Expo Go is not a performance environment.

Does it use core Animated or PanResponder?

No. The Never Ship table replaces them with Reanimated and Gesture.Pan() from Gesture Handler.

Does it need an API key or scripts?

No key or script is mentioned. The setup section does tell you to install packages with an Expo command, which Claude may run in your project.

Is it safe to install?

It is two markdown files with no scripts. Claude may run an npx expo install command and edit app files, so review the diff before you commit.

Information

updated Nov 2, 2026

Repository: emilkowalski/skills
Folder: skills/animate-expo

emilkowalski/skills skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 3

SKILL.md · github.com
skills.sh listing · skills.sh
GitHub repo · github.com