React Native

专业的APP UI动画特效设计师，负责设计炫酷的3D卡牌效果、天气特效、粒子动画和流畅的转场动画。Invoke when user wants to enhance UI animations, add 3D card effects, improve weather effects, or create stunning visual effects for React Native apps.

新增 mobile（Expo Router + React Native）畫面或功能的標準步驟 — 檔案路由、UI tokens、data hook、bottom-sheet 表單。做 apps/mobile 相關任務時使用

在设计、开发或交付 App 时按需参考 Happy/Paws 经验，包括移动端架构、React Native/Expo 取舍、验证、OTA、安装包与 Release 边界。用于用户明确要求参考 Happy/Paws，或当前问题与这些真实工程经验高度匹配时；它只提供上下文，不是 App Workflow，也不强制复制 Happy 的技术栈。

React/Next.js 代码审查规则。当审查 JSX/TSX 文件（React 项目）时套用。检查组件设计、Hooks 使用、状态管理、性能、安全（XSS）。

Use when upgrading react-resizable-panels from v3 to v4, fixing v4 type/runtime errors (PanelGroup not exported, direction prop invalid, layout broken), adapting to the new Group/Separator API and percentage string syntax, or updating CSS selectors for renamed data attributes. Triggers on "react-resizable-panels v4", "PanelGroup not found", "PanelResizeHandle not found", "panel layout broken after upgrade".

React 19.2 源码深度解读。当用户需要分析 React 源码、创建源码解读文档、讲解核心机制（Fiber、Scheduler、Hooks）、对比框架设计、绘制架构图或解释 API 实现原理时使用。专注于客户端渲染（CSR），不涉及 SSR。

