What React Native anti-patterns does this skill prevent?

It actively avoids inline styles, logic in render methods, deep component nesting, and direct state mutation to ensure high-performance mobile apps.

How does this handle platform-specific code?

The skill provides patterns for using Platform.select for minor styling differences and separate .ios.tsx/.android.tsx files for complex component variations.

What project structure does this skill use?

It follows an opinionated structure separating pure business logic (core), reusable components, screen-specific logic (hooks), and platform-specific assets.

Does this skill help with mobile testing?

Yes, it includes standardized testing patterns for both functional components using React Native Testing Library and custom hooks using Hook Testing Library.

Which state management libraries are supported?

While it prioritizes local state first, the skill includes specific implementation patterns for Zustand (global state) and React Query (server state).

React Native Architecture & Patterns

Name: React Native Architecture & Patterns
Author: alinaqi

byalinaqi

•

435

Mobile Development

Implements opinionated React Native patterns and platform-specific best practices for robust mobile application development.

About

This skill optimizes Claude for React Native development by enforcing a clean, spec-driven architecture that separates business logic from UI representation. It provides standardized patterns for component creation using functional hooks, state management strategies with Zustand and React Query, and comprehensive testing methodologies using React Native Testing Library. By guiding Claude to follow these platform-specific conventions and avoid common anti-patterns like inline styles or deep nesting, it ensures the generation of maintainable, high-performance mobile codebases that work seamlessly across iOS and Android.

Key Features

Optimized state management patterns for local, global, and server data
Hook-based patterns for extracting logic from functional components
Pre-configured testing patterns for components and hooks
Standardized directory structure with separation of core logic and UI
Cross-platform implementation strategies including platform-specific file extensions
435 GitHub stars

Use Cases

Refactoring monolithic components into testable, hook-based functional components.
Initializing a new React Native project with a security-first, AI-native architecture.
Implementing complex cross-platform UI features with optimized performance patterns.

About

Key Features

Optimized state management patterns for local, global, and server data
Hook-based patterns for extracting logic from functional components
Pre-configured testing patterns for components and hooks
Standardized directory structure with separation of core logic and UI
Cross-platform implementation strategies including platform-specific file extensions
435 GitHub stars

Use Cases

Refactoring monolithic components into testable, hook-based functional components.
Initializing a new React Native project with a security-first, AI-native architecture.
Implementing complex cross-platform UI features with optimized performance patterns.