rn-code-architect
The architect agent produces decisive, actionable implementation blueprints for new features. It analyzes existing codebase patterns, then specifies every file to create or modify with detailed change descriptions, component designs, and a phased build sequence.
Overview
Section titled “Overview”| Property | Value |
|---|---|
| Model | Opus |
| Color | Green |
| Skills | rn-testing, rn-best-practices |
| Tools | Glob, Grep, LS, Read |
The architect is read-only. It designs but does not implement.
When triggered
Section titled “When triggered”- “design the architecture for a shopping cart feature”
- “plan how to add real-time sync to the tasks screen”
- Phase 4 of the
rn-feature-devpipeline
Design Protocol
Section titled “Design Protocol”1. Codebase Pattern Extraction
Section titled “1. Codebase Pattern Extraction”Before designing, identifies:
- Router type (Expo Router file-based vs React Navigation config-based)
- State manager (Redux Toolkit, Zustand, React Query, MobX, plain React state)
- Styling system (StyleSheet, NativeWind, Tamagui, styled-components)
- Folder structure (feature-based, layer-based, or hybrid)
- testID conventions and TypeScript usage patterns
2. Architecture Design
Section titled “2. Architecture Design”Makes decisive choices (one approach, no alternatives) ensuring:
- Seamless integration with existing code patterns
- Every interactive element gets a testID
- Store slices have readable dot-paths for
cdp_store_state - Applies Vercel RN Best Practice rules (CRITICAL and HIGH)
3. Blueprint Delivery
Section titled “3. Blueprint Delivery”Specifies every file to create or modify with detailed change descriptions.
RN-Specific Design Rules
Section titled “RN-Specific Design Rules”The architect enforces these constraints from the best practices skill:
| Rule | Constraint |
|---|---|
| RN-1.1, 1.2 (CRITICAL) | No && with falsy values. All strings inside <Text> |
| RN-2.x (HIGH) | All scrollable data uses FlashList/LegendList. List items receive primitives |
| RN-3.x (HIGH) | Only animate transform and opacity |
| RN-4.1 (HIGH) | Never store scroll position in useState |
| RN-5.1 (HIGH) | Only native navigators (native-stack, native tabs) |
| RN-9.x (MEDIUM) | Pressable over TouchableOpacity, expo-image over Image |
Output Format
Section titled “Output Format”- Patterns and Conventions Found with file:line references
- Architecture Decision with rationale (one approach only)
- Component Design (file path, responsibilities, props interface, dependencies)
- Implementation Map (files to create/modify with change descriptions)
- Data Flow (user action to state change to re-render to API call)
- Build Sequence (store first, then API, then components, then navigation, then dev setup)
- Critical Details (error handling, loading states, empty states, edge cases)
- Verification Parameters (primaryComponent, storeQueryPath, entryRoute, navigationAction, primaryInteractionTestID)
- E2E Proof Flow (numbered step table with action, tool, screenshot filename, expected state)
Verification Parameters
Section titled “Verification Parameters”The architect provides exact values for live verification so Phase 5.5 can execute mechanically:
primaryComponent: <main component name or testID>storeQueryPath: <dot-path for cdp_store_state>entryRoute: <deep link URI as fallback>navigationAction: <cdp_evaluate expression for in-app navigation>primaryInteractionTestID: <testID of the main interactive element>expectedInteractionEffect: <what happens after interaction>requiresFullReload: <true/false>E2E Proof Flow
Section titled “E2E Proof Flow”A minimum 3-step numbered table covering the happy path, at least one state transition, and at least one edge case. Every step specifies the exact testID or CDP expression, expected state, and screenshot filename.