How does this skill improve React Native code quality?

It enforces strict separation of concerns by moving business logic into custom hooks and 'core' services, which reduces component complexity and improves maintainability.

Does it support both iOS and Android platforms?

Yes, it provides specific guidance for using Platform.select for minor style tweaks and separate platform-specific files for complex structural differences.

Can I use it with modern state management libraries?

Absolutely. The skill includes pre-defined patterns and implementation guides for Zustand, React Query (TanStack Query), and standard React local state.

How does this skill handle mobile application testing?

It provides standardized patterns for component testing using React Native Testing Library and hook testing using act and renderHook utilities.

Is TypeScript required for this skill?

While not strictly required, the skill is heavily optimized for TypeScript, mandating explicit prop interfaces and typed state management to ensure type safety.

React Native Mobile Patterns

Name: React Native Mobile Patterns
Author: artofrawr

byartofrawr

•

Mobile Development

Provides opinionated React Native architecture, platform-specific patterns, and test-driven mobile development guidance.

This skill equips Claude with a structured approach to building React Native applications, focusing on separation of concerns through screen-specific hooks and business logic isolation. It enforces industry best practices such as functional components, explicit prop interfaces, and platform-specific styling while integrating modern state management tools like Zustand and React Query. By following these standardized patterns, developers can ensure their mobile codebases remain clean, testable, and scalable across both iOS and Android platforms.

主な機能

01Standardized project structure for separating UI from business logic

02Pattern-driven approach for functional components and custom hooks

03Integrated state management patterns for Zustand and React Query

04Comprehensive testing templates for components and hooks

05Platform-specific implementation strategies for iOS and Android

061 GitHub stars

ユースケース

01Scaffolding a new React Native project with a production-ready directory structure

02Refactoring monolithic components into modular hooks and pure UI components

03Implementing platform-specific UI logic and styling with best-practice patterns

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add artofrawr/claude-control react-native

For use in Claude.ai and ChatGPT

主な機能

01Standardized project structure for separating UI from business logic

02Pattern-driven approach for functional components and custom hooks

03Integrated state management patterns for Zustand and React Query

04Comprehensive testing templates for components and hooks

05Platform-specific implementation strategies for iOS and Android

061 GitHub stars

ユースケース

01Scaffolding a new React Native project with a production-ready directory structure

02Refactoring monolithic components into modular hooks and pure UI components

03Implementing platform-specific UI logic and styling with best-practice patterns

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add artofrawr/claude-control react-native

For use in Claude.ai and ChatGPT