How does it handle iOS and Android differences?

The skill uses a platform-divergence matrix to ensure iOS apps feel native (using SF Symbols and edge-swipes) while Android apps follow Material Design conventions.

Does this skill support cross-platform frameworks?

Yes, it provides specific architectural patterns and performance optimizations tailored for both React Native and Flutter.

Can it help fix mobile performance lag?

Yes, it identifies performance 'sins' like console.logs in production, missing keyExtractors, and CPU-bound animations that cause jank.

What mobile security practices does it enforce?

It mandates the use of SecureStore, Keychain, or EncryptedSharedPreferences for sensitive data instead of insecure local storage defaults.

Mobile UX & Design System

Name: Mobile UX & Design System
Author: mrfansi

bymrfansi

0•

Mobile Development

Implements mobile-first design principles, platform-specific conventions, and high-performance patterns for iOS and Android applications.

This skill transforms Claude into a specialized mobile architect capable of building production-grade apps that respect platform-specific nuances. It moves beyond generic web layouts to enforce touch-first ergonomics, battery-conscious performance, and offline-capable architectures. By leveraging platform-specific guidelines like iOS Human Interface Guidelines and Android Material Design 3, the skill ensures that React Native, Flutter, or native codebases feel intuitive to users. It includes built-in audits for common mobile 'sins,' such as small touch targets, inefficient list rendering, and insecure data storage, ensuring your mobile project is optimized for both the App Store and Google Play.

主な機能

01Platform-specific UI patterns for iOS (HIG) and Android (Material Design 3)

02Comprehensive mobile UX audits for gestures, haptics, and loading states

03Security-first implementation for secure token storage and PII protection

04Performance optimization for React Native (FlatList/memoization) and Flutter (const constructors)

05Ergonomic layout design based on Fitts' Law and the thumb-zone principle

060 GitHub stars

ユースケース

01Building cross-platform navigation that respects native gestures like iOS edge-swipes

02Converting a desktop-first interface into a responsive, touch-optimized mobile experience

03Optimizing high-traffic React Native or Flutter lists for 60fps scrolling and low memory usage

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add mrfansi/shlink mobile-design

For use in Claude.ai and ChatGPT

Download Skill