react-native-ai-skills

Runs an AI model inside a React Native phone app on the device itself, with nothing sent to a server — Apple's built-in intelligence, or a model file the app carries — starting from the question of which of the four available engines suits the job.

WHEN TO USE

SCOPE

USE FOR

Decide which on-device AI provider fits your React Native app before you build.
Download a language model file in the GGUF format from Hugging Face and run it on-device with llama.rn.
Add Apple Intelligence transcription, speech synthesis, or embeddings on iOS 26+.
Run MLC-LLM, an inference engine, with models like Llama, Phi, or Qwen and build-time optimizations.
Run low-level inference on custom neural-network models, such as CNNs, with the NCNN wrapper.
Wire several on-device providers into one app using the SetupAdapter pattern.

NOT FOR

Skip the NCNN path for LLM-only work; the other providers fit better.

This is a saved copy of the skill's SKILL.md instructions. It may differ from the upstream file or the version you install.

In this document (9)

React Native AI Skills

Overview

Example workflow for integrating on-device AI in React Native apps using the @react-native-ai ecosystem. Available provider tracks (can be combined):

Apple – Apple Intelligence (iOS 26+)
Llama – GGUF models via llama.rn
MLC – MLC-LLM models
NCNN – Low-level NCNN inference wrapper (vision, custom models)

Path Selection Gate (Must Run First)

Before selecting any reference file, classify the user request:

Select Apple:
- if you intend to build with: apple, Apple Intelligence, Apple Foundation Models
- if you want features: transcription, speech synthesis, embeddings on Apple devices
- optionally with capabilities: tool calling
Select Llama:
- if you intend to use the following technologies: llama, GGUF, llama.rn, HuggingFace, SmolLM
- if you want to perform the following operations: embedding model, rerank, speech model
Select MLC:
- if you intend to use a library that allows for custom models and involves build-time model optimizations
Select NCNN:
- if you need to use run low-level inference on bare metal tensors
- if you intend to run inference of custom models such as convolutional networks, multi-layer perceptrons, low-level inference, etc.
- DO NOT select NCNN if the prompt mentions LLMs only, this use case is better solved by other providers

Skill Format

Each reference file follows a strict execution format:

Quick Command
When to Use
Prerequisites
Step-by-Step Instructions
Common Pitfalls
Related Skills

Use the checklists exactly as written before moving to the next phase.

When to Apply

Reference this package when:

Integrating on-device AI in React Native apps
Installing and configuring @react-native-ai providers
Managing model downloads (llama, mlc)
Wiring providers with Vercel AI SDK (generateText, streamText)
Implementing SetupAdapter pattern for multi-provider apps
Debugging native module or Expo plugin issues

Priority-Ordered Guidelines

Priority	Category	Impact	Start File
1	Path selection and baseline	N/A	quick-start
2	Apple provider	N/A	apple-provider
3	Llama provider	N/A	llama-provider
4	MLC-LLM provider	N/A	mlc-provider
5	NCNN provider	N/A	ncnn-provider

Quick Reference

npm install

# Provider-specific install
npm add @react-native-ai/apple
npm add @react-native-ai/llama llama.rn
npm add @react-native-ai/mlc
npm add @react-native-ai/ncnn-wrapper

Route by path:

References

File	Impact	Description
quick-start	N/A	Shared preflight
apple-provider	N/A	Apple Intelligence setup and integration
llama-provider	N/A	GGUF models, llama.rn, model management
mlc-provider	N/A	MLC models, download, prepare, Expo plugin
ncnn-provider	N/A	NCNN wrapper, loadModel, runInference

Problem → Skill Mapping

Problem	Start With
Need path decision first	quick-start
Integrate Apple Intelligence	apple-provider
Run GGUF models from HuggingFace	llama-provider
Run MLC-LLM models (Llama, Phi, Qwen)	mlc-provider
Use NCNN for custom inference	ncnn-provider
Multi-provider app with SetupAdapter	quick-start → provider-specific
Expo + native module setup	Provider-specific (each has Expo notes)

Not standalone. This skill ships with callstackincubator/ai and only works together with that tool — install the tool first, then add this skill.

Run this outside your AI tool, using Node.js 22.20.0 or newer. Skills CLI 1.7.2 skips skill selection; prompts cancel installation without an interactive terminal. If choosing Project when asked about installation scope, open your project's folder before running this.

Install checklist

Check selected tools if a picker appears; Claude Code may be unchecked under Additional agents. ↑/↓ moves, Space toggles selections, Enter confirms.
Without a tool picker, check Installing to: for your intended tool. Stop if it names a different tool.
If asked, choose Symlink (Recommended) for shared files or Copy to all agents for separate copies; review the summary before confirming installation.
Install the find-skills skill? defaults to Yes, adding another skill for all projects. Choose No if you don't want that extra installation.

Skills CLI 1.7.2 sends install data to skills.sh by default, including the source, skill names, target tools and file details; GitHub sources are reported only when GitHub confirms the repository is public, while other remote sources can also be reported. Confirmed-public GitHub sources also trigger a security-audit request. Before installing, set the environment variable DO_NOT_TRACK=1 or DISABLE_TELEMETRY=1 to disable both.

npx skills add callstackincubator/ai --skill "react-native-ai-skills" --full-depth

After installing for Claude Code, open it in the installation project if you chose Project; Global makes the skill available across projects on this computer. Once Claude Code loads the skill, its description helps Claude decide when to use it.

If installation created a top-level skills folder that did not exist when your Claude Code session started, run /reload-skills in that session. Run it again after later changes in that folder.

View on GitHub