react-native-brownfield-migration

Agent Skills

A collection of agent-optimized skills for AI coding assistants. The repo ships raw Agent Skills for assistants that can read skills/ directly, plus marketplace metadata for both Claude Code and Codex plugin workflows.

Available Skills

Skill	Description
react-native-best-practices	React Native optimization best practices from Callstack
github	GitHub workflow patterns for PRs, code review, branching
github-actions	GitHub Actions workflow patterns for React Native simulator/emulator build artifacts
upgrading-react-native	React Native upgrade workflow: templates, dependencies, and common pitfalls
react-native-brownfield-migration	Incremental migration strategy to adopt React Native or Expo in native apps using @callstack/react-native-brownfield, with setup, packaging, and phased integration steps
create-react-native-library	Scaffold React Native libraries with create-react-native-library

React Native Best Practices

Performance optimization skills based on The Ultimate Guide to React Native Optimization by Callstack.

Covers:

• JavaScript/React: Profiling, FPS, re-renders, lists, state management, animations
• Native: iOS/Android profiling, TTI, memory management, Turbo Modules
• Bundling: Bundle analysis, tree shaking, R8, app size optimization

Quick Start

Claude Code

Use the Claude Code marketplace metadata in .claude-plugin/marketplace.json.

1. Add the marketplace:

/plugin marketplace add callstackincubator/agent-skills

2. Install the skill you want:

/plugin install react-native-best-practices@callstack-agent-skills

Other available installs:

/plugin install github@callstack-agent-skills
/plugin install github-actions@callstack-agent-skills
/plugin install upgrading-react-native@callstack-agent-skills
/plugin install react-native-brownfield-migration@callstack-agent-skills
/plugin install create-react-native-library@callstack-agent-skills

Or use the interactive menu:

/plugin menu

For local development:

claude --plugin-dir ./path/to/agent-skills

Once installed, Claude will automatically load the relevant skill based on the task.

OpenAI Codex

This repo supports Codex in two different ways.

Option 1: Add the bundled Codex plugins

Codex can add the bundled plugins from this repository automatically using .agents/plugins/marketplace.json, so a separate install script is not needed.

Option 2: Install standalone skills

All major AI coding assistants support the Agent Skills standard.

Install via skill-installer:

$skill-installer install react-native-best-practices from callstackincubator/agent-skills
$skill-installer install create-react-native-library from callstackincubator/agent-skills

Or clone manually:

# Project-level
git clone https://github.com/callstackincubator/agent-skills.git
cp -r agent-skills/skills/* .codex/skills/

# User-level
cp -r agent-skills/skills/* ~/.codex/skills/

Restart Codex to recognize newly installed skills.

Usage: Type $ to mention a skill or use /skills command.

These skills include agents/openai.yaml metadata for Codex Skills UI compatibility.

Other AI Assistants

Cursor

Option 1: Import rules from GitHub

Cursor’s GitHub / GitLab rule importer only discovers .mdc files (typically under .cursor/rules/). This repository includes those files so import succeeds.

1. Open Cursor Settings (Cmd+Shift+J / Ctrl+Shift+J)
2. Navigate to Rules and use Import rules from GitHub (wording may vary by version), or add a remote rule from a Git URL
3. Enter: https://github.com/callstackincubator/agent-skills.git

Imported rules are short Cursor project rules; they point at the full Agent Skills under skills/. Clone or copy the skills/ tree into your workspace when you want the model to read the complete markdown skills locally (see Option 2).

Option 2: Local Installation

# Project-level
git clone https://github.com/callstackincubator/agent-skills.git .cursor/skills/agent-skills

# User-level (available in all projects)
git clone https://github.com/callstackincubator/agent-skills.git ~/.cursor/skills/agent-skills