Agent skill

Animations

by kingstinct in kingstinct/react-native-healthkit

Production animation patterns for React Native using Reanimated 4, Skia, WebGPU, and TypeGPU.

Install Animations

skills CLI

$ npx skills add kingstinct/react-native-healthkit --skill animations -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install kingstinct/react-native-healthkit animations --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/kingstinct/react-native-healthkit.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/react-native-best-practices/references/animations .claude/skills/animations && rm -rf skills-src

Use ~/.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/

Paste into Claude Code

Install the "animations" agent skill from https://github.com/kingstinct/react-native-healthkit/tree/master/.agents/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

$skill-installer install https://github.com/kingstinct/react-native-healthkit/tree/master/.agents/skills/react-native-best-practices/references/animations

Type 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.

skills CLI

$ npx skills add kingstinct/react-native-healthkit --skill animations -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install kingstinct/react-native-healthkit animations --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/kingstinct/react-native-healthkit.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/react-native-best-practices/references/animations .agents/skills/animations && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "animations" agent skill from https://github.com/kingstinct/react-native-healthkit/tree/master/.agents/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.

skills CLI

$ npx skills add kingstinct/react-native-healthkit --skill animations -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install kingstinct/react-native-healthkit animations --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/kingstinct/react-native-healthkit.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/react-native-best-practices/references/animations .cursor/skills/animations && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "animations" agent skill from https://github.com/kingstinct/react-native-healthkit/tree/master/.agents/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

$ gemini skills install https://github.com/kingstinct/react-native-healthkit.git --path .agents/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.

skills CLI

$ npx skills add kingstinct/react-native-healthkit --skill animations -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install kingstinct/react-native-healthkit animations --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/kingstinct/react-native-healthkit.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/react-native-best-practices/references/animations .gemini/skills/animations && rm -rf skills-src

Use ~/.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/

Paste into Gemini CLI

Install the "animations" agent skill from https://github.com/kingstinct/react-native-healthkit/tree/master/.agents/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.

GitHub CLI

$ gh skill install kingstinct/react-native-healthkit animations

Installs 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).

skills CLI

$ npx skills add kingstinct/react-native-healthkit --skill animations -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/kingstinct/react-native-healthkit.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/react-native-best-practices/references/animations .github/skills/animations && rm -rf skills-src

Use ~/.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/

Paste into GitHub Copilot

Install the "animations" agent skill from https://github.com/kingstinct/react-native-healthkit/tree/master/.agents/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.

skills CLI

$ npx skills add kingstinct/react-native-healthkit --skill animations -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install kingstinct/react-native-healthkit animations --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/kingstinct/react-native-healthkit.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/react-native-best-practices/references/animations .opencode/skills/animations && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "animations" agent skill from https://github.com/kingstinct/react-native-healthkit/tree/master/.agents/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: 716
Token cost: ~937 tokens
SKILL.md length: 279 words
Files: 10
Skills in repo: 11
Repo updated: Oct 7, 2026
First seen: Oct 7, 2026
Licence: MIT

At a glance

Production animation patterns for React Native using Reanimated 4, Skia, WebGPU, and TypeGPU.

UseAnimatedStyle
SKILL.md covers 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 kingstinct/react-native-healthkit. Production animation patterns for React Native using Reanimated 4, Skia, WebGPU, and TypeGPU. Covers CSS transitions, CSS animations, shared value animations, canvas animations with react-native-skia, GPU shader animations, layout animations, scroll-driven animations, interpolation, particle systems, procedural noise, SDF rendering, performance tuning, and accessibility. Trigger on: Reanimated, useSharedValue, useAnimatedStyle, withSpring, withTiming, withDecay, withRepeat, withSequence, CSS transition, CSS…

Its SKILL.md is about 940 tokens, which your agent loads only when the skill is triggered. The skill folder holds 9 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: HealthKit bindings for React Native with TypeScript. The licence is MIT.

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 9e4e186. 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 937 tokens when it runs. Until then it costs about 251 tokens; SKILL.md has 279 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~251
When it runs · the whole SKILL.md, loaded when a task matches: ~937

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

The full file from kingstinct/react-native-healthkit at commit 9e4e186, republished under its MIT licence (© kingstinct). 279 words, ~937 tokens.

