React Native Best Practices Skill for Claude Code: Performance Guide by Callstack

Gives your assistant Callstack's React Native performance playbook for jank, slow startup, big bundles, memory leaks and native modules.

Installs: 31K; on skills.sh
Stars: 1.7K; on GitHub
Files: 43; besides SKILL.md
Updated: Oct 2026; last repo commit

This skill makes your assistant follow a measure, fix, re-measure loop for React Native performance, based on Callstack's Ultimate Guide to React Native Optimization. It loads the matching guide for the problem, such as list scrolling, re-renders, TTI, bundle size, animations or memory.

It tells the assistant not to suggest memoization or compiler changes without a measured render or FPS problem. To measure, it runs commands such as npx react-native bundle and the agent-device profiler.

Good for

React Native developers chasing dropped frames, slow lists or laggy inputs
Teams shrinking app size or startup time
Reviewers checking React Native code for performance problems
Native module authors working with Turbo Modules

Install react-native-best-practices

Claude Code

Copy this prompt.

Install the react-native-best-practices skill in Claude Code. Run this command:

npx skills add https://github.com/callstackincubator/agent-skills --skill react-native-best-practices

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

From its listing on skills.sh. Source.

What's in the skill

When it loads

Provides React Native performance optimization guidelines for FPS, TTI, bundle size, memory leaks, re-renders, and animations. Applies to tasks involving Hermes optimization, JS thread blocking, bridge overhead, FlashList, native modules, or debugging jank and frame drops.

Sections in SKILL.md

Overview
When to Apply
Security Notes
Priority-Ordered Guidelines
Quick Reference
Optimization Workflow
Review Guardrails
Critical: FPS & Re-renders
Critical: Bundle Size
High: TTI Optimization
High: Native Performance
References
JavaScript/React (js-)
Native (native-)
Bundling (bundle-)
Problem → Skill Mapping

Key facts

Author: Callstack (GitHub: callstackincubator)
License: MIT
Installs on skills.sh: 31,008 (Nov 2, 2026)
GitHub stars: 1,694 for the whole repo (Nov 2, 2026)
Based on: Callstack's The Ultimate Guide to React Native Optimization
What installs: 44 files including SKILL.md: 29 reference guides, 12 images, POWER.md and agents/openai.yaml
Works in: OpenAI Codex (Plugins); Claude Code, Cursor, GitHub Copilot, Gemini CLI, OpenCode and others through the skills CLI
Last commit: Oct 8, 2026 (repo)

What it includes

Measure, optimize, re-measure, validate; revert if nothing improved
Capture baseline metrics, apply the targeted fix, run the same measurement again and confirm the gain, for example FPS 45 to 60. If metrics did not improve, revert and try the next fix.
Try: “My checkout screen drops frames. Profile it and fix the worst re-render.”
Read · Optimization workflow
Four rules that stop speculative advice
Check library versions before API fixes. Do not change useMemo or useCallback deps without evidence. Do not report stale closures without a repro. Measure the target interaction, not tree size.
Review guardrails
Profiles with agent-device react-devtools, or the DevTools Profiler by hand
Runs agent-device react-devtools status, wait, profile start and stop, then profile slow, rerenders and timeline. Release builds need @callstack/inspector first. Fixes include FlatList or FlashList and React Compiler after profiling.
Runs code · Critical: FPS and re-renders
Builds a bundle, opens source-map-explorer, compares sizes
Runs npx react-native bundle with a source map, then npx source-map-explorer, and compares file size before and after. Fixes include avoiding barrel imports and enabling R8 on Android.
Runs code · Critical: bundle size
Measures cold-start time and lists startup fixes
Use react-native-performance markers and only count cold starts. Fixes include disabling Android bundle compression on React Native 0.78 and earlier, native navigation and preloading screens.
High: TTI optimization
Profiles with Xcode Instruments or Android Studio CPU Profiler
Profile natively, then move heavy work off the main thread, prefer async Turbo Module methods and use C++ for shared hot paths.
High: native performance
Six categories ranked from critical to medium
FPS and re-renders and bundle size are critical, TTI and native performance are high, memory is medium-high, animations are medium.
Priority table
10 reference files named js-*
Lists, profiling, FPS, memory leaks, atomic state, concurrent React, React Compiler, Reanimated, bottom sheets and uncontrolled inputs.
Read · JavaScript and React guides
10 reference files named native-*
Turbo Modules, SDKs over polyfills, measuring TTI, threading, profiling, platform setup, view flattening, memory patterns, memory leaks and Android 16 KB alignment.
Read · Native guides
9 reference files named bundle-*
Barrel exports, JS and app analysis, tree shaking, R8, Hermes mmap, native assets, library size and code splitting.
Read · Bundling guides
11 common problems, each pointing to one or two guides
For example slow startup goes to native-measure-tti then bundle-analyze-js, and TextInput lag goes to js-uncontrolled-components.
Problem to guide map
Review commands, pin versions, serve remote chunks only from your own origin
Treat shell commands as local developer operations, treat libraries as dependencies, and load hosted chunks only from trusted HTTPS origins pinned to the release.
Security notes

