rn-dev-agent

Test a React Native feature on the running simulator/emulator. Verifies UI, user flows, and internal state. Generates a persistent Maestro test file.

Diagnose why the current screen is broken, showing unexpected content, or crashing. Gathers parallel evidence from all layers and applies a targeted fix.

Check that the React Native development environment is ready for testing -- Metro running, app loaded, CDP connected, no active errors.

Build the Expo/React Native app (local or EAS), install on simulator/emulator, start Metro, then test the specified feature end-to-end.

Guided feature development for React Native — explore codebase, design architecture, implement, verify live on device, and review quality.

Capture PR-ready proof artifacts — video recording, screenshots, and generated PR body for a feature. Validates the recording shows the expected feature before presenting.

Compact the Experience Engine — scan telemetry, generate candidates, auto-promote ghost recoveries, decay stale heuristics. Run periodically or after a batch of feature development sessions.

Export anonymized experience bundle for sharing across projects or team members. Strips paths, secrets, PII. Outputs YAML to ~/.claude/rn-agent/exports/.

Import an experience bundle from a teammate or another project. Validates format, checks for contradictions, adds heuristics at 70% confidence.

Show Experience Engine health — telemetry size, heuristic stats, confidence distribution, candidate backlog, token usage.

Extract, inspect, and query the app navigation graph — a complete map of all screens and navigators.

Send feedback or report a bug for the rn-dev-agent plugin. Collects sanitized environment context and creates a GitHub issue. No sensitive data (paths, secrets, PII) is transmitted.

Full onboarding for a new project — runs /doctor diagnostics, then injects the CLAUDE.md template + nav-ref instrumentation + Zustand store exposure so the plugin works without the user having to read documentation.

Diagnose installation health. Check Node, CDP bridge, agent-device, maestro-runner, simulators, Metro, CDP, injected helpers, ffmpeg, physical devices, plugin version, Vercel rules sync. Reports what's missing — does NOT modify your project.

List persisted "learned actions" — feedback memories, Maestro flows, UI skeletons, and plugin commands that should be consulted before composing new device_* primitives. Wraps scripts/learned-actions.mjs for programmatic discovery.

Execute a learned Maestro flow ("action") by name with optional -e KEY=VALUE parameters. Looks the flow up via scripts/learned-actions.mjs (same inventory as /rn-dev-agent:list-learned-actions), then replays it with maestro-runner. Counterpart to /list-learned-actions — list discovers, run executes.

Run the Vercel rule audit: $ARGUMENTS

