rn-feature-dev

The primary workflow for building features with rn-dev-agent. Takes a feature description and runs an 8-phase pipeline: from codebase exploration through live device verification to PR-ready proof artifacts.

Usage

/rn-dev-agent:rn-feature-dev <feature-description>

Examples

/rn-dev-agent:rn-feature-dev add a favorites screen with swipe-to-delete
/rn-dev-agent:rn-feature-dev implement dark mode toggle in settings
/rn-dev-agent:rn-feature-dev shopping cart badge that updates in real-time

The 8-Phase Pipeline

Phase	Name	What happens
1	Discovery	Parse the feature request, create todo list, ask clarifying questions if needed
2	Codebase Exploration	Launch 2-3 rn-code-explorer agents in parallel to map screens, store, patterns
3	Clarifying Questions	Identify all ambiguities — error states, navigation, store shape, testIDs — and wait for answers
4	Architecture Design	Launch rn-code-architect agents, produce blueprint with verification parameters and E2E proof flow
5	Implementation	Build the feature following the architect’s build sequence — store, API, components, navigation
5.5	Live Verification	Prove it works on the simulator — screenshot, health check, component tree, state, interaction, error regression
6	Quality Review	Launch 2-3 rn-code-reviewer agents for correctness, RN conventions, and project conventions
7	Summary	Document what was built, files changed, decisions made, verification results
8	E2E Proof	Execute the architect’s proof flow step-by-step, capture screenshots and video, write PROOF.md

Phase Details

Phase 5.5: Live Verification

This is what separates rn-feature-dev from generic feature development. After implementation, the agent verifies the feature live on the running simulator:

1. Ensure simulator and navigate to the feature screen
2. Baseline screenshot and clear error buffer
3. Health check via cdp_status — Metro, CDP, no RedBox, no errors
4. Component verification via cdp_component_tree — feature renders correctly
5. Interaction verification — exercise the primary user action, verify side effects
6. State verification via cdp_store_state — data shape matches design
7. Error regression check — no new errors since baseline
8. Cross-platform comparison — element-by-element iOS vs Android (when both available)

All checks must pass before proceeding to review.

Phase 8: E2E Proof

Produces a docs/proof/<feature-slug>/ directory containing:

• Numbered screenshots for each step of the user flow
• Video recording with timed step labels
• PROOF.md with flow table, state snapshots, and deviations
• PR-BODY.md ready to paste into a pull request

Core Principles

• Never skip phases — speed comes from parallel agent launches, not phase elimination
• Ask clarifying questions — identify all ambiguities before implementing
• Understand before acting — read existing code patterns first
• Verify on device — prove it works with live screenshots and CDP state checks
• Cross-platform verification — compare screenshots element-by-element when both platforms are available

Prerequisites

• iOS Simulator or Android Emulator running with the app loaded
• Metro dev server running
• For Zustand apps: if (__DEV__) global.__ZUSTAND_STORES__ = { ... } in app entry