callstack-react-native-skills: Production React Native Guidance for AI Assistants

Generic coding assistants know React well and React Native badly — native modules, upgrade pains, and TV targets are where they start guessing. Callstack, a team of React and React Native experts, packaged the workflows from its production app work into Agent Skills, so the agent applies the same playbooks its consultants use.

Why This Skill Matters

The repository organizes eight Callstack-maintained skills into three installable bundles. Building React Native Apps carries the five build-side skills: performance (react-native-best-practices), navigation (react-navigation), TV (react-native-tv-best-practices), library creation (create-react-native-library), and upgrades (upgrading-react-native). Testing React Native Apps adds github-actions plus three external skills hosted in separate repos — React Native Testing Library, agent-device, and dogfood — for writing tests, producing CI artifacts, automating devices, and exploratory QA. Migrating to React Native holds assess-react-native-migration and react-native-brownfield-migration for native teams adopting RN incrementally.

Each skill starts with a SKILL.md and can include focused material under references/, following the Agent Skills specification. The performance skill builds on Callstack's ebook, The Ultimate Guide to React Native Optimization — these are consultant-grade references, not quick tips.

Installation

The skills CLI installs the whole set and asks which assistant and scope to target:

npx skills@latest add callstackincubator/agent-skills --skill '*'

For one skill, pass its name:

npx skills@latest add callstackincubator/agent-skills --skill react-native-best-practices

OpenAI Codex users can skip the CLI: open Plugins, search for "react native", and install the bundle you need. If your assistant does not support the skills CLI, the repo's AI Assistant Integration Guide documents direct setup for Cursor, GitHub Copilot, Claude API, ChatGPT, Windsurf, and others.

Real Workflow: A Performance Review and an Upgrade Plan

Once installed, ask naturally — the agent selects the relevant skill from the task context. The README's own examples:

Review this React Native screen for performance problems.

That routes into react-native-best-practices, which covers profiling and improving FPS, startup time, rendering, memory, bundle size, animations, and native integration. A follow-up like the README's second example — "Plan an upgrade from this project's React Native version to the latest supported release." — routes into upgrading-react-native, which applies template diffs, updates dependencies and native projects, and verifies the result.

The migration bundle answers the question every native team asks first. assess-react-native-migration audits the product and its codebases, chooses a migration path, and defines a representative checkpoint; react-native-brownfield-migration then packages React Native or Expo into the existing iOS and Android apps in phases.

Tips

• Install the single bundle that matches the job at hand rather than all three — the CLI lets you pick skills interactively or by name.
• The testing bundle's external skills live in their own repositories, so check what agent-device and dogfood cover there when you rely on them in CI.
• The navigation skill targets React Navigation 7 specifically — stacks, tabs, drawers, headers, sheets, and safe-area behavior.
• Plugin manifests collect each bundle for Claude Code and Codex, which is what the Codex Plugins search finds.

When Not to Use This

If you are not building with React Native — and not a native team assessing a move to it — these bundles do not apply. And the skills encode specific library versions, React Navigation 7 among them; on a project pinned to older majors, verify the guidance against your version before letting the agent apply it.

See the leaderboard for more skills.