管理网易私有 npm 注册表（rnpm.hz.netease.com）的包权限。当用户需要给 @music/* 包添加 owner 权限、查看当前 owner 列表，或批量处理多个包的权限时使用。触发关键词：添加权限、npm owner、rnpm、@music 包权限、给某人加权限。

React Hooks技能。当用户需要编写自定义Hooks、理解Hooks用法、封装Hooks逻辑、或询问React状态管理时使用此skill。

编写、重构或审查 React Native 组件样式时使用。适用于处理 style prop、StyleSheet.create、样式数组、动态样式、平台样式差异、组件内联样式坏味道、Text/Image/View 样式组织、布局样式复用和样式可维护性问题；缺少 RN 版本、目标组件边界或现有样式约定时必须先读取项目事实或询问。

创建或初始化 React Native 应用前使用。适用于用户要求新建 RN App、选择 Expo 或 React Native Community CLI、判断 New Architecture 或 Legacy Architecture、配置 Android/iOS 原生工程、接入原生模块、从 0.74 到 0.85 选择版本时；若用户没有明确目标架构和平台范围，必须先询问，禁止直接创建项目。 版本要求: React Native 0.74-0.85, legacy versions before 0.74。环境要求: Expo, React Native Community CLI, Android, iOS, New Architecture, Legacy Architecture。

创建或改造 React Native New Architecture TurboModule 时使用。适用于用户要求创建 Turbo Native Module、配置 Codegen、实现 Android/iOS 原生模块、设计纯 C++ 跨端模块、判断 RN 0.68-0.85 不同版本支持方式，或在 RN 0.74+ 新架构项目中替代旧桥 NativeModule；版本、平台、模块分发形态或 Legacy 兼容目标不明确时必须先询问。 版本要求: React Native 0.68-0.85, New Architecture, TurboModule。环境要求: Android, iOS, C++, Codegen, Community CLI, CocoaPods, Gradle。

为 React Native 项目设计、选择或迁移导航方案时使用。适用于 Expo Router、React Navigation、Stack/Tab/Drawer、deep link、typed routes、web routing、导航迁移、Expo SDK 52-56 或 React Navigation 5/6/7 使用差异判断。

为 React Native 项目设计、补充或修复测试时使用。适用于静态分析、Jest 单元测试、mock、集成测试、React Native Testing Library 组件测试、快照测试、Detox/Appium/Maestro E2E 测试、测试工具缺失处理、测试命令和验收链路梳理等场景；缺少 RN 版本、测试目标、平台范围或本地/CI 验收要求时必须先询问。

编写、重构或审查 React Native 组件样式时使用。适用于处理 style prop、StyleSheet.create、样式数组、动态样式、平台样式差异、组件内联样式坏味道、Text/Image/View 样式组织、布局样式复用和样式可维护性问题；缺少 RN 版本、目标组件边界或现有样式约定时必须先读取项目事实或询问。

创建或初始化 React Native 应用前使用。适用于用户要求新建 RN App、选择 Expo 或 React Native Community CLI、判断 New Architecture 或 Legacy Architecture、配置 Android/iOS 原生工程、接入原生模块、从 0.74 到 0.85 选择版本时；若用户没有明确目标架构和平台范围，必须先询问，禁止直接创建项目。

创建或改造 React Native New Architecture TurboModule 时使用。适用于用户要求创建 Turbo Native Module、配置 Codegen、实现 Android/iOS 原生模块、设计纯 C++ 跨端模块、判断 RN 0.68-0.85 不同版本支持方式，或在 RN 0.74+ 新架构项目中替代旧桥 NativeModule；版本、平台、模块分发形态或 Legacy 兼容目标不明确时必须先询问。

为 React Native 项目设计、选择或迁移导航方案时使用。适用于 Expo Router、React Navigation、Stack/Tab/Drawer、deep link、typed routes、web routing、导航迁移、Expo SDK 52-56 或 React Navigation 5/6/7 使用差异判断。

为 React Native 项目设计、补充或修复测试时使用。适用于静态分析、Jest 单元测试、mock、集成测试、React Native Testing Library 组件测试、快照测试、Detox/Appium/Maestro E2E 测试、测试工具缺失处理、测试命令和验收链路梳理等场景；缺少 RN 版本、测试目标、平台范围或本地/CI 验收要求时必须先询问。

Use when auditing a local-first web/desktop app (Next.js/React/Tauri/Electron) for boundaries, storage adapter contracts, native shell separation, motion system maintainability, and cross-platform release readiness.

Multi-pattern text search, filtering, and replacement using the Aho-Corasick algorithm. Use this skill whenever the user wants to: search for multiple keywords/patterns simultaneously in text or files, filter or detect sensitive words, scan multiple files for a list of terms, or redact/replace matched content. Triggers on phrases like "掃描關鍵字", "敏感詞過濾", "多個 pattern 搜尋", "批次掃描", "redact", "replace patterns", "keyword filter", "find multiple words", "scan files for patterns", or any task involving simultaneous multi-pattern matching. Always prefer this skill over naive grep loops when more than one pattern is involved.

在 common_func 项目中使用 PyTorch 写训练、推理、checkpoint、device/dtype 管理、tensor/numpy 转换、局部 torch 随机数、梯度控制、学习率工具或 NaN/Inf 诊断时触发。用于指导优先使用 pytorch_functions.py 中的 get_device、to_device、get_local_rng、to_tensor、save_checkpoint、load_checkpoint、no_grad_eval、concat_outputs、check_tensor_finite 等封装。

AI 全栈工程师经验库。涵盖 JVM 深度调优、React/React Native 跨平台开发、Go 后端、Monorepo 架构、Electron 桌面应用、AI/LLM 集成、系统设计与 DevOps 实践。适用于技术方案评审、架构决策、代码审查与面试准备。

Mpx 跨端输出 RN （Mpx2RN or Mpx2DRN）的样式兼容适配开发指南，当用户询问 Mpx 跨端输出 RN 样式相关问题时强制调用，包括：Mpx2RN 样式适配、Mpx2RN 样式兼容改造、Mpx2RN 样式能力支持、Mpx2RN 样式不生效、Mpx2RN 样式报错、Mpx2RN 样式开发最佳实践、Mpx2RN 中如何实现某样式效果等。

React Native and Expo app patterns — Expo Router navigation, state separation (server/client/route/form), TanStack Query data fetching with Zod, performant lists, NativeWind/StyleSheet styling, native APIs, and secure storage. Use when building or editing React Native / Expo screens, components, navigation, or data layers.

Build production React Native apps with Expo, navigation, native modules, offline sync, and cross-platform patterns. Use when developing mobile apps, implementing native integrations, or architecting React Native projects.

Master React Native styling, navigation, and Reanimated animations for cross-platform mobile development. Use when building React Native apps, implementing navigation patterns, or creating performant animations.

Production-ready patterns for React Native development with Expo, including navigation, state management, native modules, and offline-first architecture.

React Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing animations, or working with native modules. Triggers on tasks involving React Native, Expo, mobile performance, or native platform APIs.

Software Mansion's best practices for production React Native and Expo apps on the New Architecture. Trigger on: 'React Native', 'Expo', 'New Architecture', 'Reanimated', 'Gesture Handler', 'react-native-svg', 'ExecuTorch', 'react-native-audio-api', 'react-native-enriched', 'Worklet', 'Fabric', 'TurboModule', 'WebGPU', 'react-native-wgpu', 'TypeGPU', 'GPU shader', 'WGSL', 'svg', 'animation', 'gesture', 'audio', 'rich text', 'AI model', 'multithreading', 'chart', 'vector', 'image filter', 'shared value', 'useSharedValue', 'runOnJS', 'scheduleOnRN', 'thread', 'worklet', or any question involving UI, graphics, native modules, or React Native threading and animation behavior. Also use when a more specific sub-skill matches.

Senior React Native and Expo engineer for building production-ready cross-platform mobile apps. Use when building React Native components, implementing navigation with Expo Router, optimizing list and scroll performance, working with animations via Reanimated, handling platform-specific code (iOS/Android), integrating native modules, or structuring Expo projects. Triggers on React Native, Expo, mobile app, iOS app, Android app, cross-platform, native module, FlatList, FlashList, LegendList, Reanimated, Expo Router, mobile performance, app store. Do NOT use for Flutter, web-only React, or backend Node.js tasks.