Download SKILL.mdSave it as .claude/skills/animations/SKILL.md (or your agent's skills folder). This skill also uses 9 other files; get the full folder from GitHub.

name: animations
description: Production animation patterns for React Native using Reanimated 4, Skia, WebGPU, and TypeGPU. Covers CSS transitions, CSS animations, shared value animations, canvas animations with react-native-skia, GPU shader animations, layout animations, scroll-driven animations, interpolation, particle systems, procedural noise, SDF rendering, performance tuning, and accessibility. Trigger on: Reanimated, useSharedValue, useAnimatedStyle, withSpring, withTiming, withDecay, withRepeat, withSequence, CSS transition, CSS animation, layout animation, FadeIn, SlideIn, ZoomIn, LinearTransition, keyframe, interpolate, scrollTo, useFrameCallback, react-native-skia, Skia Canvas, Atlas, usePathInterpolation, usePathValue, useClock, useTexture, SKSL, interpolateColors, Picture API, canvas animation, sprite animation, WebGPU, react-native-wgpu, TypeGPU, GPU shader, WGSL, particle system, Perlin noise, SDF, Three.js, react-three-fiber, animation performance, or any request to animate UI in React Native.

Animations

Software Mansion's production animation patterns for React Native on Reanimated 4 and the New Architecture.

Load at most one reference file per question. For API signatures and config options, webfetch the documentation pages linked in each reference file.

Critical Rules

NEVER use runOnJS. It is removed in Reanimated 4. Use scheduleOnRN(fn, ...args) from react-native-worklets instead. This applies everywhere: scroll handlers, gesture callbacks, useAnimatedReaction, useFrameCallback, and any other worklet context.

References

File	When to read
`animations.md`	Choosing between CSS transitions, CSS animations, and shared value animations; CSS transition and CSS animation patterns and rules; animating text; infinite animation cleanup; `scheduleOnRN`
`animation-functions.md`	Gotchas and rules for core hooks (`useSharedValue`, `useAnimatedStyle`, `useAnimatedProps`, `useDerivedValue`); `withSpring` config modes; `withRepeat` and `withClamp` caveats; composing animations
`layout-animations.md`	Entering/exiting animation gotchas (`nativeID` conflict, view flattening); layout transitions; keyframe animation rules; list item animations (`itemLayoutAnimation`); shared element transitions
`scroll-and-events.md`	Scroll-driven animation patterns (`useAnimatedScrollHandler`, `scrollTo`, `useScrollOffset`); `useAnimatedReaction` patterns; `useFrameCallback`; `measure` rules
`canvas-animations.md`	Canvas animations with `@shopify/react-native-skia`; Reanimated integration (shared values as direct props); `interpolateColors`; retained vs immediate mode (Picture API); path animations (`usePathInterpolation`, `usePathValue`); `useClock`; gesture integration and element tracking; SKSL runtime shaders and image filters; textures
`canvas-atlas.md`	Atlas for batched sprite/tile animation; `useTexture`, `useRSXformBuffer`; RSXform matrix format (`[scos, ssin, tx, ty]`)
`gpu-animations.md`	GPU shader animations; `react-native-wgpu` Canvas and device setup; TypeGPU typed pipelines; Reanimated + WebGPU worklet integration; compute pipelines for particle systems, physics, and simulations; `@typegpu/noise` (Perlin noise, PRNG); `@typegpu/sdf` (signed distance shapes); Three.js / React Three Fiber for 3D
`svg-animations.md`	Animating SVG elements and paths with Reanimated; `createAnimatedComponent` for SVG; progress arcs; pulsing circles
`animations-performance.md`	Performance tuning; 120fps setup; feature flags; FPS drop fixes; simultaneous animation limits; accessibility (`useReducedMotion`, `ReducedMotionConfig`); worklet closure optimization; debug vs release builds

Files

SKILL.md and 9 other files in .agents/skills/react-native-best-practices/references/animations of kingstinct/react-native-healthkit.

SKILL.md
animation-functions.md
animations-performance.md
animations.md
canvas-animations.md
canvas-atlas.md
gpu-animations.md
layout-animations.md
scroll-and-events.md
svg-animations.md

Open the folder on GitHubat commit 9e4e186

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.

Animations compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Animations this skillkingstinct/react-native-healthkit	716	—	~937	Automated safety check: Pass	MIT	today
Animationssoftware-mansion-labs/skills	291	—	~1.1k	Automated safety check: Pass	None	10 days ago
Typegpusoftware-mansion-labs/skills	291	2 repos	~5.6k	Automated safety check: Pass	None	10 days ago
Build Awwwards Quality Sitesnirholas/three.ws	227	1 repos	~1.8k	Automated safety check: Pass	Apache-2.0	today
Shader for Interfacesv2space-labs/shader-for-interfaces	115	—	~3.1k	Automated safety check: Pass	MIT	1 mo ago
Motion Webfeitangyuan/motion-web	668	—	~18k	Automated safety check: Pass	CC-BY-NC-4.0	22 days ago

Similar skills

Animations
software-mansion-labs/skills
Production animation patterns for React Native using Reanimated 4, Skia, WebGPU, and TypeGPU.
291 GitHub stars~1.1k tokensUpdated 10 days ago
Game DevelopmentAuto-check passed
Typegpu
software-mansion-labs/skills
TypeGPU is type-safe WebGPU in TypeScript. An agent skill from software-mansion-labs/skills.
291 GitHub starsUsed in 2 repos~5.6k tokens
Game DevelopmentAuto-check passed
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…
227 GitHub starsUsed in 1 repo~1.8k tokens
Game DevelopmentAuto-check passed
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.
115 GitHub stars~3.1k tokensUpdated 1 mo ago
Frontend & DesignAuto-check passed
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…
668 GitHub stars~18k tokensUpdated 22 days ago
Game DevelopmentAuto-check passed
Better Design
marvkr/better-design
Build, improve, and review production interfaces with the Better Design MCP.
254 GitHub stars~1.2k tokensUpdated 15 days ago
Frontend & DesignAuto-check passed

More from kingstinct/react-native-healthkit

All 11 skills in this repo

React Native Healthkit
kingstinct/react-native-healthkit
How to use @kingstinct/react-native-healthkit (and its sibling @react-native-healthkit/health-records) to read, write and subscribe to Apple HealthKit data from React Native / Expo apps.
716 GitHub stars~1.6k tokensUpdated today
Auto-check passed
Gestures
kingstinct/react-native-healthkit
Software Mansion's best practices for gestures in React Native apps using React Native Gesture Handler.
716 GitHub starsUsed in 1 repo~1.7k tokens
Auto-check passed
Expo Deployment
kingstinct/react-native-healthkit
Deploying Expo apps to iOS App Store, Android Play Store, web hosting, and API routes
716 GitHub starsUsed in 4 repos~930 tokens
Auto-check passed
React Native Healthkit Contributing
kingstinct/react-native-healthkit
How to change the react-native-healthkit monorepo itself (packages/core, packages/react-native-healthkit, packages/health-records, apps/example).
716 GitHub stars~1.3k tokensUpdated today
Auto-check passed
Multithreading
kingstinct/react-native-healthkit
Software Mansion's best practices for multithreading in React Native apps using react-native-worklets.
716 GitHub starsUsed in 1 repo~1.1k tokens
Auto-check passed
Expo Dev Client
kingstinct/react-native-healthkit
Build and distribute Expo development clients locally or via TestFlight
716 GitHub starsUsed in 5 repos~879 tokens
Auto-check passed

Works with

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 kingstinct/react-native-healthkit. 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 kingstinct/react-native-healthkit --skill animations -a claude-code`. Or copy the skill folder (.agents/skills/react-native-best-practices/references/animations in kingstinct/react-native-healthkit) 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 kingstinct/react-native-healthkit --skill animations -a codex`. Or copy the skill folder (.agents/skills/react-native-best-practices/references/animations in kingstinct/react-native-healthkit) 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 kingstinct/react-native-healthkit --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?

Animations is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Animations use?

About 937 tokens (SKILL.md is roughly 3.7k 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 (software-mansion-labs/skills, 291 stars), Typegpu (software-mansion-labs/skills, 291 stars), Build Awwwards Quality Sites (nirholas/three.ws, 227 stars) and Shader for Interfaces (v2space-labs/shader-for-interfaces, 115 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Animations?

kingstinct (a GitHub organization) maintains it in kingstinct/react-native-healthkit, which has 716 GitHub stars. The repository holds 11 skills in this directory. The repository was last updated on October 7, 2026.

Source: kingstinct/react-native-healthkit on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install Animations

Facts

At a glance

What it does

When your agent uses it

Example prompts

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

Animations

Critical Rules

References

Files

Compare with similar skills

Similar skills

More from kingstinct/react-native-healthkit

Related

Questions about Animations