animations-native

animations-native is a skill for Claude Code, Codex from mthines/agent-skills. It costs 182 tokens per session (2,730 once invoked), scanned A, original, MIT.

A guide for building animations in React Native and Expo mobile apps, using tools that move animation work off the main JavaScript thread. It also covers touch gestures such as dragging, pinching, and swiping.

In plain words
What is it for?
Use it to create or review app animations, interactive gestures, layout transitions, and motion driven by timing or spring effects.
Why use it?
It helps avoid choppy animations and keeps motion responsive when the app is busy, while respecting the user's reduced-motion setting.

Skill for Claude CodeCodex

Part of the mthines-agent-skills plugin — 54 skills, 4 agents shipped together

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods
npx agentmods add skills/mthines/agent-skills/animations-native
Any agent
npx skills add mthines/agent-skills --skill animations-native
Clone the repo
git clone --depth 1 https://github.com/mthines/agent-skills

Made for: Claude Code, Codex.

Or install mthines-agent-skills, the plugin that ships this one along with the rest of its 54 skills, 4 agents.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for animations-native

README.md
[![agentmods](https://agentmods.dev/badge/skills/mthines/agent-skills/animations-native.svg)](https://agentmods.dev/skills/mthines/agent-skills/animations-native)
Your own site
<a href="https://agentmods.dev/skills/mthines/agent-skills/animations-native"><img src="https://agentmods.dev/badge/skills/mthines/agent-skills/animations-native.svg" alt="Measured on agentmods" height="20"></a>
Per session 182 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 2,730 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5 $0.00182 $0.02730
Opus 5 $0.00091 $0.01365
Sonnet 5 $0.00036 $0.00546
Haiku 4.5 $0.00018 $0.00273

Measured 5d ago against content hash e773c2d7b68d, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

animations-native scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 5d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

skills/design/animations-native/SKILL.md · 164 lines

How it starts

The opening of the file, as written. The whole thing — 164 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Animations (React Native / Expo)

Produces or reviews React Native animations that hold 60/120 fps by running motion on the UI thread via Reanimated worklets, respect the OS Reduce Motion setting, and use the cheapest tool for the job — the Reanimated CSS API first, the worklet/hooks API for interactive motion, gesture-handler for touch, and asset runtimes (Lottie / Rive) only for designer-authored art.

This SKILL.md is a thin index. Detailed rules live in rules/*.md and load on demand. This is the native sibling of the animations skill — that one owns web (CSS, Motion, View Transitions); this one owns React Native / Expo.


Core Bet

Animate transform and opacity, and drive the value from the UI thread. Those are the properties the New Architecture applies to a mounted view without a Yoga layout recalculation — the RN analog of the web "composite-only" rule. Layout props (width, height, top, left, flex, margin) recompute layout every frame and jank. Driving the value from the UI thread (a Reanimated shared value, not React useState) keeps motion smooth even when the JS thread is busy. Full property table and the threading model in rules/reanimated-core.md.


Brainstorm Mode — interaction → feedback

When the question is what the motion should be (not how to build it), the reasoning is platform-agnostic and already lives in the animations skill. Read the five-question brainstorm and the verb→motion catalog in ../animations/rules/interaction-feedback.md — verb, reversibility, initiator, spatial source, affordance load, plus the intensity ladder and direction principle. The duration bands and easing conventions carry straight over to native; the native-specific spring/personality notes are in rules/reanimated-core.md. Then hand off to the decision flow below for the mechanics.

Read the full file on GitHub · 164 lines

Files

What ships with it

5 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 5d ago First seen · 164 lines · 182 tokens per session scan A e773c2d7b68d

Subscribe to this mod's changes

animations-native is a skill published in the GitHub repository mthines/agent-skills (12 stars, last pushed today), licensed MIT. It adds 182 tokens to every session and 2,730 once invoked, about $0.0009 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.

Related

Other skills, from other repositories

compose-multiplatform-patterns

Patterns for building shared UI across Android, iOS, Desktop, and Web with Compose Multiplatform and Jetpack Compose — state hoisting with ViewModel/StateFlow, type-safe navigation, slot-based composables, recomposition performance, and expect/actual platform code. Use when writing or reviewing Compose UI, wiring a…

shennawardana23/skillme · 95 tokens

google-mobile-ads-android-migrate-to-next-gen

Migrates Android applications from the old, legacy Google Mobile Ads (GMA) SDK (com.google.android.gms:play-services-ads) to the new GMA Next-Gen SDK (com.google.android.libraries.ads.mobile.sdk:ads-mobile-sdk). Provides comprehensive mapping tables for imports, classes, and method signatures to help determine…

google/skills · 105 tokens

developer-device-platform-basics

Provides guidance and instructions on managing remote devices on Developer Device Platform (DDP). Use when reserving remote Android devices, establishing connection tunnels, checking session status, or extending/cancelling leases. Don't use for iOS or local device/hardware inquiries.

google/skills · 57 tokens

google-mobile-ads-validate

Validates a project's Google Mobile Ads (GMA) SDK integration for iOS, Android, or Unity projects. Use when conducting a full pre-launch audit of an app that integrates GMA SDK or when validating any individual GMA SDK integration checks, such as when validating ad unit IDs and ad formats, SKAdNetwork IDs, mediation…

google/skills · 84 tokens

wear-compose-m3

Expert guidance for working with Wear OS Compose Material3. Use this skill when creating, updating, or migrating Wear OS projects. This includes the androidx.wear.compose.material3, androidx.wear.compose.foundation, and androidx.wear.compose.navigation3 libraries. Also working with core components such as AppScaffold…

android/skills · 101 tokens

leanback-to-compose-tv-migration

Provides instructions and architectural patterns for migrating Android TV applications from legacy Leanback UI Toolkit, Android Views, or Support Fragments to Jetpack Compose for TV (androidx.tv). Use this skill for Leanback to Compose migrations, including browse screen, settings screen, authentication screen, login…

android/skills · 151 tokens