Implements guild-plan.md §6.1 (mobile · react-native) under §6.4 engineering principles: the JS thread is a scarce resource, and every bridge hop is paid in frames.
What you do
Write RN / Expo that treats the bridge as the bottleneck it is. Keep renders pure and small, offload heavy work to native modules or worklets (Reanimated / Hermes), and handle platform differences explicitly rather than hoping one code path works.
Use TypeScript with strict mode; any is a last resort.
Prefer the New Architecture (TurboModules, Fabric) when the project already uses it; otherwise keep bridge calls batched and rare.
Animate on the UI thread via Reanimated worklets — not via setState loops.
Branch platform-specific behavior with Platform.select or .ios.tsx / .android.tsx, never with hidden conditionals.
List rendering: FlatList / FlashList with stable keys, getItemLayout, and virtualization; avoid ScrollView for long lists.
Handle permissions, back-button, safe-area, and keyboard behaviors per-platform explicitly.
Output shape
TypeScript source plus native-module notes:
Component(s) — .tsx files, typed props, memoized where it pays off.
Native modules — any platform code (Swift / Kotlin / Objective-C++), with integration steps.
Platform file pairs — .ios.tsx / .android.tsx when divergence is real.
Tests — Jest + React Native Testing Library for logic, Detox / Maestro note for E2E if relevant.
Anti-patterns
Rendering on the JS thread when it should be a Reanimated worklet — drops frames.
Excessive bridge traffic — per-frame messages or large JSON blobs over the bridge.
Platform-specific bugs papered over with a silent if (Platform.OS === 'ios') buried in logic.
ScrollView containing hundreds of items — kills memory on low-end Android.
Inline anonymous components or un-memoized handlers inside hot lists.
any spreading through props — types lose meaning.
Handoff
Return the TS source paths and native-module notes to the invoking mobile specialist. Deep native work chains into mobile-ios-swift or mobile-android-kotlin. Performance work lives in mobile-performance-tuning. This skill does not dispatch.
1---2name: lookatitude-guild-mobile-react-native3description: mobile-react-native4---56# mobile-react-native78Implements `guild-plan.md §6.1` (mobile · react-native) under `§6.4` engineering principles: the JS thread is a scarce resource, and every bridge hop is paid in frames.910## What you do1112Write RN / Expo that treats the bridge as the bottleneck it is. Keep renders pure and small, offload heavy work to native modules or worklets (Reanimated / Hermes), and handle platform differences explicitly rather than hoping one code path works.1314- Use TypeScript with strict mode; `any` is a last resort.15- Prefer the New Architecture (TurboModules, Fabric) when the project already uses it; otherwise keep bridge calls batched and rare.16- Animate on the UI thread via Reanimated worklets — not via `setState` loops.17- Branch platform-specific behavior with `Platform.select` or `.ios.tsx` / `.android.tsx`, never with hidden conditionals.18- List rendering: `FlatList` / `FlashList` with stable keys, `getItemLayout`, and virtualization; avoid `ScrollView` for long lists.19- Handle permissions, back-button, safe-area, and keyboard behaviors per-platform explicitly.2021## Output shape2223TypeScript source plus native-module notes:24251. **Component(s)** — `.tsx` files, typed props, memoized where it pays off.262. **Native modules** — any platform code (Swift / Kotlin / Objective-C++), with integration steps.273. **Platform file pairs** — `.ios.tsx` / `.android.tsx` when divergence is real.284. **Build notes** — Expo config plugins or bare-workflow Gradle / Podfile changes.295. **Tests** — Jest + React Native Testing Library for logic, Detox / Maestro note for E2E if relevant.3031## Anti-patterns3233- Rendering on the JS thread when it should be a Reanimated worklet — drops frames.34- Excessive bridge traffic — per-frame messages or large JSON blobs over the bridge.35- Platform-specific bugs papered over with a silent `if (Platform.OS === 'ios')` buried in logic.36- `ScrollView` containing hundreds of items — kills memory on low-end Android.37- Inline anonymous components or un-memoized handlers inside hot lists.38- `any` spreading through props — types lose meaning.3940## Handoff4142Return the TS source paths and native-module notes to the invoking `mobile` specialist. Deep native work chains into `mobile-ios-swift` or `mobile-android-kotlin`. Performance work lives in `mobile-performance-tuning`. This skill does not dispatch.4344---45> Source: [lookatitude/guild](https://github.com/lookatitude/guild) — distributed by [TomeVault](https://tomevault.io).46<!-- tomevault:4.0:skill_md:2026-05-22 -->
Run npx get-skill add tomevault-io/lookatitude-guild-mobile-react-native in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
mobile-react-native It is listed under Web & Frontend on SkillMD.
This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.
