PlugWiki

expo-animation Skill (Expo): React Native Animation Rules

Makes your agent build Expo and React Native animations the way a senior mobile engineer would, deciding first whether to animate at all.

Installs
17.4K
on skills.sh
Stars
4K
on GitHub
Files
3
besides SKILL.md
Updated
Nov 2026
last repo commit

expo-animation runs the agent through a nine-step build sequence. It first decides whether the thing should animate, names the purpose, then picks the cheapest tool. After that it picks properties, timing or spring, keeps the motion off the JavaScript thread, uses press instead of hover, adds haptics and handles reduced motion. It writes the code with Reanimated, Gesture Handler, Expo Router and expo-haptics, then lists what to feel-check on a real device.

It is an official Expo skill, created with Emil Kowalski. It bundles a RECIPES.md with ten ready implementations, but no scripts. Its "Submitting Feedback" section lets the agent send feedback to Expo through an npx command, so see the safety notes below.

Good for

  • Expo and React Native developers adding gestures, sheets, transitions or haptics
  • Teams whose animations stutter on real devices
  • Designers-turned-developers who want a motion decision process, not a menu of options

Install expo-animation

Claude Code

  1. 1

    Copy this prompt.

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

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

Then check that it loaded and tell me how to use it.
  2. 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

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

Key facts

Author
Expo team, created with Emil Kowalski (SKILL.md)
Repo
expo/skills
License
MIT (as listed by the crawl)
Installs on skills.sh
17,364 (Nov 2, 2026)
GitHub stars
4,005 (repo, Nov 2, 2026)
Last commit
2026-11-01
Files
4 files including SKILL.md: RECIPES.md, LICENSE and agents/openai.yaml
Official
README: "Official AI agent skills from the Expo team"
License (SKILL.md)
MIT
Works in
Claude Code and Codex via plugins; other agents via the skills CLI

What it includes

  • Gates by frequency: 100+ times a day gets no animation

    Tab switches, keyboard changes and settings toggles get platform defaults. If a request fails the gate, the agent says so and writes nothing.

    1. Should this animate at all?

  • Feedback, spatial consistency, state, avoiding a jarring change, explanation or delight

    If it cannot be named in one word, it is not built.

    2. Name the purpose

  • Cheapest fit: CSS transition, keyframes, layout animation, gesture, or native

    Native stack options for screens, formSheet for sheets, NativeTabs for tabs. Lottie only for illustration and Skia for huge scenes.

    3. Pick the tool

  • Animate transform and opacity; avoid width, height, margin and flex

    Also covers Android elevation, BlurView and starting from scale(0.95), never scale(0).

    4. Pick the properties

  • Curves and spring settings come from the skill's tables, not guesses

    Hard rule: no approximated values.

    5. Timing or spring

  • Shared values and worklets on the UI runtime; no setState per frame

    Uses scheduleOnRN from react-native-worklets in place of runOnJS.

    6. Keep it off the JS thread

  • Mobile has no hover, so affordances move to press or position

    Gesture handoff, interruptibility and velocity are treated as the baseline.

    7. Press, not hover

  • One haptic per user action, same frame as the visual, never the only feedback

    Maps moments to expo-haptics calls such as selectionAsync and impactAsync.

    8. Haptics

  • Ships with the animation: fewer and gentler, not zero

    Uses useReducedMotion or ReduceMotion.System; screen transitions fall back to fade.

    9. Reduced motion

  • Use npx expo install; add GestureHandlerRootView; Reanimated 4 needs New Architecture

    The listed fix when an animation does not run at all.

    Runs code · Setup checks

  • Ten recipes: press feedback, drag-to-dismiss sheet, swipe to delete, toast and more

    Also covers collapsing header, list entrances, keyboard-synced UI, tab indicator, screen transitions and a threshold trigger.

    RECIPES.md

  • Runs npx --yes @expo/agent-cli@latest feedback to send a report to Expo

    Meant for specific errors in the skill, or repeated agent failures on an Expo task. A report carries the text the agent writes.

    Runs code · Submitting Feedback

From the official docs

Permissions

Low risk

The skill can have the agent install animation packages in your project and run an npx command that sends feedback to Expo. Review package changes and say no to feedback if you prefer.

What it can do

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

Watch out for

  • It may send feedback to Expo

    The Submitting Feedback section has the agent run npx --yes @expo/agent-cli@latest feedback. The --yes flag accepts the npx install prompt and @latest runs the newest published package. SKILL.md asks for as much relevant context as possible, and for repeated failures a brief of the task, the expected result and what went wrong, so the report can carry details from your project. Our advice: tell the agent not to use it if you want nothing to leave your machine. github.com

  • It installs packages in your project

    It tells the agent to add Reanimated and related packages with npx expo install. Review changes to package.json and lock files. github.com

Technical details
Talks toExpo, via npx --yes @expo/agent-cli@latest feedback (only when the agent submits feedback)

Questions

What does the expo-animation skill do?

It makes the agent follow a decision process before and while writing animation code in an Expo app. It decides whether to animate, picks the tool and thread, then writes code that holds up on a real device.

How do I install it?

Use the install box above for this skill alone. The README installs all Expo skills with npx skills@latest add expo/skills --skill '*' and lists plugin installs for Claude Code and Codex.

Does it work in Claude Code, Codex and Cursor?

The README names Claude Code and Codex (plugins) and says the skills CLI covers Cursor, OpenCode, GitHub Copilot, Windsurf, Gemini, Cline and others. The skill ships a Codex display file.

Does it need packages or an API key?

No key is mentioned. Your app needs react-native-reanimated and react-native-worklets, installed with npx expo install so versions match your Expo SDK. Gesture, haptics and Expo Router packages are used where relevant.

Will it refuse to animate something?

Yes, by design. If a request fails the frequency gate, such as a tab switch, it says so and writes no code.

Can I judge the result in Expo Go?

No. SKILL.md says feel must be judged on a release build on the slowest device you support, and that Expo Go and the simulator hide performance problems.

Does it send anything to Expo?

Only if the agent runs the feedback command in its Submitting Feedback section. That command goes through npx and sends the feedback text the agent writes. You can ask the agent not to use it.

Is it safe?

It bundles no scripts, but it tells the agent to run npx expo install for dependencies and can run the npx feedback command. Review package changes in your project, and tell the agent not to submit feedback if you do not want that.

Information

updated Nov 2, 2026

Repository
expo/skills
Folder
plugins/expo/skills/expo-animation

expo/skillsskills.sh

Sources

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

Show all 5
  1. expo-animation SKILL.md · github.com
  2. expo/skills README · github.com
  3. skills.sh listing · skills.sh
  4. expo/skills · github.com
  5. RECIPES.md · github.com

Updated Nov 2, 2026.