mobile-native-bestpractices

Review React Native and Expo screens for architecture, performance, and accessibility issues.

1|2|Updated Apr 6, 2026
One-click install
npx skills add https://github.com/parisgroup-ai/imersao-ia-setup --skill mobile-native-bestpractices
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: mobile-native-bestpractices
Source: https://github.com/parisgroup-ai/imersao-ia-setup/tree/main/skills/mobile-native-bestpractices
Command: npx skills add https://github.com/parisgroup-ai/imersao-ia-setup --skill mobile-native-bestpractices

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Many React Native and Expo projects suffer from fragile architecture, poor real-device performance, inconsistent native UX, and accessibility gaps; this Skill provides a concise production-grade checklist and targeted guidance to find and fix those problems during development and code review.

Core Features & Use Cases

  • Architecture guidance: recommended folder layout, separation of domain logic, thin context providers, and typed navigation that reduce coupling and improve maintainability.
  • Performance and native UX: render optimizations, FlatList tuning, image caching strategies, native-driver animations, and platform-specific patterns to improve real-device responsiveness.
  • Reliability and correctness: offline-first patterns, WebSocket reconnection, secure token storage recommendations, accessibility checks, and testing approaches for domain logic, hooks, and device E2E flows.
  • Use cases: review a screen component for excessive renders, audit navigation types and deep links, evaluate native module integration, or produce a checklist before submitting mobile code.

Quick Start

Use the mobile-native-bestpractices skill to review a React Native screen file and return prioritized fixes for architecture, performance, accessibility, and native integration.

Frequently Asked Questions about mobile-native-bestpractices

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I fix React Native FlatList performance issues on real devices?

Fix React Native FlatList performance by tuning rendering patterns, optimizing image caching, and using native-driver animations. This approach analyzes your screen components to identify excessive renders and recommends targeted FlatList tuning strategies for real-device responsiveness.

What is the best way to structure a React Native and Expo project architecture?

The best React Native architecture uses a recommended folder layout, separates domain logic, and implements thin context providers. This reduces coupling and improves maintainability by ensuring typed navigation and strict separation of concerns across your application.

How do I audit React Native accessibility attributes and navigation types?

Audit React Native accessibility by analyzing .tsx and .jsx screen files for proper accessibility attributes, typed navigation setups, and deep links. This process evaluates hooks, context patterns, and navigation configurations to generate actionable accessibility and correctness fixes.

Can I use this approach to review offline-first patterns and WebSocket reconnection in Expo?

Yes, you can review offline-first patterns and WebSocket reconnection by evaluating networking strategies and secure token storage. This analysis checks reliability and correctness patterns within your hooks and domain logic to ensure robust offline and real-time connectivity.

Why does my React Native app have poor native UX and inconsistent platform-specific patterns?

Poor native UX in React Native often stems from missing platform-specific patterns, unoptimized image caching, and improper native module integration. Analyzing your config files and screen components reveals these gaps and provides targeted native UX recommendations.