Can I use this for both React Native and Flutter?

Yes, it provides specific guidance, performance patterns, and architecture decision trees tailored for React Native, Flutter, and native iOS/Android development.

How does it handle platform-specific UI differences?

It utilizes a decision matrix to determine when to unify business logic and when to diverge for platform-specific elements like navigation gestures, system fonts, and native pickers.

Does it address mobile-specific security concerns?

Yes, it strictly prohibits anti-patterns like hardcoding API keys or storing tokens in unencrypted storage, recommending secure alternatives like Keychain or EncryptedSharedPreferences.

How does this skill improve mobile performance?

It enforces the use of optimized components like FlatList with memoization, avoids expensive re-renders in the JS thread, and ensures animations are GPU-accelerated via native drivers.

What is the 'Thumb Zone' principle applied by this skill?

It is an ergonomic design approach that places primary calls-to-action within the natural arc of a user's thumb at the bottom of the screen to facilitate comfortable one-handed operation.

Mobile Design Architect

Name: Mobile Design Architect
Author: xenitV1

byxenitV1

•

137

Mobile Development

Applies mobile-first design thinking and performance optimization patterns to iOS and Android applications.

概要

The Mobile Design Architect skill transforms Claude into a specialized mobile consultant, ensuring that React Native, Flutter, and native applications adhere to platform-specific conventions and high-performance standards. It moves beyond simple UI coding by enforcing touch-first psychology, battery-conscious development, and offline-capable architectures while preventing common AI pitfalls like improper list rendering, insecure token storage, or desktop-centric layouts.

主な機能

Enforces platform-specific design conventions for iOS Human Interface and Android Material Design.
Guides cross-platform architecture decisions using a 'Unify vs. Diverge' framework.
Implements secure storage practices for sensitive data and API keys.
Applies critical performance patterns for list rendering, memory management, and animation.
137 GitHub stars
Optimizes touch interactions using Fitts' Law and thumb-zone ergonomic principles.

ユースケース

Optimizing React Native FlatList performance to eliminate scroll jank and memory leaks.
Designing ergonomic mobile navigation systems tailored for one-handed operation.
Implementing platform-native UI elements like iOS Action Sheets and Android Material Dialogs.

概要

主な機能

Enforces platform-specific design conventions for iOS Human Interface and Android Material Design.
Guides cross-platform architecture decisions using a 'Unify vs. Diverge' framework.
Implements secure storage practices for sensitive data and API keys.
Applies critical performance patterns for list rendering, memory management, and animation.
137 GitHub stars
Optimizes touch interactions using Fitts' Law and thumb-zone ergonomic principles.

ユースケース

Optimizing React Native FlatList performance to eliminate scroll jank and memory leaks.
Designing ergonomic mobile navigation systems tailored for one-handed operation.
Implementing platform-native UI elements like iOS Action Sheets and Android Material Dialogs.