# reanimated-skia-performance

A skill that writes and reviews fast React Native animations and 2D graphics on Reanimated v4 and Skia. Useful when the UI stutters or you need custom drawing.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 955 installs · ★ 24
- Author: andreev-danila
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/andreev-danila/skills/tree/HEAD/skills/reanimated-skia-performance/SKILL.md
- Updated: 2026-07-21
- HTML: https://affpapa.org/en/nevibecode/skills/reanimated-skia-performance

## What it does

The skill sets the rules an agent follows when writing or reviewing animation code: state stays on the UI thread via `useSharedValue`, `useDerivedValue` and worklets, and the declarative Reanimated v4 API replaces legacy `Animated`. App code should call `shared.get()` and `shared.set()` rather than touch `.value`, which keeps React Compiler happy. JS-to-UI crossings are kept to a minimum, and `runOnJS` or `scheduleOnRN` is reserved for side effects that cannot be avoided.

With Skia the rule is blunt: no React render per frame. A `SharedValue` goes straight into props and uniforms, the runtime effect is compiled once with `useMemo`, and shader time comes from `useClock` wrapped in `useDerivedValue`. The skill also covers the usual jobs — gesture handling through the Gesture Builder API, CSS transitions and keyframes in Reanimated v4, Layout Animations for mount and unmount, and a `__DEV__` slider panel for tuning configs. A pitfalls list names the common ones: reading a shared value during render, allocating arrays or paths every frame, a uniform declared in the shader but never passed.

Four reference files ship with it: Reanimated v4 patterns, Skia shaders, the dev tuning panel, and a performance checklist. Worth installing if your project already runs `react-native-reanimated` v4 or newer alongside `@shopify/react-native-skia` — on older Reanimated the CSS transition and keyframe examples will not compile.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add andreev-danila/skills --skill reanimated-skia-performance -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/reanimated-skia-performance/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/reanimated-skia-performance/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add andreev-danila/skills --skill reanimated-skia-performance -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/reanimated-skia-performance/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add andreev-danila/skills --skill reanimated-skia-performance -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/reanimated-skia-performance/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install andreev-danila/skills reanimated-skia-performance
```

2. **Manually: put the files in place**
- File: `.github/skills/reanimated-skia-performance/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add andreev-danila/skills --skill reanimated-skia-performance -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/andreev-danila/skills --path skills/reanimated-skia-performance
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/reanimated-skia-performance/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add andreev-danila/skills --skill reanimated-skia-performance -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/andreev-danila/skills/tree/HEAD/skills/reanimated-skia-performance/SKILL.md

## When to use it
- find out why an animation stutters and where the JS thread stalls
- move a pan gesture onto the Gesture Builder API and shared values
- draw a Skia Canvas scene with a shader driven by time
- tune spring configs or shader uniforms with dev-mode sliders
- replace legacy `Animated` with the declarative Reanimated v4 APIs

## Example prompts
- Rewrite this screen with Reanimated v4: pan gesture via Gesture Builder, state in shared values, no runOnJS inside onUpdate
- Build a Skia shader with an animated time uniform, compile the effect once with useMemo
- Add a dev panel with sliders for tuning the spring config, keep the panel in its own component

## Similar
- [animate-expo](https://affpapa.org/en/nevibecode/skills/animate-expo.md) — skill · 137900 installs
- [react-native-design](https://affpapa.org/en/nevibecode/skills/react-native-design.md) — skill · 15522 installs
- [react-native-dev](https://affpapa.org/en/nevibecode/skills/react-native-dev.md) — skill · 1900 installs
- [react-native](https://affpapa.org/en/nevibecode/skills/jezweb-react-native.md) — skill · 1300 installs
- [truesheet-usage](https://affpapa.org/en/nevibecode/skills/truesheet-usage.md) — skill · 824 installs
- [react-native-ease-refactor](https://affpapa.org/en/nevibecode/skills/react-native-ease-refactor.md) — skill · 937 installs

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md