using-rn-dev-agent

Using rn-dev-agent

The React Native development plugin for Claude Code and Codex. 5 agents, 16 commands, 11 skills, and an MCP tool suite for live app work.

This skill is your front door. Before starting any RN work, use the decision tree below to route the user's intent to the right tool.

---

Host Surface Map

• Claude Code local development points at the repository root with claude --plugin-dir /path/to/rn-dev-agent; the root .claude-plugin/marketplace.json resolves the package at packages/claude-plugin/. The Claude package owns slash commands in commands/, Claude subagents in agents/, hooks in hooks/, skills in skills/, and the cdp MCP server.
• Codex local development points at /path/to/rn-dev-agent/packages/codex-plugin. Codex loads .codex-plugin/plugin.json, package-local shared skills in skills/, and the same cdp MCP server from .mcp.json. Claude slash commands, subagents, and hooks are not native Codex surfaces; treat commands/*.md and agents/*.md as playbooks to execute inline. No plugin hooks in Codex is expected.
• Keep the MCP server key named cdp in both manifests. Older sessions and docs assume this stable key.

Codex translation rule: when this skill routes to /rn-dev-agent:<command>, load the matching skill or command Markdown and run the underlying steps directly. For action inventory, the slash command wraps:

node <plugin-root>/rn-dev-agent-core/dist/learned-actions.js --json --filter "<keyword>"

(<plugin-root> = ${CLAUDE_PLUGIN_ROOT} on Claude, the Codex package root on Codex — the bundled runtime lives INSIDE the installed package.)

For action replay, prefer the MCP tool cdp_run_action after the same pre-flight checks documented in commands/run-action.md.

---

Decision Tree

What is the user asking for?
│
├── INVENTORY of reusable actions ("what's already automated for this?")
│   └─► /rn-dev-agent:list-learned-actions [keyword]
│       (Scans feedback memories + .rn-agent/actions/ + .rn-agent/skeleton.yaml.
│        ALWAYS run this BEFORE any device_* sequence — replay an
│        existing flow instead of recomposing primitives manually.
│        See feedback_execute_artifacts_before_manual.md.)
│
├── REPLAY a learned action (Maestro flow)
│   └─► /rn-dev-agent:run-action <name> [-e KEY=VALUE …] [--platform ios|android]
│       (Counterpart to list-learned-actions: list discovers, run executes.
│        Pre-flights mutates flag, appId match, parameter coverage. Use to
│        skip a 7-min manual walk when a 23-sec flow already exists.)
│
├── CREATE a new reusable action ("save this flow", "make this replayable")
│   └─► Load the creating-actions skill
│       (Inventory-dedup first, ground selectors in evidence, ASCII flow
│        diagram, M7 header, validate, then replay to promote. Covers both
│        the recorder path and direct YAML authoring.)
│
├── BUILD a new feature / "add X to the app"
│   └─► /rn-dev-agent:rn-feature-dev <description>
│       (8-phase pipeline — see rn-feature-development skill)
│
├── TEST an existing feature
│   └─► /rn-dev-agent:test-feature <description>
│       (Runs rn-tester protocol INLINE in parent session — MCP tools required.
│        Step 0 is automatic artifact-first scan via list-learned-actions.)
│
├── BUILD + TEST (app not yet installed)
│   └─► /rn-dev-agent:build-and-test <description>
│       (Builds app via Expo/EAS, installs, starts Metro, then runs tester protocol inline)
│
├── Something is BROKEN on the current screen
│   └─► /rn-dev-agent:debug-screen
│       (Runs rn-debugger protocol INLINE in parent session — MCP tools required)
│
├── Plugin tools not working / environment broken
│   └─► /rn-dev-agent:setup
│       (13-check environment diagnostic with auto-retry + manual fallback,
│        then CLAUDE.md/nav-ref/store-exposure injection)
│
├── DIAGNOSE the environment (read-only, no changes)
│   └─► /rn-dev-agent:doctor
│       (Same 13-check diagnostic as setup Phase 1 — reports, never modifies)
│
├── Need PROOF for a PR ("record a demo", "capture proof", "PR video")
│   └─► Load the capturing-proof skill (or run /rn-dev-agent:proof-capture <feature-slug>)
│       (Rehearsal-gated video + screenshots + generated PR body)
│
├── FREEZE a verified action into a locked regression test
│   └─► /rn-dev-agent:lock-e2e <action-name>
│       (Strict no-repair run via cdp_lock_e2e_test, freezes to .rn-agent/e2e/;
│        the frozen suite runs via cdp_run_e2e_suite. For login, this is the
│        formal PR proof on the exact candidate; cdp_login_prologue is not.)
│
├── Watch tool activity live in a browser ("observability UI")
│   └─► /rn-dev-agent:observe
│       (Shows the observe web UI URL; stop/restart the server)
│
├── Audit project rules sync (Vercel rules)
│   └─► /rn-dev-agent:check-vercel-rules
│
├── REPORT a plugin bug / send feedback
│   └─► Load `sending-feedback` (or run /rn-dev-agent:send-feedback in Claude)
│       (Sanitized environment context → GitHub issue, user-confirmed)
│
├── Understand an existing feature (read, don't write)
│   └─► Spawn rn-code-explorer via Task tool (read-only, safe to spawn)
│       (Maps screens, state, navigation, testIDs, patterns)
│
├── Design architecture before implementing
│   └─► Spawn rn-code-architect via Task tool (read-only, safe to spawn)
│       (Fable-powered blueprint with testID placement + proof flow)
│
├── Review code before merging
│   └─► Spawn rn-code-reviewer via Task tool (read-only, safe to spawn)
│       (Confidence-filtered review, RN conventions + best practices)
│
├── About to start a real device journey (build / test / proof, end to end)
│   └─► /rn-dev-agent:run-workflow [journey-description]
│       (Loads the rn-workflow skill: declared package manager + deps,
│        read-only inventory, typed session recovery, one exclusive device,
│        managed integration/Metro, only the requested proof, reverse cleanup)
│
├── Just check if environment is ready
│   └─► /rn-dev-agent:check-env
│       (Quick cdp_status check, no setup attempt)
│
└── Extract the navigation graph
    └─► /rn-dev-agent:nav-graph
        (Maps all screens and navigators)