Getting Started

Requirements

Requirement	Notes
Node.js >= 22 (LTS)	For the CDP bridge MCP server
Claude Code CLI	npm install -g @anthropic-ai/claude-code
iOS Simulator or Android Emulator	At least one platform
Metro dev server running	npx expo start or npx react-native start

maestro-runner and agent-device are auto-installed on first plugin load. If auto-install fails, run /rn-dev-agent:setup for guided installation with manual fallback instructions.

Installation

From inside Claude Code:

# 1. Add the marketplace
/plugin marketplace add Lykhoyda/rn-dev-agent

# 2. Install the plugin
/plugin install rn-dev-agent@Lykhoyda-rn-dev-agent

# 3. Reload plugins to activate
/reload-plugins

After installing, navigate to your React Native project and run the setup check:

/rn-dev-agent:setup

This verifies all 9 prerequisites, retries failed installations, and gives manual instructions for anything it can’t fix automatically.

Keeping up to date

Enable auto-update in the plugin manager (Marketplaces tab). With auto-update enabled, Claude Code checks for new versions at startup.

Manual update:

/plugin update rn-dev-agent@Lykhoyda-rn-dev-agent
/reload-plugins

Setup for your app

No setup needed for most apps

The plugin connects to your running app via Metro’s CDP endpoint and reads the React fiber tree directly.

Zustand stores (one bridge call)

/rn-dev-agent:setup scaffolds .rn-agent/dev-bridge.ts and .rn-agent/globals.d.ts into your project. Then add a single registration call alongside your store definitions:

// App.tsx or app/_layout.tsx
import { getBridge } from './.rn-agent/dev-bridge';

getBridge()?.registerStores({
  auth: useAuthStore,
  cart: useCartStore,
});

No __DEV__ guard at the call site — getBridge() returns null in production and the optional chain is a no-op. Zero production cost. The bridge handles the dev-only global assignment internally.

/rn-dev-agent:setup proposes this edit automatically; you don’t have to write it by hand.

Redux

Auto-detected. No setup needed.

testIDs

Add testID to interactive elements for reliable component queries:

<Pressable testID="checkout-button" onPress={handleCheckout}>
  <Text testID="cart-badge">{itemCount}</Text>
</Pressable>

Project instructions: let /setup do it

/rn-dev-agent:setup injects the plugin’s tool-routing rules into your project’s CLAUDE.md automatically. It also scaffolds the bridge files and the .rn-agent/ directory in one pass.

The injection is idempotent — re-running /setup skips already-applied blocks.

If you want to inspect the rules first, see the CLAUDE.md template — the body after the --- separator is what gets appended to your project’s CLAUDE.md.

Your agent’s saved flows live in .rn-agent/

The plugin’s home in your project is .rn-agent/. Saved actions, the UI skeleton, navigation graph, and runtime state all live there. /setup scaffolds the directory; /doctor reports on its health.

See the Actions guide for what an action is, how to record one, and how the agent uses them.

First run

Navigate to your React Native project and start building:

cd /path/to/your-rn-app
claude

On startup the plugin auto-detects your project and installs dependencies. If anything fails, run:

/rn-dev-agent:setup

This checks all 9 prerequisites, retries failed installations, and gives manual instructions for anything it can’t fix automatically. Once everything is green:

/rn-dev-agent:rn-feature-dev add task priority levels with color coding and sort

Claude handles the rest — 8 phases from understanding to verified code with proof screenshots.

Install from source (development)

git clone https://github.com/Lykhoyda/rn-dev-agent.git
cd rn-dev-agent/scripts/cdp-bridge && npm install && npm run build && cd ../..

cd /path/to/your-rn-app
claude --plugin-dir /path/to/rn-dev-agent