mobile-design

Name: mobile-design
Author: nguyenphp

39stars12forks

How to install mobile-design?

nguyenphp/antigravity-marketing/mobile-design

$npx -y skills add nguyenphp/antigravity-marketing --skill mobile-design

Installs into the current project.

Summary

Mobile-first design thinking and decision-making for iOS and Android apps. Touch interaction, performance patterns, platform conventions. Teaches principles, not fixed values. Use when building React Native, Flutter, or native mobile apps.

Files · 1

View on GitHub

SKILL.md

1	# Mobile Design System
2
3	> Philosophy: Touch-first. Battery-conscious. Platform-respectful. Offline-capable.
4	> Core Principle: Mobile is NOT a small desktop. THINK mobile constraints, ASK platform choice.
5
6	---
7
8	## 🔧 Runtime Scripts
9
10	Execute these for validation (don't read, just run):
11
12	\| Script \| Purpose \| Usage \|
13	\|--------\|---------\|-------\|
14	\| `scripts/mobile_audit.py` \| Mobile UX & Touch Audit \| `python scripts/mobile_audit.py <project_path>` \|
15
16	---
17
18	## 🔴 MANDATORY: Read Reference Files Before Working!
19
20	⛔ DO NOT start development until you read the relevant files:
21
22	### Universal (Always Read)
23
24	\| File \| Content \| Status \|
25	\|------\|---------\|--------\|
26	\| [mobile-design-thinking.md](mobile-design-thinking.md) \| ⚠️ ANTI-MEMORIZATION: Forces thinking, prevents AI defaults \| ⬜ CRITICAL FIRST \|
27	\| [touch-psychology.md](touch-psychology.md) \| Fitts' Law, gestures, haptics, thumb zone \| ⬜ CRITICAL \|
28	\| [mobile-performance.md](mobile-performance.md) \| RN/Flutter performance, 60fps, memory \| ⬜ CRITICAL \|
29	\| [mobile-backend.md](mobile-backend.md) \| Push notifications, offline sync, mobile API \| ⬜ CRITICAL \|
30	\| [mobile-testing.md](mobile-testing.md) \| Testing pyramid, E2E, platform-specific \| ⬜ CRITICAL \|
31	\| [mobile-debugging.md](mobile-debugging.md) \| Native vs JS debugging, Flipper, Logcat \| ⬜ CRITICAL \|
32	\| [mobile-navigation.md](mobile-navigation.md) \| Tab/Stack/Drawer, deep linking \| ⬜ Read \|
33	\| [mobile-typography.md](mobile-typography.md) \| System fonts, Dynamic Type, a11y \| ⬜ Read \|
34	\| [mobile-color-system.md](mobile-color-system.md) \| OLED, dark mode, battery-aware \| ⬜ Read \|
35	\| [decision-trees.md](decision-trees.md) \| Framework/state/storage selection \| ⬜ Read \|
36
37	> 🧠 mobile-design-thinking.md is PRIORITY! This file ensures AI thinks instead of using memorized patterns.
38
39	### Platform-Specific (Read Based on Target)
40
41	\| Platform \| File \| Content \| When to Read \|
42	\|----------\|------\|---------\|--------------\|
43	\| iOS \| [platform-ios.md](platform-ios.md) \| Human Interface Guidelines, SF Pro, SwiftUI patterns \| Building for iPhone/iPad \|
44	\| Android \| [platform-android.md](platform-android.md) \| Material Design 3, Roboto, Compose patterns \| Building for Android \|
45	\| Cross-Platform \| Both above \| Platform divergence points \| React Native / Flutter \|
46
47	> 🔴 If building for iOS → Read platform-ios.md FIRST!
48	> 🔴 If building for Android → Read platform-android.md FIRST!
49	> 🔴 If cross-platform → Read BOTH and apply conditional platform logic!
50
51	---
52
53	## ⚠️ CRITICAL: ASK BEFORE ASSUMING (MANDATORY)
54
55	> STOP! If the user's request is open-ended, DO NOT default to your favorites.
56
57	### You MUST Ask If Not Specified:
58
59	\| Aspect \| Ask \| Why \|
60	\|--------\|-----\|-----\|
61	\| Platform \| "iOS, Android, or both?" \| Affects EVERY design decision \|
62	\| Framework \| "React Native, Flutter, or native?" \| Determines patterns and tools \|
63	\| Navigation \| "Tab bar, drawer, or stack-based?" \| Core UX decision \|
64	\| State \| "What state management? (Zustand/Redux/Riverpod/BLoC?)" \| Architecture foundation \|
65	\| Offline \| "Does this need to work offline?" \| Affects data strategy \|
66	\| Target devices \| "Phone only, or tablet support?" \| Layout complexity \|
67
68	### ⛔ AI MOBILE ANTI-PATTERNS (YASAK LİSTESİ)
69
70	> 🚫 These are AI default tendencies that MUST be avoided!
71
72	#### Performance Sins
73
74	\| ❌ NEVER DO \| Why It's Wrong \| ✅ ALWAYS DO \|
75	\|-------------\|----------------\|--------------\|
76	\| ScrollView for long lists \| Renders ALL items, memory explodes \| Use `FlatList` / `FlashList` / `ListView.builder` \|
77	\| Inline renderItem function \| New function every render, all items re-render \| `useCallback` + `React.memo` \|
78	\| Missing keyExtractor \| Index-based keys cause bugs on reorder \| Unique, stable ID from data \|
79	\| Skip getItemLayout \| Async layout = janky scroll \| Provide when items have fixed height \|
80	\| setState() everywhere \| Unnecessary widget rebuilds \| Targeted state, `const` constructors \|
81	\| Native driver: false \| Animations blocked by JS thread \| `useNativeDriver: true` always \|
82	\| console.log in production \| Blocks JS thread severely \| Remove before release build \|
83	\| Skip React.memo/const \| Every item re-renders on any change \| Memoize list items ALWAYS \|
84
85	#### Touch/UX Sins
86
87	\| ❌ NEVER DO \| Why It's Wrong \| ✅ ALWAYS DO \|
88	\|-------------\|----------------\|--------------\|
89	\| Touch target < 44px \| Impossible to tap accurately, frustrating \| Minimum 44pt (iOS) / 48dp (Android) \|
90	\| Spacing < 8px between targets \| Accidental taps on neighbors \| Minimum 8-12px gap \|
91	\| Gesture-only interactions \| M

People who liked this also viewed

6 picks

Type

mobile-design

39stars12forks

View on GitHub

How to install mobile-design?

nguyenphp/antigravity-marketing/mobile-design

$npx -y skills add nguyenphp/antigravity-marketing --skill mobile-design

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Mobile Design System
2
3	> Philosophy: Touch-first. Battery-conscious. Platform-respectful. Offline-capable.
4	> Core Principle: Mobile is NOT a small desktop. THINK mobile constraints, ASK platform choice.
5
6	---
7
8	## 🔧 Runtime Scripts
9
10	Execute these for validation (don't read, just run):
11
12	\| Script \| Purpose \| Usage \|
13	\|--------\|---------\|-------\|
14	\| `scripts/mobile_audit.py` \| Mobile UX & Touch Audit \| `python scripts/mobile_audit.py <project_path>` \|
15
16	---
17
18	## 🔴 MANDATORY: Read Reference Files Before Working!
19
20	⛔ DO NOT start development until you read the relevant files:
21
22	### Universal (Always Read)
23
24	\| File \| Content \| Status \|
25	\|------\|---------\|--------\|
26	\| [mobile-design-thinking.md](mobile-design-thinking.md) \| ⚠️ ANTI-MEMORIZATION: Forces thinking, prevents AI defaults \| ⬜ CRITICAL FIRST \|
27	\| [touch-psychology.md](touch-psychology.md) \| Fitts' Law, gestures, haptics, thumb zone \| ⬜ CRITICAL \|
28	\| [mobile-performance.md](mobile-performance.md) \| RN/Flutter performance, 60fps, memory \| ⬜ CRITICAL \|
29	\| [mobile-backend.md](mobile-backend.md) \| Push notifications, offline sync, mobile API \| ⬜ CRITICAL \|
30	\| [mobile-testing.md](mobile-testing.md) \| Testing pyramid, E2E, platform-specific \| ⬜ CRITICAL \|
31	\| [mobile-debugging.md](mobile-debugging.md) \| Native vs JS debugging, Flipper, Logcat \| ⬜ CRITICAL \|
32	\| [mobile-navigation.md](mobile-navigation.md) \| Tab/Stack/Drawer, deep linking \| ⬜ Read \|
33	\| [mobile-typography.md](mobile-typography.md) \| System fonts, Dynamic Type, a11y \| ⬜ Read \|
34	\| [mobile-color-system.md](mobile-color-system.md) \| OLED, dark mode, battery-aware \| ⬜ Read \|
35	\| [decision-trees.md](decision-trees.md) \| Framework/state/storage selection \| ⬜ Read \|
36
37	> 🧠 mobile-design-thinking.md is PRIORITY! This file ensures AI thinks instead of using memorized patterns.
38
39	### Platform-Specific (Read Based on Target)
40
41	\| Platform \| File \| Content \| When to Read \|
42	\|----------\|------\|---------\|--------------\|
43	\| iOS \| [platform-ios.md](platform-ios.md) \| Human Interface Guidelines, SF Pro, SwiftUI patterns \| Building for iPhone/iPad \|
44	\| Android \| [platform-android.md](platform-android.md) \| Material Design 3, Roboto, Compose patterns \| Building for Android \|
45	\| Cross-Platform \| Both above \| Platform divergence points \| React Native / Flutter \|
46
47	> 🔴 If building for iOS → Read platform-ios.md FIRST!
48	> 🔴 If building for Android → Read platform-android.md FIRST!
49	> 🔴 If cross-platform → Read BOTH and apply conditional platform logic!
50
51	---
52
53	## ⚠️ CRITICAL: ASK BEFORE ASSUMING (MANDATORY)
54
55	> STOP! If the user's request is open-ended, DO NOT default to your favorites.
56
57	### You MUST Ask If Not Specified:
58
59	\| Aspect \| Ask \| Why \|
60	\|--------\|-----\|-----\|
61	\| Platform \| "iOS, Android, or both?" \| Affects EVERY design decision \|
62	\| Framework \| "React Native, Flutter, or native?" \| Determines patterns and tools \|
63	\| Navigation \| "Tab bar, drawer, or stack-based?" \| Core UX decision \|
64	\| State \| "What state management? (Zustand/Redux/Riverpod/BLoC?)" \| Architecture foundation \|
65	\| Offline \| "Does this need to work offline?" \| Affects data strategy \|
66	\| Target devices \| "Phone only, or tablet support?" \| Layout complexity \|
67
68	### ⛔ AI MOBILE ANTI-PATTERNS (YASAK LİSTESİ)
69
70	> 🚫 These are AI default tendencies that MUST be avoided!
71
72	#### Performance Sins
73
74	\| ❌ NEVER DO \| Why It's Wrong \| ✅ ALWAYS DO \|
75	\|-------------\|----------------\|--------------\|
76	\| ScrollView for long lists \| Renders ALL items, memory explodes \| Use `FlatList` / `FlashList` / `ListView.builder` \|
77	\| Inline renderItem function \| New function every render, all items re-render \| `useCallback` + `React.memo` \|
78	\| Missing keyExtractor \| Index-based keys cause bugs on reorder \| Unique, stable ID from data \|
79	\| Skip getItemLayout \| Async layout = janky scroll \| Provide when items have fixed height \|
80	\| setState() everywhere \| Unnecessary widget rebuilds \| Targeted state, `const` constructors \|
81	\| Native driver: false \| Animations blocked by JS thread \| `useNativeDriver: true` always \|
82	\| console.log in production \| Blocks JS thread severely \| Remove before release build \|
83	\| Skip React.memo/const \| Every item re-renders on any change \| Memoize list items ALWAYS \|
84
85	#### Touch/UX Sins
86
87	\| ❌ NEVER DO \| Why It's Wrong \| ✅ ALWAYS DO \|
88	\|-------------\|----------------\|--------------\|
89	\| Touch target < 44px \| Impossible to tap accurately, frustrating \| Minimum 44pt (iOS) / 48dp (Android) \|
90	\| Spacing < 8px between targets \| Accidental taps on neighbors \| Minimum 8-12px gap \|
91	\| Gesture-only interactions \| M

People who liked this also viewed

6 picks

Type