Agent Skills

A collection of agent-optimized skills for AI coding assistants. Skills provide structured, actionable instructions for domain-specific tasks.

Available Skills

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

Install as Claude Code Plugin

1. Add the marketplace:

/plugin marketplace add callstackincubator/agent-skills

2. Install the skill:

/plugin install react-native-best-practices@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 use the React Native best practices skill when working on React Native projects.

Use with Other AI Assistants

All major AI coding assistants support the Agent Skills standard.

Cursor

Option 1: Install from GitHub (Recommended)

1. Open Cursor Settings (Cmd+Shift+J / Ctrl+Shift+J)
2. Navigate to Rules → Add Rule → Remote Rule (GitHub)
3. Enter: https://github.com/callstackincubator/agent-skills.git

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.

OpenAI Codex CLI

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.

Gemini CLI

Install from repository:

gemini skills install https://github.com/callstackincubator/agent-skills.git

Or install to workspace:

gemini skills install https://github.com/callstackincubator/agent-skills.git --scope workspace

Management commands:

• /skills list - view all discovered skills
• /skills enable <name> / /skills disable <name> - toggle availability
• /skills reload - refresh skill inventory

OpenCode

Clone to any supported skills directory:

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

# User-level
cp -r agent-skills/skills/* ~/.config/opencode/skill/

OpenCode also discovers Claude-compatible paths (.claude/skills/, ~/.claude/skills/).

Permission control in opencode.json:

{
  "permission": {
    "skill": {
      "*": "allow"
    }
  }
}

Other Assistants

For assistants without native skills support, point them to the skill file:

Read skills/react-native-best-practices/SKILL.md for React Native performance guidelines

Or reference specific topics:

Look up js-profile-react.md for React DevTools profiling instructions

Code Examples

The callstack/optimization-best-practices repository contains runnable code examples for:

• React Compiler setup
• Dedicated React Native SDKs vs web polyfills
• R8 code shrinking on Android

Other AI Assistants

See AI Assistant Integration Guide for detailed setup instructions with Cursor, GitHub Copilot, Claude API, ChatGPT, and other AI coding assistants.

Structure

Plugin Structure

agent-skills/
├── .claude-plugin/
│   └── marketplace.json     # Marketplace configuration
└── skills/
    └── react-native-best-practices/
        ├── SKILL.md              # Main skill file with quick reference
        └── references/           # Detailed skill files
            ├── images/           # Visual references for profilers, diagrams
            ├── js-*.md           # JavaScript/React skill

...