From the official docs

Permissions

Medium risk

The assistant runs build and profiling commands in your React Native project and writes bundle files there. Use a branch, and read each command before it runs.

What it can do

Read your data
Create and change things
Delete things
Read-only mode

Watch out for

It runs build and analysis commands in your project
SKILL.md has the agent run npx react-native bundle, which writes output.js and a source map, then npx source-map-explorer. Run it on a branch and review each command first. github.com
It calls agent-device for render profiling
The profiling steps call agent-device react-devtools. SKILL.md gives no install step for it and offers a manual fallback with React Native DevTools. github.com
Reference guides tell you to add packages
For release-build profiling, js-profile-react.md has you install @callstack/inspector. Treat any package as a normal dependency and pin its version. github.com
Its own security notes say to review commands first
SKILL.md: "Treat shell commands in these references as local developer operations. Review them before running, prefer version-pinned tooling, and avoid piping remote scripts directly to a shell." github.com

Technical details

Turning on read-only	No read-only switch. Ask the assistant to explain a command before it runs it.
Talks to	npm registry, when npx fetches a tool it does not have

Questions

What does the react-native-best-practices skill do?

It makes your assistant follow a measure, fix, re-measure loop for React Native performance. It covers FPS, re-renders, startup time, bundle size, memory leaks, animations and native modules, with 29 reference guides behind it.

How do I install it?

Use the install box above. The README also shows a skills CLI command with a skill name to install only this one, and a Plugins route in OpenAI Codex that installs the Building React Native Apps bundle.

Do I need agent-device?

Only for the React render profiling steps. SKILL.md gives a manual fallback that uses React Native DevTools from Metro or the Dev Menu. SKILL.md gives no install step for it.

Will it change my code?

It lists fixes, such as replacing ScrollView with FlatList. Your assistant makes those edits the way it makes any edit, so review the diff. It also writes a bundle file and source map when it measures size.

Does it cover Expo?

Partly. SKILL.md mentions the Expo CLI and Expo SDK 52 tree shaking, and a reference covers Expo Atlas. The guide is about React Native in general.

Is it safe?

It runs npx build and analysis tools in your project and may suggest installing packages. The skill's own security notes say to review commands, pin versions and avoid piping remote scripts to a shell.

Does it work in Codex?

Yes, the README documents it. Open Plugins in Codex, search for react native and install the Building React Native Apps bundle, which includes this skill.

Is this the same as the other Callstack skills?

No. The repo has other skills for navigation, TV, library creation, upgrades, testing and migration. This page covers only the performance skill.

Information

updated Nov 2, 2026

Repository: callstackincubator/agent-skills
Folder: skills/react-native-best-practices

callstackincubator/agent-skills skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 7

react-native-best-practices SKILL.md · github.com
callstackincubator/agent-skills README · github.com
agent-skills LICENSE · github.com
Skill folder on GitHub · github.com
react-native-best-practices on skills.sh · skills.sh
js-profile-react.md · github.com
bundle-analyze-js.md · github.com