What performance optimizations does it enforce?

It mandates best practices like using FlatList/ListView.builder for long lists, preventing inline function renders, and ensuring animations use the native driver to maintain 60fps.

Which mobile frameworks are supported by this skill?

This skill provides specific guidance and performance patterns for React Native, Flutter, and native iOS (SwiftUI) and Android (Kotlin/Compose) development.

Can this skill help with mobile security audits?

Yes, it specifically flags security 'sins' such as hardcoding API keys or storing sensitive tokens in unencrypted storage like AsyncStorage, recommending secure alternatives instead.

What is the 'Thumb Zone' principle?

The Thumb Zone is a UX philosophy that places primary call-to-actions within the natural arc of a user's thumb to ensure comfortable one-handed operation on mobile devices.

How does this skill handle platform-specific differences?

It uses a Platform Decision Matrix to help you decide when to unify business logic and when to diverge for platform-native elements like navigation, gestures, and typography.

Mobile Design System

Name: Mobile Design System
Author: claudiodearaujo

byclaudiodearaujo

•

Mobile Development

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

The Mobile Design System skill is a comprehensive framework designed to guide the development of high-performance mobile apps across React Native, Flutter, and native platforms. It moves beyond basic UI styling to address the psychological and technical constraints of mobile devices, including touch-target optimization via Fitts' Law, 'Thumb Zone' ergonomics, and battery-conscious performance patterns. By implementing mandatory checkpoints and platform-specific decision matrices, it ensures developers avoid common pitfalls like desktop-centric layouts, inefficient list rendering, and insecure data storage, resulting in production-ready, accessible, and platform-respectful mobile experiences.

主な機能

011 GitHub stars

02Platform-specific optimization for iOS Human Interface Guidelines and Android Material Design 3.

03Touch-first UX guidance focused on ergonomics, gestures, and haptic feedback.

04Deep-linking and offline-capable architecture strategies for resilient mobile apps.

05Performance-critical auditing for list virtualization, memoization, and GPU-accelerated animations.

06Secure-by-default storage patterns for sensitive data using Keychain and SecureStore.

ユースケース

01Developing high-performance cross-platform applications with React Native or Flutter.

02Auditing existing mobile interfaces for touch-target compliance and accessibility.

03Architecting offline-first data synchronization and secure authentication flows.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add claudiodearaujo/sistema-de-narra-o-de-livro mobile-design

For use in Claude.ai and ChatGPT

Download Skill