Guide · Agent skill
How to use the Expo Motion Animation Builder agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
animate-expo is an agent skill: a folder of instructions that teaches an AI coding agent how to approach a specific job. This one makes the agent behave like a mobile animation engineer for React Native and Expo apps. This guide explains what it changes, how to install it, how to ask for animation work so the skill triggers, and what to check before you ship.
Expo Motion Animation Buildersickn33/agentic-awesome-skills · MIT Download the skill Quick start
- 1Download the ZIP. Download the animate-expo skill ZIP from this page.
- 2Install the skill. Unzip it into ~/.claude/skills/ for all projects, or into .claude/skills/ inside one project. Alternatively, upload the ZIP under Settings → Capabilities → Skills in the Claude apps.
- 3Check your project dependencies. Confirm you have a React Native or Expo project with the packages the skill recommends, installed through expo install.
- 4Ask for a specific motion. Describe the interaction in plain language, naming React Native or Expo and the type of motion you need.
- 5Review the agent's reasoning. Read the one-line justification for the chosen approach. Accept a decision not to animate if the reasoning holds.
- 6Test on a release build. Run the animation on a release build on the slowest device you support, since the skill treats anything else as unverified.
What the animate-expo skill makes the agent do
When the skill is active, the agent does not start by writing motion code. It first checks whether the animation is worth adding, names its purpose, and then picks the cheapest tool that works, such as native navigation, a CSS-style transition, or a gesture-driven shared value that runs on the UI thread.
The skill is built around three mobile constraints: there is no hover, React renders on a separate runtime from the animations, and the user's finger is usually on the element being animated. It aims for motion that runs smoothly on a real release build on slower phones, and it includes reduced-motion fallbacks from the start.
- Decides whether an animation should exist at all, and may conclude that no animation is the right answer.
- Prefers Reanimated and gesture-driven values over core Animated and per-frame state updates.
- Keeps transform and opacity where possible, and avoids animating layout properties that re-run layout every frame.
- Uses platform components such as native stack options, form sheets and native tabs instead of rebuilding them in JavaScript.
Install the animate-expo skill
Download the skill ZIP from this page. Then choose one of the two installation routes below, depending on whether you want it for all your projects or only one.
For a personal install that every project can use, unzip the download into ~/.claude/skills/. For a single project, unzip it into the .claude/skills/ folder inside that project. If you use the Claude apps, you can instead upload the ZIP under Settings → Capabilities → Skills.
- All projects: unzip into ~/.claude/skills/
- One project only: unzip into .claude/skills/ inside the project folder
- Claude apps: Settings → Capabilities → Skills, then upload the ZIP
Prepare your React Native or Expo project
The skill assumes a React Native project, ideally on Expo, and it works best with the libraries it recommends. Install them with expo install rather than npm install, because expo install picks versions that match your Expo SDK.
Optional packages are only needed for specific cases: keyboard-following UI, Lottie illustrations, and large custom canvas scenes with Skia.
- react-native-reanimated and react-native-worklets for animation
- react-native-gesture-handler for gestures
- expo-router for navigation, sheets, native tabs and menus
- expo-haptics for haptic feedback
- Optional: react-native-keyboard-controller, lottie-react-native, @shopify/react-native-skia
npx expo install react-native-reanimated react-native-worklets react-native-gesture-handler expo-hapticsTrigger the skill with natural requests
You do not need a special command. Describe the motion you want in plain language, and mention React Native or Expo so the agent knows which platform rules apply. Be specific about the interaction: is it a press, a drag, a sheet, or a screen change?
The skill can also be invoked without a specific question, in which case it replies with a short readiness message and waits for your request.
- Add a press-feedback effect to this React Native button without making it feel laggy.
- Build a draggable bottom sheet in Expo that keeps up with the finger and carries velocity when released.
- Animate the onboarding steps in our Expo app and include reduced-motion support.
- Should this tab bar slide between tabs? Review the animation and tell me if it should be removed.
Read the skill's decisions before you accept the code
The skill is designed to say no. For frequent actions such as tab switches, keyboard open and close, scrolling, and settings toggles, it recommends the platform default or nothing. Tab switches are specifically meant not to slide. If your request fails this check, expect an explanation rather than code.
Once an animation is approved, the skill is strict about performance. It states that feel should be judged on a release build on the slowest device you support, and that anything else is not verified. Test on that kind of device before you rely on the result.
- Expect a one-line reason for each tool choice.
- Expect tab switches to use animation set to none.
- Expect reduced-motion behaviour included in the first version of the code.
animation: 'none'What people use it for
- Press feedback on buttons and rows that uses a transition rather than a per-frame state update.
- Bottom sheets and drag gestures that follow the finger and keep their velocity when released.
- Onboarding steps and first-time success states, where the skill treats motion as a rare, deliberate addition.
- Keyboard-following UI using react-native-keyboard-controller.
- Reviewing existing animations to find ones that should be removed or moved to the platform default.
Frequently asked questions
Is the animate-expo skill free to use?
The skill is released under the MIT licence, as stated in its metadata and its license file. The page does not list any price for it. Check the licence text yourself if you plan to redistribute it.
Where do I install an agent skill?
Unzip the downloaded ZIP into ~/.claude/skills/ for personal use across projects, or into .claude/skills/ inside a single project. In the Claude apps, you can upload the ZIP under Settings → Capabilities → Skills.
What does the animate-expo skill require?
It needs a React Native project, ideally on Expo, with react-native-reanimated, react-native-worklets, react-native-gesture-handler, expo-router and expo-haptics. react-native-keyboard-controller, lottie-react-native and @shopify/react-native-skia are optional for specific cases.
Does the skill run scripts or use the network?
According to its listing, it runs no scripts and uses no network. It consists of instruction files, SKILL.md and RECIPES.md. Its metadata does carry a critical risk label, so review the files before you install it.
Can I use the skill for web-only projects?
No. The guidance is specific to mobile and hover-free interaction, so it is not suited to web-only projects. It is also not designed for teams not using Expo or React Native.
Why won't the agent write the animation I asked for?
The skill gates every request. If the motion happens very frequently, or has no clear purpose, it recommends no animation or the platform default. This is intentional, and it may frustrate people who want a quick visual preset.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use animate-expo if you build React Native or Expo apps and want help deciding when to animate, plus motion that is designed to stay smooth on mid-range Android phones. Pick something else if you work on web-only projects, do not use Expo or React Native, or simply want a quick set of visual effects without review.
Download the skill