feat(native): added React Native migration agent workflows and tooling

[shivam-rzpay]

Summary

• Adds the React Native migration agent pipeline: plan-rn-migration, execute-rn-migration, and verify-rn-migration agents (both .claude and .agents variants) plus the migrate-to-rn skill for orchestrating component migrations
• Adds RN migration rules (.claude/rules/rn-migration.md), report/plan/patch-request templates, and orchestrator guardrail updates
• Enables fully parallel verification with per-slot simulators, a Primary Interaction Gate to block unverified core behavior, and pre-flight/port-isolation checks
• Adds a PreToolUse hook to surface existing migration artifacts.
• Updates patch-storybook-hermes.js for the native Storybook workflow

🤖 Generated with Claude Code

[github-actions]

🤖 Slash AI Review has been triggered. View execution logs

(Review Cancelled - Superseded by a new run)

[rzp-slash-public]

✨ Agentic PR Review ✨

Status: Approved ✅

UI Review

[swapnil-kr1]

git add -A here stages everything in the worktree, including the migration artifacts written to {Worktree}/.claude/artifacts/{Name}/ — the discovery/plan/verification reports and all screenshots/*.png. Neither .claude/artifacts/ nor .claude/worktrees/ is in .gitignore (git check-ignore returns nothing for them on this branch), so every component PR would carry its internal reports and screenshots.

Suggest either adding these paths to .gitignore, or staging only the component source explicitly, e.g.:

cd {Worktree} && git add packages/blade/src/components/{Name}

[rohitr-raz]

done

[swapnil-kr1]

This coarse gate treats any .native.tsx that contains throwBladeError as a stub → "needs migration". But plan-rn-migration.md explicitly warns that already-implemented components (Tabs.native.tsx, Avatar.native.tsx, AccordionButton.native.tsx) contain throwBladeError purely for input validation and are not stubs.

So a fully-migrated component can be mis-classified here as needing migration, and the orchestrator would spin up a worktree + Plan agent for it unnecessarily. Consider reusing the plan agent's own "genuine-stub detection" (body-shape / line-count heuristic) instead of bare string presence, so the entry gate and the Plan phase agree.

[rohitr-raz]

updated the skill to reuse plan agents own "genuine-stub detection"

[swapnil-kr1]

This registers a repo-level PreToolUse hook that fires on every Agent tool call for anyone who opens blade in Claude Code — not only during an RN migration. It early-exits for non-*-rn-migration subagents, but it still shells out to jq + grep on each Agent spawn and assumes jq is installed on the contributor's machine (a missing jq makes the hook error rather than no-op).

Two things to confirm:

• Is an always-on, shared hook the intent, vs. shipping it alongside the migrate-to-rn skill/plugin so it's opt-in for people actually running the migration?
• If jq is a hard dependency, worth documenting it (and guarding with a command -v jq check so the hook degrades gracefully).

[rohitr-raz]

1)kept it in the shared .claude/settings.json because Claude Code doesn't give a clean way to attach a hook to a skill/plugin lifecycle — a repo-level hook is the only reliable place for it to fire during orchestration.

2)I'll add a command -v jq >/dev/null 2>&1 || exit 0 guard at the very top so the hook degrades gracefully, and document jq as a prerequisite for the migration workflow.

[github-actions]

🤖 Slash AI Review has been triggered. View execution logs

(Review Cancelled - Superseded by a new run)

[github-actions]

🤖 Slash AI Review has been triggered. View execution logs

(Review Cancelled - Superseded by a new run)

[github-actions]

🤖 Slash AI Review has been triggered. View execution logs

(Review Cancelled - Superseded by a new run)

[rzp-slash-public]

✨ Agentic PR Review ✨

UI Review

✅ 1 passed

Passing checks (1)

Check	Screenshot
✅ Storybook loads successfully

[rzp-slash-public]

🟠 [MAJOR] · code-quality-critique · confidence: 6/10

Problem: The CASE_SPLIT_PATTERN regex replacement only matches var and const declarations, but not let. The old code used content.indexOf('CASE_SPLIT_PATTERN') which matched any declaration type. If a dependency uses let CASE_SPLIT_PATTERN = /...\p{Lu}.../;, the Unicode property escapes won't be patched, causing Hermes to crash with "InvalidRegExp" at runtime. The comment on line 91 explicitly says "var or const" confirming the gap.

Suggestion: Add a third regex for let: content = content.replace(/let CASE_SPLIT_PATTERN\s*=\s*\/[^\n;]+;/g, CASE_SPLIT_REPLACEMENT_VAR); (using var in the replacement is functionally safe).

[rzp-slash-public]

🟠 [MAJOR] · code-quality-critique · confidence: 7/10

Problem: Step 4e uses agent-browser commands (close, open, screenshot) without any --session flag, unlike all agent-device commands which use --session {SessionName}. In a parallel batch, multiple verify agents reaching Step 4e concurrently will race: one agent's npx agent-browser close kills another agent's browser session. This breaks the PR's claim of "fully parallel verification" — the mandatory web comparison step is not parallelizable as written.

Suggestion: Either add session support to the agent-browser commands (if supported), or document that Step 4e must be serialized across slots (e.g., use a file-based lock or queue the web comparison so only one agent runs it at a time).

[rzp-slash-public]

🔵 [MINOR] · code-quality-critique · confidence: 8/10

Problem: The guardrail (which the SKILL.md explicitly includes via Read tool) says to update .claude/artifacts/batch-status.md, but the SKILL.md Step 7 says to write .claude/artifacts/rn-batch-status.md. The orchestrator reads both files, creating conflicting instructions about where to write batch status. This could result in batch status being split across two files or written to the wrong one.

Suggestion: Update the guardrail to use a generic placeholder like .claude/artifacts/{pipeline}-batch-status.md, or update the SKILL.md to match the guardrail's batch-status.md filename.

[rzp-slash-public]

✨ Agentic PR Review ✨

[rzp-slash-public]

🔴 [CRITICAL] · code-quality-critique · confidence: 9/10

Problem: The animation pattern uses getIn(theme.motion, 'easing.standard.effective') but the token path easing.standard.effective does not exist in the Blade token system. The actual token is easing.standard which returns a makeBezier() result. On native, makeBezier returns an EasingFactoryFn (not an array), so Easing.bezier(...motionEasing) would spread the function object, producing invalid arguments and a runtime crash. Existing native components like AnimatedThumb.native.tsx and AnimatedButtonContent.native.tsx use the easing value directly: easing: easing not easing: Easing.bezier(...easing).

Suggestion: Change to const motionEasing = getIn(theme.motion, 'easing.standard'); and use easing: motionEasing directly (not Easing.bezier(...motionEasing)). The value from getIn is already an EasingFactoryFn on native via makeBezier.native.ts. Remove the Easing import if no longer needed.

[rzp-slash-public]

🔴 [CRITICAL] · code-quality-critique · confidence: 9/10

Problem: Same incorrect animation pattern as rn-migration.md: uses getIn(theme.motion, 'easing.standard.effective') (non-existent token path) and Easing.bezier(...motionEasing) (spreading an EasingFactoryFn). This is the code template that the execute agent will copy into actual .native.tsx files, so every component migrated using this agent will have a runtime crash in its animation code.

Suggestion: Change to const motionEasing = getIn(theme.motion, 'easing.standard'); and easing: motionEasing (no spread, no Easing.bezier wrapper). The Easing import from react-native-reanimated can be removed if not used elsewhere.

[rzp-slash-public]

🟠 [MAJOR] · code-quality-critique · confidence: 9/10

Problem: The easing mapping table shows Easing.bezier(...getIn(theme.motion, 'easing.standard.effective')) as the reanimated equivalent for theme easing. This propagates the same incorrect token path and incorrect spread pattern to every migration plan generated from this template.

Suggestion: Change to getIn(theme.motion, 'easing.standard') and note that the value is already an EasingFactoryFn on native — use it directly as easing: motionEasing in withTiming.

[rzp-slash-public]

🟠 [MAJOR] · code-quality-critique · confidence: 8/10

Problem: rootNodeModules is not resolved with fs.realpathSync like localNodeModules is. The comment on line 17 says 'Always resolve symlinks so grep -R works correctly on macOS', but only localNodeModules gets symlink resolution. If rootNodeModules is also a symlink (common in monorepo hoisted node_modules), grep -R will fail to follow it on macOS, missing files that need patching.

Suggestion: Apply the same realpathSync fallback pattern to rootNodeModules: const rootNodeModules = (() => { try { return fs.realpathSync(path.resolve(__dirname, '../../../node_modules')); } catch { return path.resolve(__dirname, '../../../node_modules'); } })();

[rzp-slash-public]

🟠 [MAJOR] · code-quality-critique · confidence: 9/10

Problem: The CASE_SPLIT_PATTERN regex /var CASE_SPLIT_PATTERN\s*=\s*\/[^\n;]+;/g uses [^\n;]+ which stops at any semicolon. If the regex literal contains a semicolon inside a character class (e.g., /[#;]/g), the match is truncated at the semicolon inside the character class, producing a corrupted replacement that leaves trailing characters in the file. The old code checked line.includes('\\p{') before replacing, which acted as a safety gate.

Suggestion: Use a regex that properly handles character classes, or add back the \\p{ content check before replacing to avoid corrupting regex literals that don't contain Unicode property escapes.

[rzp-slash-public]

🟠 [MAJOR] · code-quality-critique · confidence: 8/10

Problem: The combined identifierStartRegex+identifierContinueRegex regex uses [^;]+ between the two declarations. If there are intermediate comma-separated variable declarations between identifierStartRegex and identifierContinueRegex (e.g., var identifierStartRegex = new RegExp(...), foo = 'bar', identifierContinueRegex = new RegExp(...);), the greedy [^;]+ match includes and silently drops the intermediate foo = 'bar' declaration in the replacement.

Suggestion: Make the combined regex more restrictive: use [^;,]+ instead of [^;]+ for the middle portion, or use a non-greedy match. Alternatively, rely solely on the separate fallback regexes (lines 74-79) and remove the combined regex.

[rzp-slash-public]

🔵 [MINOR] · code-quality-critique · confidence: 7/10

Problem: The fallback regexes for identifierStartRegex and identifierContinueRegex always replace with var even if the original declaration used let or const. This changes the scoping semantics from block-scoped to function-scoped. While unlikely to cause issues in bundled code, it is technically incorrect.

Suggestion: Capture the original declaration keyword and preserve it in the replacement, or use a callback function in the replace call to dynamically construct the replacement string.

[rzp-slash-public]

🔵 [MINOR] · code-quality-critique · confidence: 7/10

Problem: The find command uses -maxdepth 5 at the end of the option list. On macOS BSD find (the primary platform for RN development), -maxdepth must appear before other primaries. This could cause the command to silently fail on macOS, resulting in an empty APP_PATH and failing to install the app on secondary simulators.

Suggestion: Move -maxdepth 5 to immediately after the path: find ~/Library/Developer/Xcode/DerivedData -maxdepth 5 -name "blade.app" -path "*/Build/Products/Debug-iphonesimulator/*" 2>/dev/null | head -1

[rzp-slash-public]

🔵 [MINOR] · code-quality-critique · confidence: 6/10

Problem: The test pattern in the execute agent uses getByText('Press me') to find and press the component, while the rules file (rn-migration.md) testing pattern uses getByRole('button'). getByText can match non-interactive Text nodes, leading to false positive tests where fireEvent.press fires on a non-pressable element.

Suggestion: Use getByRole('button') consistently in the execute agent's test template, matching the pattern in rn-migration.md. If the component doesn't have role='button', use getByTestId or the appropriate role.

[rzp-slash-public]

✨ Agentic PR Review ✨

UI Review

⏭️ 1 skipped

[rzp-slash-public]

🟠 [MAJOR] · code-quality-critique · confidence: 8/10

Problem: The combined identifierStartRegex+identifierContinueRegex regex uses [^;]+ between the two declarations. Since [^;] matches newlines, if the two new RegExp(...) calls are separated by other code that lacks semicolons (ASI in non-minified JS), the regex greedily matches across all intermediate lines and replaces them, destroying code. For example, let identifierStartRegex = new RegExp(...)\nlet foo = "bar"\nlet identifierContinueRegex = new RegExp(...) (no semicolons) would have foo deleted.

Suggestion: Use [^;\n]+ to restrict matching to a single line, or remove the combined regex entirely and rely on the individual fallback regexes (lines 103-108) which are safer. The combined regex is an optimization for the same-line case; the fallbacks already handle the separate-lines case.

[rzp-slash-public]

🔵 [MINOR] · code-quality-critique · confidence: 9/10

Problem: The rUnicodeUpper and rUnicodeLower replacement regexes (lines 113-120) only match const declarations: /const rUnicodeUpper\s*=.../g. If a dependency uses var rUnicodeUpper or let rUnicodeUpper, the replacement won't apply and the Unicode property escape will remain, causing the Hermes crash the script is meant to prevent.

Suggestion: Change const to (?:const|var|let) in both regex patterns, matching the pattern already used in Case 3 for identifierStartRegex.

[rzp-slash-public]

🔵 [MINOR] · code-quality-critique · confidence: 7/10

Problem: The CASE_SPLIT_PATTERN regex uses \/[^\n;]+; to match the regex literal. If the regex literal itself contains a semicolon (e.g., inside a character class like /[/;]/g), [^\n;]+ stops at the first ; inside the character class. The replacement is inserted before that ;, leaving the remainder (e.g., ]/g;) appended after, producing invalid JS. The current es-toolkit pattern doesn't have this, but a future version could.

Suggestion: Use a more precise pattern that matches to the closing / followed by flags and ;, e.g.: /var CASE_SPLIT_PATTERN\s*=\s*\/.+?\/[gimusy]*;/g with non-greedy .+?.

[rzp-slash-public]

🔵 [MINOR] · code-quality-critique · confidence: 7/10

Problem: The old code filtered to only es-toolkit and storybook packages (if (!file.includes('es-toolkit') && !file.includes('storybook')) continue;). This filter was removed, so the script now reads and attempts to patch ALL .js/.mjs files in node_modules containing \p{. While the regex patterns target specific variable names (CASE_SPLIT_PATTERN, identifierStartRegex, etc.), identifierStartRegex and identifierContinueRegex are generic enough to appear in other packages. A false-positive match would corrupt an unrelated dependency with no easy recovery short of yarn install.

Suggestion: Either restore a filter list that includes the known affected packages (es-toolkit, storybook, jsdoc-type-pratt-parser), or add a log message when a file outside known packages is patched so unexpected modifications are visible.

[rzp-slash-public]

🔵 [MINOR] · code-quality-critique · confidence: 8/10

Problem: The sed command s/:.*from '\.\/\(.*\)'.*/\1/ uses greedy .* in the capture group. If an import line contains additional single-quoted strings after the import path (e.g., a comment like import { X } from './Foo' // 'bar'), the greedy \(.*\) captures Foo' // 'bar instead of just Foo, producing an incorrect path for the file-existence check and a false 'UNRESOLVED' result.

Suggestion: Replace \(.*\) with \([^']*\) to stop at the first closing single-quote: s/:.*from '\.\/\([^']*\)'.*/\1/. Also use IFS= read -r line instead of read line to preserve whitespace and backslashes.

[rzp-slash-public]

🔵 [MINOR] · code-quality-critique · confidence: 7/10

Problem: The orchestrator's pre-flight stub detection uses a hardcoded 40-line threshold: if [ "$(wc -l < "$f")" -lt 40 ]. This disagrees with the Plan agent's more sophisticated 'genuine-stub detection' (which examines the file body for real render trees/hooks). A genuine stub file with >40 lines (e.g., verbose imports + throwBladeError + comments) would be classified as REAL by the orchestrator, causing it to skip the component entirely — the Plan agent never runs.

Suggestion: Either increase the threshold to a safer value (e.g., 80-100 lines) since genuine stubs are 'essentially just throwBladeError + trivial return' and rarely exceed 20 lines even with imports, or add a secondary check: grep -c 'return\|<\|useEffect\|useState\|useMemo' "$f" to detect whether the file has real render/logic beyond throwBladeError.

[github-actions]

🤖 Slash AI Review has been triggered. View execution logs

(Review Cancelled - Superseded by a new run)

[github-actions]

🤖 Slash AI Review has been triggered. View execution logs

(Review Cancelled - Superseded by a new run)

[rzp-slash-public]

✨ Agentic PR Review ✨

Status: Approved ✅

UI Review

⏭️ 1 skipped

[github-actions]

🤖 Slash AI Review has been triggered. View execution logs

(Review Cancelled - Superseded by a new run)

[rzp-slash-public]

✨ Agentic PR Review ✨

Status: Approved ✅

[github-actions]

🤖 Slash AI Review has been triggered. View execution logs