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.

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>

This skill should be used when the user asks to "create an action", "save this flow as an action", "make this replayable", "record a reusable action", "author a Maestro flow as an action", "add a login/setup action", or when a verified UI walk should be persisted under .rn-agent/actions/ so future sessions can replay it with maestro.

This skill should be used when writing or reviewing React Native / Expo code — before writing list rendering, animations, data fetching, component APIs, navigation, or image/media UI — and when asked to "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".

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.

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 building any new feature in a React Native or Expo app, or when the /rn-dev-agent:rn-feature-dev command runs. Triggers on "build a feature", "add X to the app", "implement Y", "create a new screen", "rn-feature-dev", "feature development", "build me X", "add a screen", "wire up this flow".

7 hooks across 6 events