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.

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.

主な機能

01Optimized state management patterns for local, global, and server data

02Hook-based patterns for extracting logic from functional components

03Pre-configured testing patterns for components and hooks

04Standardized directory structure with separation of core logic and UI

05Cross-platform implementation strategies including platform-specific file extensions

06435 GitHub stars

ユースケース

01Refactoring monolithic components into testable, hook-based functional components.

02Initializing a new React Native project with a security-first, AI-native architecture.

03Implementing complex cross-platform UI features with optimized performance patterns.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add alinaqi/claude-bootstrap react-native

For use in Claude.ai and ChatGPT

Download Skill