animate-expoby Emil Kowalski

Animate Expo Skill.

A Claude Code and Codex skill for mobile app design: gestures, springs, and transitions for React Native and Expo.

Mobile Apps
UI code

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

Front matter and section headings read from the upstream file on 2026-09-14 · 17,458 characters in full

01 What it does

What the animate-expo Skill Does in Claude Code and Codex

Summary, workflow and outputs, all read from the skill's SKILL.md.

From the SKILL.mdRead 2026-09-14 · not a recorded run

In the Skill's Own Terms

A construction skill for motion in React Native and Expo. It turns a request for animation into an implementation that survives review on a real device, making the decisions in the order that determines whether they feel right: should it animate at all, which thread it runs on, which properties, spring or timing, how the gesture hands off, how it degrades.

Everything follows from three mobile facts: there is no hover, there are two runtimes, and the user's finger is on the element. It is for anyone animating an Expo app, adding gestures, sheets, screen transitions, press feedback or haptics, or fixing motion that stutters on device. The code is written with Reanimated, Gesture Handler, Expo Router and expo-haptics.

What it produces

The implementation code itself, written directly rather than offered as options.
A short gate result stating the frequency tier and named purpose, including what was rejected and why.
The ingredients line: tool, properties, spring or curve plus duration, and which runtime the work happens on.
A list of what to feel-check on a device, since gesture handoff and haptic timing cannot be read off the code.

See the example prompt ↗

How It Works

01
Gate the Animation Before Anything Else
A frequency table decides whether motion happens at all; the top tier stops and writes no code. Tab switches never slide because tabs are peers, not a hierarchy.
02
Name the Purpose in One Word
The skill forces a single-word intent before continuing — feedback, spatial consistency, state indication, preventing a jarring change, explanation, or delight, the last only for rare first-time moments.
03
Pick the Cheapest Tool That Works
Walk down a table and stop at the first row that fits: CSS transition, CSS keyframes, layout animation, shared value plus Gesture, then native stack, formSheet, NativeTabs, Link.Menu, RefreshControl, Lottie or Skia.
04
Restrict the Animated Properties
Transform and opacity cost nothing; everything else forces a layout pass that re-runs Yoga on the node and its siblings every frame.
05
Choose Spring or Timing from the Finger
Any interaction a finger drove gets a spring so velocity carries through an interruption; everything else uses a timing curve, never ease-in.
06
Keep the Frame Off the JS Thread
Shared values feed useAnimatedStyle instead of React state, and RN-runtime calls are pushed to onEnd or a threshold reaction rather than fired inside a gesture update.

02 Find your fit

When to Use the animate-expo Skill

Use the animate-expo skill in Claude Code or Codex when the job is mobile app design of this kind. Fit and limits below are taken from the skill's own file.

Good Fit

Animating anything in an Expo app, including gestures, sheets, screen transitions, press feedback and haptics.
Motion where a finger is involved, so interruptibility and velocity handoff are treated as the baseline rather than polish.
A request that matches one of the named recipes, where you should start from the recipe instead of a blank file.
Redesigning web affordances for a platform with no hover, where hover states have to become press, position, or nothing.

Know the Boundaries

Web animation, which belongs to a different skill.
Testing motion in Expo Go, which is not a performance environment and hides the problems being looked for.
Requests that fail the frequency gate — the skill names the reason and declines to write the animation.
Projects still on the old architecture, because Reanimated 4 requires the New Architecture.

What to Provide

The interaction and how often it happensThe frequency tier decides whether anything is built at all; tab switches, keyboard open and close, scrolling and settings toggles sit in the top tier.
The purpose, named in one wordWithout a single nameable purpose there is no build.
The packages the project needs, installed through ExpoInstallation goes through the Expo CLI so versions resolve against the project's SDK, which plain npm install will not do.

03 Inside the skill

Rules the animate-expo Skill Gives Claude Code and Codex

8 concrete instructions, defaults and limits the SKILL.md sets for the agent — the part of the file that changes the result.

Run the Sequence in Order
Steps 1 and 2 gate everything that follows, so frequency and named purpose must be settled before any tool or property choice.
Reanimated, Not Core Animated
Core Animated cannot be driven by a gesture without crossing the bridge, and useNativeDriver refuses anything but transform and opacity.
No Approximated Values
Curves and spring configs must be taken from the tables in the file rather than invented.
Reduced Motion Ships with the Animation
Accessibility handling is part of the same change, not a follow-up ticket.
Judge Feel Only on a Release Build
Verification happens on the slowest device you support, on a release build; the simulator and dev builds do not count.
Use Apple's Two Spring Parameters
Springs are written as duration plus dampingRatio plus velocity, not mass, stiffness and damping; default settle is { duration: 400, dampingRatio: 1 }, and overshootClamping: true when a hard edge must hold.
Respect the Touch Target
Minimum 44x44pt on iOS and 48dp on Android, achieved with hitSlop rather than by growing the visual, plus pressRetentionOffset so drift does not cancel a press.
One Haptic per User Action
Haptics fire in the same frame as the visual, at the causal moment, never on scroll or per frame, and never as the only feedback.

