Agent skill · Callstack
React Native Performance (Callstack) skill for Claude Code, Codex and Cursor
Communityname: react-native-best-practices★ 1.7k (repo)pushed 2026-10-08MITSKILL.md on GitHubchecked 2026-11-07
What it does, in the publisher's words
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.
The description field of the SKILL.md. The agent reads only this at startup and decides from it when to load the full skill.
Install React Native Performance (Callstack)
The skills CLI copies the skill into the folder of each agent you pick (Claude Code, Codex, Cursor, Copilot, Gemini CLI, OpenCode, Windsurf...). Add -g for all projects. Needs Node.js 22.20+. docs
npx skills add callstackincubator/agent-skills --skill react-native-best-practices
This repo is a plugin marketplace. Inside Claude Code, add it and install the plugin that holds the skill (building-react-native-apps, testing-react-native-apps, migrating-to-react-native), or copy only this skill into ~/.claude/skills. docs
/plugin marketplace add callstackincubator/agent-skills /plugin install <plugin>@callstack-agent-skills # or only this skill: npx skills add callstackincubator/agent-skills --skill react-native-best-practices -a claude-code
Download the skill folder, zip it, then Customize > Skills > + > Create skill > Upload a skill. Code execution must be on (Settings > Capabilities). docs
git clone --depth 1 https://github.com/callstackincubator/agent-skills.git /tmp/react-native-best-practices-src cp -r /tmp/react-native-best-practices-src/skills/react-native-best-practices ./react-native-best-practices zip -r react-native-best-practices.zip react-native-best-practices
Codex reads skills from .agents/skills in the repo or ~/.agents/skills. Type $ in Codex to use one. docs
npx skills add callstackincubator/agent-skills --skill react-native-best-practices -a codex
gh skill (GitHub CLI 2.90+, preview) installs it for Copilot in VS Code, the CLI and the cloud agent. Copilot also reads .github/skills and ~/.copilot/skills. docs
gh skill install callstackincubator/agent-skills react-native-best-practices
Cursor reads .cursor/skills, .agents/skills and ~/.cursor/skills (and .claude/skills). It does not install loose skills from a GitHub URL, so copy it in. docs
npx skills add callstackincubator/agent-skills --skill react-native-best-practices -a cursor
Installs from the GitHub repo; --path picks this skill out of the repo. Default scope is user (all projects). docs
gemini skills install https://github.com/callstackincubator/agent-skills.git --path skills/react-native-best-practices
OpenCode reads .opencode/skills, ~/.config/opencode/skills and the Claude and .agents folders. docs
npx skills add callstackincubator/agent-skills --skill react-native-best-practices -a opencode
Windsurf (now Devin Desktop) reads .devin/skills, .windsurf/skills and ~/.codeium/windsurf/skills. docs
npx skills add callstackincubator/agent-skills --skill react-native-best-practices -a windsurf
Works with
Claude Code, Claude.ai and Claude Desktop, Codex, GitHub Copilot, Cursor, Gemini CLI, OpenCode, Windsurf and other agents that read the open Agent Skills format.
What's in the 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
- Attribution
Bundled files
- POWER.md
- agents/openai.yaml
- references/bundle-analyze-app.md
- references/bundle-analyze-js.md
- references/bundle-barrel-exports.md
- references/bundle-code-splitting.md
- references/bundle-hermes-mmap.md
- references/bundle-library-size.md
- references/bundle-native-assets.md
- references/bundle-r8-android.md
- references/bundle-tree-shaking.md
- references/images/bundle-treemap-source-map-explorer.png
- references/images/controlled-textinput-pingpong.png
- references/images/devtools-flamegraph.png
- references/images/emerge-xray-ios.png
- references/images/expo-atlas-treemap.png
- references/images/flashlight-flatlist-vs-flashlist.png
- references/images/fps-drop-graph.png
- references/images/memory-heap-snapshot.png
- references/images/tti-warm-start-diagram.png
- + 23 more
Loaded only when the instructions point to them.
Facts
- Skill name
- react-native-best-practices
- Publisher
- Callstack (community)
- Repo
- callstackincubator/agent-skills
- License
- MIT
- SKILL.md size
- 1,214 words, 233 lines
- Bundled files
- 43, 30 docs
- Repo stars
- 1.7k (as of 2026-10-24)
- SKILL.md checked
- 2026-11-07
More skills from callstackincubator/agent-skills
- React Native CI on GitHub Actions: GitHub Actions workflows that build React Native apps for simulators and emulators.
- Upgrading React Native: Upgrades a React Native app by applying template diffs and native iOS and Android changes.
Related mobile skills
- React Native Best Practices (Vercel) · Vercel
- EAS App Store Submission · Expo
- EAS Update · Expo
- Expo Native UI · Expo
- Expo Router · Expo
- Expo SDK Upgrade · Expo
FAQ
What does the react-native-best-practices skill do?+
Finds and fixes React Native slowdowns: FPS, startup time, bundle size, memory, re-renders. In its own SKILL.md, Callstack describes it as: "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."
How do I install the react-native-best-practices skill?+
Run npx skills add callstackincubator/agent-skills --skill react-native-best-practices and pick your agents, or use the tab for your agent above. In Claude Code the skill ends up in ~/.claude/skills/react-native-best-practices/SKILL.md; in Codex and Cursor in .agents/skills/react-native-best-practices/.
Does React Native Performance (Callstack) work in Codex, Cursor and Copilot, or only Claude?+
It's a standard SKILL.md, so any agent that reads the Agent Skills format can use it: Claude Code, the Claude apps, Codex, GitHub Copilot, Cursor, Gemini CLI, OpenCode, Windsurf and more.
Who maintains React Native Performance (Callstack)?+
Callstack (a community project), in the callstackincubator/agent-skills repo on GitHub, last pushed 2026-10-08. License: MIT.
Read a skill's SKILL.md and scripts before you install it: skills aren't verified by any agent vendor. Claude skills marketplace · How to install skills · MCP servers