Animations
kingstinct/react-native-healthkit
Production animation patterns for React Native using Reanimated 4, Skia, WebGPU, and TypeGPU.
Production animation patterns for React Native using Reanimated 4, Skia, WebGPU, and TypeGPU.
Install Animations
$ npx skills add software-mansion-labs/skills --skill animations -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install software-mansion-labs/skills animations --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/software-mansion-labs/skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/react-native-best-practices/references/animations .claude/skills/animations && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "animations" agent skill from https://github.com/software-mansion-labs/skills/tree/main/skills/react-native-best-practices/references/animations into .claude/skills/animations/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "animations", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/software-mansion-labs/skills/tree/main/skills/react-native-best-practices/references/animationsType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add software-mansion-labs/skills --skill animations -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install software-mansion-labs/skills animations --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/software-mansion-labs/skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/react-native-best-practices/references/animations .agents/skills/animations && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "animations" agent skill from https://github.com/software-mansion-labs/skills/tree/main/skills/react-native-best-practices/references/animations into .agents/skills/animations/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "animations", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add software-mansion-labs/skills --skill animations -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install software-mansion-labs/skills animations --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/software-mansion-labs/skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/react-native-best-practices/references/animations .cursor/skills/animations && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "animations" agent skill from https://github.com/software-mansion-labs/skills/tree/main/skills/react-native-best-practices/references/animations into .cursor/skills/animations/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "animations", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/software-mansion-labs/skills.git --path skills/react-native-best-practices/references/animations--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add software-mansion-labs/skills --skill animations -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install software-mansion-labs/skills animations --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/software-mansion-labs/skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/react-native-best-practices/references/animations .gemini/skills/animations && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "animations" agent skill from https://github.com/software-mansion-labs/skills/tree/main/skills/react-native-best-practices/references/animations into .gemini/skills/animations/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "animations", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install software-mansion-labs/skills animationsInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add software-mansion-labs/skills --skill animations -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/software-mansion-labs/skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/react-native-best-practices/references/animations .github/skills/animations && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "animations" agent skill from https://github.com/software-mansion-labs/skills/tree/main/skills/react-native-best-practices/references/animations into .github/skills/animations/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "animations", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add software-mansion-labs/skills --skill animations -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install software-mansion-labs/skills animations --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/software-mansion-labs/skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/react-native-best-practices/references/animations .opencode/skills/animations && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "animations" agent skill from https://github.com/software-mansion-labs/skills/tree/main/skills/react-native-best-practices/references/animations into .opencode/skills/animations/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "animations", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
animations- GitHub stars
- 291
- Token cost
- ~1.1k tokens
- SKILL.md length
- 376 words
- Files
- 11
- Skills in repo
- 20
- Repo updated
- First seen
- Licence
- None found
At a glance
Production animation patterns for React Native using Reanimated 4, Skia, WebGPU, and TypeGPU.
- UseAnimatedStyle
- SKILL.md covers Version Check, Critical Rules and References
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
- Layout animation
What it does
Animations is an agent skill from software-mansion-labs/skills. Production animation patterns for React Native using Reanimated 4, Skia, WebGPU, and TypeGPU. Covers CSS transitions, CSS animations, CSS pseudo-selectors, CSS callbacks, shared value animations, canvas animations with react-native-skia, GPU shader animations, layout animations, scroll-driven animations, particle systems, procedural noise, SDF rendering, performance tuning, and accessibility. Trigger on: Reanimated, useSharedValue, useAnimatedStyle, withSpring, withTiming, withDecay, withRepeat, withSequence, CSS…
Its SKILL.md is about 1.1k tokens, which your agent loads only when the skill is triggered. The skill folder holds 10 other files (for example `animation-functions.md`, `animations-performance.md` and `animations.md`).
It sits in Game Development, covering Web animation and motion, Cross-platform mobile apps and 3D graphics and WebGL. It works with React Native and Three.js. The repository describes itself as: Software Mansion's set of skills for AI-assisted React Native development.
When your agent uses it
- UseAnimatedStyle
- Layout animation
- LinearTransition
- UseFrameCallback
Example prompts
- “/animations”
What it can do on your machine
Read from SKILL.md and the folder at commit e3f00cd. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md.
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Animations loads about 1.1k tokens when it runs. Until then it costs about 257 tokens; SKILL.md has 376 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
Without a licence we can't republish the file, so here is its outline and opening line. It has 376 words (~1,131 tokens).
“Software Mansion's production animation patterns for React Native on Reanimated 4 and the New Architecture.”
- name
- animations
Files
SKILL.md and 10 other files in skills/react-native-best-practices/references/animations of software-mansion-labs/skills.
- SKILL.md
- animation-functions.md
- animations-performance.md
- animations.md
- canvas-animations.md
- canvas-atlas.md
- css-pseudo-selectors.md
- gpu-animations.md
- layout-animations.md
- scroll-and-events.md
- svg-animations.md
Open the folder on GitHubat commit e3f00cd
Compare with similar skills
Animations next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Animations this skillsoftware-mansion-labs/skills | 291 | — | ~1.1k | Automated safety check: Pass | None | |
| Animationskingstinct/react-native-healthkit | 716 | — | ~937 | Automated safety check: Pass | MIT | |
| Build Awwwards Quality Sitesnirholas/three.ws | 227 | 1 repos | ~1.8k | Automated safety check: Pass | Apache-2.0 | |
| Shader for Interfacesv2space-labs/shader-for-interfaces | 115 | — | ~3.1k | Automated safety check: Pass | MIT | |
| Motion Webfeitangyuan/motion-web | 668 | — | ~18k | Automated safety check: Pass | CC-BY-NC-4.0 | |
| Better Designmarvkr/better-design | 254 | — | ~1.2k | Automated safety check: Pass | MIT |
Similar skills
Build Awwwards Quality Sites
nirholas/three.ws
Art-direct and implement distinctive, motion-rich marketing, editorial, portfolio, and landing websites with original reference-inspired imagery, standout heroes, GSAP choreography, one…
Shader for Interfaces
v2space-labs/shader-for-interfaces
Decides whether an interface effect belongs in CSS, SVG, Canvas 2D, WebGL or WebGPU, then builds, debugs and visually verifies focused GPU effects inside product UIs.
Motion Web
feitangyuan/motion-web
Design and build motion-first creative websites — page design (structure, type scale, palette, spacing) plus interaction choreography: scroll animation, Framer Motion, GSAP, and light 3D via…
Better Design
marvkr/better-design
Build, improve, and review production interfaces with the Better Design MCP.
Creating Reanimated Animations
gluestack/gluestack-ui
Generate React Native Reanimated animation code for React Native apps.
More from software-mansion-labs/skills
All 20 skills in this repoDetour Onboarding
software-mansion-labs/skills
Complete onboarding guide for developers who are new to Detour, the open-source deferred deep linking SDK by Software Mansion.
Typegpu
software-mansion-labs/skills
TypeGPU is type-safe WebGPU in TypeScript. An agent skill from software-mansion-labs/skills.
Enable Worklets Bundle Mode
software-mansion-labs/skills
Enable react-native-worklets Bundle Mode (imports inside worklets, third party libraries on worklet runtimes) in an Expo, RN CLI or brownfield React Native app, including the mandatory…
Moq Kit
software-mansion-labs/skills
Software Mansion's moq-kit — native Swift (iOS) and Kotlin (Android) SDKs for Media over QUIC (moq-lite) live streaming: sub-second-latency playback, camera/microphone/screen publishing, and…
React Native Moq
software-mansion-labs/skills
Software Mansion's react-native-moq — Media over QUIC (MoQ) live streaming for React Native: sub-second-latency video/audio playback, camera/mic/screen publishing, and realtime data tracks over a…
Expo Horizon
software-mansion-labs/skills
Software Mansion's guide for migrating Expo SDK apps to Meta Quest using expo-horizon packages.
Related
Works with
Categories
Questions about Animations
What does Animations do?
Production animation patterns for React Native using Reanimated 4, Skia, WebGPU, and TypeGPU. Animations is an agent skill from software-mansion-labs/skills. Production animation patterns for React Native using Reanimated 4, Skia, WebGPU, and TypeGPU.
When should I use Animations?
Animations fits situations like: useAnimatedStyle; layout animation; linearTransition; useFrameCallback.
How do I install Animations in Claude Code?
Run `npx skills add software-mansion-labs/skills --skill animations -a claude-code`. Or copy the skill folder (skills/react-native-best-practices/references/animations in software-mansion-labs/skills) into .claude/skills/animations in your project. Claude Code loads it when a task matches its description.
How do I install Animations in Codex?
Run `npx skills add software-mansion-labs/skills --skill animations -a codex`. Or copy the skill folder (skills/react-native-best-practices/references/animations in software-mansion-labs/skills) into .agents/skills/animations in your project. Codex loads it when a task matches its description.
Can I use Animations in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add software-mansion-labs/skills --skill animations -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/animations, .gemini/skills/animations, .github/skills/animations and .opencode/skills/animations in your project.
What does Animations need to run?
SKILL.md names no scripts, command-line tools or credentials: Animations is instructions for the agent only.
Does Animations access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Animations safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Animations use?
No licence was found for Animations or its repository. Without one, default copyright applies: ask the author before reusing or redistributing it.
How many tokens does Animations use?
About 1.1k tokens (SKILL.md is roughly 4.5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Animations?
Skills that share tags, products or a category with Animations: Animations (kingstinct/react-native-healthkit, 716 stars), Build Awwwards Quality Sites (nirholas/three.ws, 227 stars), Shader for Interfaces (v2space-labs/shader-for-interfaces, 115 stars) and Motion Web (feitangyuan/motion-web, 668 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Animations?
software-mansion-labs (a GitHub organization) maintains it in software-mansion-labs/skills, which has 291 GitHub stars. The repository holds 20 skills in this directory. The repository was last updated on September 28, 2026.
Source: software-mansion-labs/skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.