Tests React Native features on simulator/emulator. Verifies UI renders correctly, user flows work, and internal state matches expectations. Use when a feature has been implemented and needs verification. PARENT-SESSION-ONLY: requires MCP tools (cdp_*, device_*) — do NOT spawn via Task tool, run protocol inline in parent session (GH #31). Triggers: "test this feature", "verify it works", "check the implementation", "test on simulator", "run on device", "does it work" <example> Context: User just finished implementing a feature user: "test this feature on the simulator" assistant: "I'll use the rn-tester agent to verify the feature works on the running simulator." <commentary> Feature implementation is complete and needs live verification on device. </commentary> </example> <example> Context: User wants to verify a specific user flow user: "verify the login flow works — enter credentials, tap sign in, see the home screen" assistant: "I'll launch the rn-tester agent to walk through the login flow and verify each step." <commentary> User described a multi-step flow that needs end-to-end verification on a real device. </commentary> </example> <example> Context: User asks if something works after a code change user: "does the cart badge update when I add items?" assistant: "Let me use the rn-tester agent to test the add-to-cart flow and check the badge." <commentary> User is asking whether a feature works correctly, which requires live device testing. </commentary> </example>

Diagnoses broken or unexpected behavior in a React Native app running on simulator/emulator. Gathers parallel evidence (component tree, logs, network, store), narrows root cause, applies a fix, and verifies recovery. PARENT-SESSION-ONLY: requires MCP tools (cdp_*, device_*, collect_logs) — do NOT spawn via Task tool, run protocol inline in parent session (GH #31). Triggers: "something is broken", "debug this", "why isn't this working", "the screen is blank", "I see an error", "fix the crash" <example> Context: User sees an error on the simulator screen user: "I see a RedBox error on the simulator" assistant: "I'll launch the rn-debugger agent to diagnose the error and apply a fix." <commentary> Visible error on simulator requires structured diagnostic evidence gathering. </commentary> </example> <example> Context: App is showing unexpected behavior user: "the screen is blank after navigating to the profile tab" assistant: "Let me use the rn-debugger agent to gather evidence and find the root cause." <commentary> Blank screen with no obvious error needs parallel evidence gathering from CDP, logs, and native layers. </commentary> </example> <example> Context: App is frozen or unresponsive user: "the app froze and nothing responds to taps" assistant: "I'll launch the rn-debugger agent to check if the JS thread is blocked or paused." <commentary> Frozen app could be paused debugger, blocked JS thread, or native crash — needs structured diagnosis. </commentary> </example>

Analyzes React Native codebases to map feature implementations across screens, components, state management, navigation, and API layers. Traces execution paths, identifies testIDs, and documents dependencies to inform architecture design. Triggers: "explore the codebase", "how does this feature work", "map the screens", "trace the data flow", "find all testIDs", "what components exist" <example> Context: User wants to understand how a feature is implemented user: "how does the notification system work in this app?" assistant: "I'll launch the rn-code-explorer agent to trace the notification implementation across screens, store, and API layers." <commentary> Understanding an existing feature requires tracing through multiple code layers — screens, components, state, navigation. </commentary> </example> <example> Context: User needs to find all testIDs and routes before writing tests user: "map out all the screens and testIDs in the app" assistant: "I'll use the rn-code-explorer agent to scan the codebase for screens, routes, and testID coverage." <commentary> Mapping testIDs and routes across an entire app requires systematic codebase analysis. </commentary> </example>

Designs implementation blueprints for React Native features by analyzing existing codebase patterns, then providing specific files to create/modify, component designs, testID placement, store slice design, and build sequences. Triggers: "design the architecture", "plan the implementation", "create a blueprint", "what files do I need", "design the store slice", "plan the component structure" <example> Context: User wants to plan a new feature before implementing user: "design the architecture for a shopping cart feature" assistant: "I'll launch the rn-code-architect agent to analyze existing patterns and create a comprehensive implementation blueprint." <commentary> New feature needs an architecture blueprint with file list, component design, store slices, and build sequence. </commentary> </example> <example> Context: User needs a blueprint for modifying existing functionality user: "plan how to add real-time sync to the tasks screen" assistant: "I'll use the rn-code-architect agent to design the sync architecture based on existing codebase patterns." <commentary> Extending existing functionality requires understanding current patterns before designing the addition. </commentary> </example>

Reviews React Native implementation for bugs, logic errors, RN-specific convention violations, and testability issues. Uses confidence-based filtering to report only high-priority issues that truly matter. Triggers: "review this code", "check for bugs", "review the implementation", "are there any issues", "check conventions", "review before merging" <example> Context: User finished implementing a feature and wants quality review user: "review the code I just wrote for the profile edit screen" assistant: "I'll launch the rn-code-reviewer agent to check for bugs, convention violations, and testability issues." <commentary> Implementation complete — needs quality review with confidence-based filtering for real issues. </commentary> </example> <example> Context: User wants to check code before merging user: "check these files for any React Native specific issues before I merge" assistant: "I'll use the rn-code-reviewer agent to review for RN-specific conventions, null safety, and testID coverage." <commentary> Pre-merge review specifically for React Native conventions and common pitfalls. </commentary> </example>

Entry point for the rn-dev-agent plugin. Maps user intent to the right command, agent, or skill. Use at the START of any React Native development conversation. Triggers on "I want to build", "build a feature", "add a feature to the app", "test this", "something is broken", "fix the crash", "help with my React Native app", "how do I use rn-dev-agent".

Full 8-phase React Native feature development pipeline — discovery, codebase exploration, clarifying questions, architecture, implementation, live verification, quality review, and E2E proof. Use when building any new feature in a React Native or Expo app. Triggers on "build a feature", "add X to the app", "implement Y", "create a new screen", "rn-feature-dev", "feature development", "build me X".

This skill should be used when the user asks to "control the simulator", "take a screenshot", "boot the emulator", "install the app", "read UI hierarchy", "manage device state", "open a deep link", "grant permissions", "stream native logs", "disable animations", "change device locale", or needs guidance on xcrun simctl, adb commands, screenshot capture, Expo/EAS builds, or device lifecycle management for React Native testing.

This skill should be used when the user asks to "write a Maestro test", "create E2E flows", "add testIDs", "run UI tests", "run E2E tests", "verify a feature works", "test my screen", "set up maestro-runner", "mock network requests", "inspect store state", "write test assertions", or needs guidance on test timing rules, flow structure, multi-device testing, network mocking, Zustand inspection, or component tree queries for React Native apps.

This skill should be used when the user asks to "debug the app", "fix a crash", "diagnose a blank screen", "read error logs", "troubleshoot CDP connection", "check Metro status", "find native crashes", "inspect network failures", "the app crashed", "I see a blank screen", "the screen is white", "something broke", "app won't load", "RedBox error", "network requests failing", or needs guidance on CDP vs bash debugging, error type identification, connection troubleshooting, or post-reload readiness for React Native apps.

React Native and Expo best practices. Routes through rules.index.json (118 rules: 70 from vercel-labs/agent-skills react-best-practices + 36 from react-native-skills + 8 from composition-patterns + 4 rn-dev-agent custom). Use when reviewing React Native code, designing component architecture, implementing features, optimizing list performance, implementing animations, designing component APIs, working with navigation, auditing UI components, reviewing state management, checking production readiness. Triggers on "review best practices", "check performance", "optimize renders", "review list rendering", "check animation patterns", "review state management", "audit UI", "review composition", "review for production readiness", "check React Native conventions", "performance audit".

Check and install all rn-dev-agent prerequisites — Node.js, Metro, simulators, agent-device, maestro-runner, CDP bridge. Run this when tools fail or on first setup.

6 hooks across 5 events