Help us improve
Share bugs, ideas, or general feedback.
Share bugs, ideas, or general feedback.
Share bugs, ideas, or general feedback.
Migrate React Native apps to newer versions by applying incremental diffs, updating iOS/Android configs, resolving CocoaPods and Gradle changes, and handling breaking API updates
npx claudepluginhub callstackincubator/agent-skills --plugin react-native-best-practicesGitHub Actions workflow patterns for React Native iOS simulator and Android emulator cloud builds with downloadable artifacts. Use when setting up CI build pipelines or downloading GitHub Actions artifacts via gh CLI and GitHub API.
GitHub patterns using gh CLI for pull requests, stacked PRs, code review, branching strategies, and repository automation. Use when working with GitHub PRs, merging strategies, or repository management tasks.
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.
Provides an incremental adoption strategy to migrate native iOS or Android apps to React Native or Expo using @callstack/react-native-brownfield for initial setup. Use when planning migration steps, packaging XCFramework/AAR artifacts, and integrating them into host apps.
Upgrades React Native apps to newer versions by applying rn-diff-purge template diffs, updating package.json dependencies, migrating native iOS and Android configuration, resolving CocoaPods and Gradle changes, and handling breaking API updates. Use when upgrading React Native, bumping RN version, updating from RN 0.x to 0.y, or migrating Expo SDK alongside a React Native upgrade.
Share bugs, ideas, or general feedback.
Own this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge.
Sign in to claimOwn this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge.
Sign in to claimBased on adoption, maintenance, documentation, and repository signals. Not a security audit or endorsement.
Use this agent when you need expert assistance with React Native development tasks including code analysis, component creation, debugging, performance optimization, or architectural decisions. Examples: <example>Context: User is working on a React Native app and needs help with a navigation issue. user: 'My stack navigator isn't working properly when I try to navigate between screens' assistant: 'Let me use the react-native-dev agent to analyze your navigation setup and provide a solution' <commentary>Since this is a React Native specific issue, use the react-native-dev agent to provide expert guidance on navigation problems.</commentary></example> <example>Context: User wants to create a new component that follows the existing app structure. user: 'I need to create a custom button component that matches our app's design system' assistant: 'I'll use the react-native-dev agent to create a button component that aligns with your existing codebase structure and design patterns' <commentary>The user needs React Native component development that should follow existing patterns, so use the react-native-dev agent.</commentary></example>
React Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing animations, or working with native modules.
Use this agent when you need expert assistance with React Native development tasks including code analysis, component creation, debugging, performance optimization, or architectural decisions. Examples: <example>Context: User is working on a React Native app and needs help with a navigation issue. user: 'My stack navigator isn't working properly when I try to navigate between screens' assistant: 'Let me use the react-native-dev agent to analyze your navigation setup and provide a solution' <commentary>Since this is a React Native specific issue, use the react-native-dev agent to provide expert guidance on navigation problems.</commentary></example> <example>Context: User wants to create a new component that follows the existing app structure. user: 'I need to create a custom button component that matches our app's design system' assistant: 'I'll use the react-native-dev agent to create a button component that aligns with your existing codebase structure and design patterns' <commentary>The user needs React Native component development that should follow existing patterns, so use the react-native-dev agent.</commentary></example>
React, Next.js, and React Native best practices with web design guidelines.
Validation and quality enforcement for React Native projects.
Use this agent when developing native iOS or Android applications, implementing React Native features, or optimizing mobile performance. This agent specializes in creating smooth, native-feeling mobile experiences. Examples:\n\n<example>\nContext: Building a new mobile app\nuser: "Create a TikTok-style video feed for our app"\nassistant: "I'll build a performant video feed with smooth scrolling. Let me use the mobile-app-builder agent to implement native performance optimizations."\n<commentary>\nVideo feeds require careful mobile optimization for smooth scrolling and memory management.\n</commentary>\n</example>\n\n<example>\nContext: Implementing mobile-specific features\nuser: "Add push notifications and biometric authentication"\nassistant: "I'll implement native push notifications and Face ID/fingerprint auth. Let me use the mobile-app-builder agent to ensure proper platform integration."\n<commentary>\nNative features require platform-specific implementation and proper permissions handling.\n</commentary>\n</example>\n\n<example>\nContext: Cross-platform development\nuser: "We need this feature on both iOS and Android"\nassistant: "I'll implement it using React Native for code reuse. Let me use the mobile-app-builder agent to ensure native performance on both platforms."\n<commentary>\nCross-platform development requires balancing code reuse with platform-specific optimizations.\n</commentary>\n</example>
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.
| 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 |
Performance optimization skills based on The Ultimate Guide to React Native Optimization by Callstack.
Covers:
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
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.
This repo supports Codex in two different ways.
Option 1: Install the bundled Codex plugins
npx codex-plugin add callstackincubator/agent-skills
This reads .agents/plugins/marketplace.json, installs the bundled plugins into .codex/plugins/, and makes them available after restarting Codex.
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
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.
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.
Cmd+Shift+J / Ctrl+Shift+J)https://github.com/callstackincubator/agent-skills.gitImported 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
Usage: Type / in Agent chat to search and select skills by name.
Install from repository:
gemini skills install https://github.com/callstackincubator/agent-skills.git
Or install to workspace: