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

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

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: 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.

Other AI Assistants

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.

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

Repo Structure

agent-skills/
├── .claude-plugin/
│   └── marketplace.json     # Claude Code marketplace definition
├── .agents/
│   └── plugins/
│       └── marketplace.json # Codex marketplace definition for bundled plugins
├── plugins/
│   ├── building-react-native-apps/
│   └── testing-react-native-apps/
└── 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 skills
    │       ├── native-*.md       # Native iOS/Android skills
    │       └── bundle-*.md       # Bundling & app size skills
    │
    ├── github/
    │   ├── SKILL.md              # Main skill file with PR workflow patterns
    │   └── references/           # Detailed GitHub workflow files
    │
    ├── github-actions/
    │   ├── SKILL.md              # Main skill file for GitHub Actions build artifacts
    │   ├── agents/openai.yaml    # Codex Skills UI metadata
    │   └── references/           # iOS/Android action templates and download flows
    │
    ├── upgrading-react-native/
    │   ├── SKILL.md              # Main skill file with RN upgrade workflow routing
    │   └── references/           # Detailed upgrade flow files
    │
    └── react-native-brownfield-migration/
        ├── SKILL.md              # Main skill file for Expo/bare path routing
        ├── agents/openai.yaml    # Codex Skills UI metadata
        └── references/           # Brownfield packaging and integration flow files

Use .claude-plugin/marketplace.json for Claude Code plugin installs and .agents/plugins/marketplace.json for Codex plugin installs.

The standalone skills/ directory contains repo-local skills. The plugins/ directory contains installable Codex plugin bundles.

Contributing

Contributions welcome! Skills should be:

• Actionable: Step-by-step instructions, not theory
• Searchable: Clear headings and keywords
• Complete: Include code examples and common pitfalls

When adding or editing skills, follow the agentskills.io specification and Claude Code best practices. The maintainer checklist lives in AGENTS.md, with supporting details in docs/skill-conventions.md.

Roadmap / Work in Progress

This is just the start! The following features are planned or in progress.

Visual Feedback Integration (Planned)

Several skills involve interpreting visual profiler output (flame graphs, treemaps, memory snapshots). AI agents cannot yet process these autonomously.

Affected skills:

• js-profile-react.md - React DevTools flame graphs
• js-measure-fps.md - FPS graphs and performance overlays
• native-profiling.md - Xcode Instruments / Android Studio Profiler
• native-measure-tti.md - TTI timeline visualization
• native-view-flattening.md - View hierarchy inspection
• bundle-analyze-js.md - Bundle treemap visualization
• bundle-analyze-app.md - App size breakdown (Emerge Tools, Ruler)

Planned solution: MCP (Model Context Protocol) integration for screenshot capture and visual analysis. Contributions welcome!

Complementary Skills

For complete coverage, consider pairing with:

• Vercel React Best Practices - React/Next.js web optimization (40+ rules)

Future Work

• MCP integration for visual profiler feedback
• Additional skills for debugging, testing, and CI/CD
• More code examples and interactive tutorials

Made with ❤️ at Callstack

React Native performance skills based on The Ultimate Guide to React Native Optimization.

Callstack is a group of React and React Native experts. Contact us at hello@callstack.com if you need help with performance optimization or just want to say hi!

Like what we do? ⚛️ Join the Callstack team and work on amazing React Native projects!