04 Put it to work

Install animate-expo in Claude Code or Codex

One npx skills add command, then a first task in your agent and a checklist for the result.

Add animate-expo to Claude Code, Codex or Your Agent

Run in your project; the installer asks which agent to add it to.

Terminal

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

Generic skills CLI form for skills/animate-expo/SKILL.md; the repository may document its own path.

Give the Skill a First Mobile App Design Task

Written in the skill's own terms; replace the bracketed parts with your material.

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: written from the SKILL.md in the skill's own terms.

Check the First Result

What the SKILL.md itself says a correct result looks like:

Drive the interaction by hand on device: flick it, interrupt it mid-flight, reverse it.
Confirm CADisableMinimumFrameDurationOnPhone is present for ProMotion iPhones, since recent Expo SDKs set it by default.
Check reduced motion degrades to fewer and gentler rather than zero, keeping opacity and color explanation.
Check the silent breakers first when nothing runs: the worklets Babel plugin and GestureHandlerRootView wrapping the app.

In OpenDesign import animate-expo from its SKILL.md link: Plugins → Add → Skill → Import from link, then pick it in the top bar.

Download OpenDesign Read the quickstart

05 Open source, traceable

Source, License and Verification

Where this page's facts come from, and when they were last checked.

Author: Emil Kowalski
Repository: github.com/emilkowalski/skills Branch main
Skill file: skills/animate-expo/SKILL.md Content checksum recorded at verification; commit d23d7f8
License: MIT From LICENSE.
Repository stars: 37,516 GitHub snapshot taken 2026-09-14 for the whole emilkowalski/skills repository, which contains 9 skills in this catalog. Not a rating or usage count for animate-expo.
Verified by OpenDesign: 2026-09-14 Source file, path, license text and star count were checked. Not bundled in OpenDesign main (checked 2026-08-28); a live run has not been recorded on this page.

Inside the SKILL.md

Operating PostureAct as the senior engineer: decide, state the reason in one line, write the code.
Hard RulesFive non-negotiables: sequence order, Reanimated, tabled values, reduced motion, release-build judgement.
The Build SequenceNine ordered steps from the frequency gate through properties, springs, thread and haptics.
Setup that silently breaks motionThe install, Babel plugin, root view and architecture causes of animation that never runs.
120fpsEnabling CADisableMinimumFrameDurationOnPhone so ProMotion iPhones get an 8ms frame budget.
RecipesPoints to RECIPES.md for press feedback, sheets, swipe, headers, keyboard UI, tabs.
Never ShipTwo-column table pairing forbidden patterns with the replacement to use instead.
OutputCode plus a few lines on gate result, ingredients and what to feel-check.
ToneOpinionated and brief; say so when something should not animate at all.

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

Front-matter description from SKILL.md. The full file is about 17,458 characters. Read the full file on GitHub.

06 Before you install

Questions About the animate-expo Skill

Answers come from the SKILL.md as read on 2026-09-14, not from a recorded run.

Why Reanimated instead of the core Animated API?

Core Animated cannot be driven by a gesture without crossing the bridge, and useNativeDriver refuses anything but transform and opacity. Reanimated worklets run on the UI thread and keep running while JS is busy.

What happens if the interaction happens dozens of times a day?

The gate returns no animation at all for the top frequency tier — use the platform default or nothing and stop. Animation is reserved for occasional and rare moments like sheets, modals, toasts and success states.

Animate Expo

Run animate-expo on a Real Mobile App Design Task.

Download OpenDesign, import animate-expo from its SKILL.md link, paste the prompt above, and read the plan before the result.

Download OpenDesign Browse all skills

Terminal

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

What the animate-expo Skill Does in Claude Code and Codex

In the Skill's Own Terms

How It Works

When to Use the animate-expo Skill

Good Fit

Know the Boundaries

What to Provide

Rules the animate-expo Skill Gives Claude Code and Codex

Run the Sequence in Order

Reanimated, Not Core Animated

No Approximated Values

Reduced Motion Ships with the Animation

Judge Feel Only on a Release Build

Use Apple's Two Spring Parameters

Respect the Touch Target

One Haptic per User Action