@buivietphi/skill-mobile-mt 1.2.0 → 1.4.0

package/shared/on-device-ai.md

@@ -0,0 +1,175 @@
+# On-Device AI — Mobile ML Integration
+
+> On-demand. Load when: "on-device AI", "ML model", "Core ML", "TFLite", "MediaPipe", "llama", "inference", "local model"
+> Source: llama.cpp, Core ML, MediaPipe, TensorFlow Lite
+
+---
+
+## Decision Matrix
+
+```
+Use case                           Solution
+───────────────────────────────────────────────────────────
+Image classification / OCR         Core ML (iOS) / ML Kit (Android)
+Text classification / sentiment     Core ML NLP / ML Kit
+Face detection / pose estimation   Vision (iOS) / MediaPipe
+On-device LLM chat (<7B params)    llama.cpp / llama.rn / executorch
+Cloud LLM (>7B / latest models)    API call — don't run on device
+Real-time object detection         Core ML / TFLite + MediaPipe
+Speech to text (on-device)         SFSpeechRecognizer (iOS) / ML Kit (Android)
+
+Rule: If model > 500MB → use API. If latency > 3s acceptable → use API.
+```
+
+---
+
+## iOS — Core ML
+
+```swift
+// 1. Import model (drag .mlpackage into Xcode)
+import CoreML
+import Vision
+
+// 2. Image classification
+let model = try VNCoreMLModel(for: MyClassifier(configuration: .init()).model)
+let request = VNCoreMLRequest(model: model) { request, _ in
+    guard let results = request.results as? [VNClassificationObservation] else { return }
+    let top = results.first!
+    print("\(top.identifier): \(top.confidence)")
+}
+let handler = VNImageRequestHandler(cgImage: image, options: [:])
+try handler.perform([request])
+
+// 3. NLP text classification
+import NaturalLanguage
+let classifier = NLModel(mlModel: SentimentClassifier().model)
+let label = classifier.predictedLabel(for: "This is great!")
+
+// Model conversion: use coremltools Python package
+// coremltools.convert(pytorch_model, inputs=[...])
+```
+
+---
+
+## Android — ML Kit + MediaPipe
+
+```kotlin
+// ML Kit — text recognition (no model download needed)
+dependencies {
+    implementation("com.google.mlkit:text-recognition:16.0.0")
+    implementation("com.google.mlkit:face-detection:16.1.5")
+}
+
+val recognizer = TextRecognition.getClient(TextRecognizerOptions.DEFAULT_OPTIONS)
+recognizer.process(inputImage)
+    .addOnSuccessListener { result -> result.text }
+    .addOnFailureListener { e -> /* handle */ }
+
+// MediaPipe — pose / hand / face landmark detection
+dependencies {
+    implementation("com.google.mediapipe:tasks-vision:0.10.14")
+}
+
+val handLandmarker = HandLandmarker.createFromOptions(context,
+    HandLandmarkerOptions.builder()
+        .setBaseOptions(BaseOptions.builder().setModelAssetPath("hand_landmarker.task").build())
+        .setNumHands(2)
+        .build()
+)
+```
+
+---
+
+## On-Device LLM — llama.cpp (Cross-Platform)
+
+```
+Model sizes (GGUF Q4_K_M quantization):
+  Llama 3.2 3B   → ~2GB RAM  ✅ Phone-friendly
+  Llama 3.1 8B   → ~5GB RAM  ⚠️ High-end only (iPhone 15 Pro, Pixel 9)
+  Llama 3.1 70B  → ~40GB RAM ❌ Not feasible on device
+
+Download: huggingface.co/models?search=gguf
+```
+
+```swift
+// iOS — llama.swift
+// https://github.com/ggerganov/llama.cpp (Swift bindings included)
+import llama
+
+let model = llama_load_model_from_file(modelPath, llama_model_default_params())
+let ctx = llama_new_context_with_model(model, llama_context_default_params())
+// Tokenize + run inference on background thread
+```
+
+```javascript
+// React Native — llama.rn
+// npm install llama.rn
+import { LlamaContext } from 'llama.rn';
+
+const context = await LlamaContext.create({
+  model: `${RNFS.DocumentDirectoryPath}/model.gguf`,
+  n_ctx: 2048,
+  n_threads: 4,
+});
+const result = await context.completion({ prompt: 'Hello!', n_predict: 100 });
+```
+
+```dart
+// Flutter — flutter_llama (or use Platform.channel to llama.cpp)
+// For production: use executorch (Meta) or llama.cpp via FFI
+```
+
+---
+
+## React Native — ML Kit (via react-native-mlkit)
+
+```javascript
+// npm install @infinitered/react-native-mlkit-core
+// npm install @infinitered/react-native-mlkit-object-detection
+
+import { ObjectDetectionCamera } from '@infinitered/react-native-mlkit-object-detection';
+
+// Image labeling
+import MLKitImageLabeling from '@react-native-ml-kit/image-labeling';
+const labels = await MLKitImageLabeling.label(imageUri);
+// Returns: [{ text: 'Cat', confidence: 0.95 }]
+```
+
+---
+
+## Flutter — tflite_flutter
+
+```dart
+// pubspec.yaml: tflite_flutter: ^0.10.4
+import 'package:tflite_flutter/tflite_flutter.dart';
+
+final interpreter = await Interpreter.fromAsset('model.tflite');
+final input = [imageData];  // pre-processed tensor
+final output = List.filled(1000, 0).reshape([1, 1000]);
+interpreter.run(input, output);
+// output[0] = probability for each class
+```
+
+---
+
+## Performance Rules
+
+```
+1. NEVER run inference on the main thread
+   iOS: DispatchQueue.global(qos: .userInitiated).async { ... }
+   Android: viewModelScope.launch(Dispatchers.Default) { ... }
+   RN: run on JS thread or use NativeModule
+
+2. Load model ONCE — cache in memory
+   ❌ Load model on every inference call
+   ✅ Load at app start or first use, keep reference
+
+3. Batch requests when possible
+   - Process images in background queue, not per-tap
+
+4. Show progress for operations >500ms
+   - Spinner or progress bar — user expects AI to take a moment
+
+5. Fallback to API if device is low on memory
+   let memoryPressure = ProcessInfo.processInfo.isLowPowerModeEnabled
+```

package/shared/platform-excellence.md

@@ -144,6 +144,86 @@ export const LoginScreen = Platform.select({
 
 ---
 
+## iOS Haptics
+
+```swift
+// 3 feedback types — use the right one
+UIImpactFeedbackGenerator(style: .medium).impactOccurred()  // button tap, card flip
+UINotificationFeedbackGenerator().notificationOccurred(.success)  // save success / error / warning
+UISelectionFeedbackGenerator().selectionChanged()  // picker scroll, toggle
+
+// ✅ Rules
+// - Impact: physical interactions (drag drop, button press)
+// - Notification: outcomes (success, error, warning) — max 1 per action
+// - Selection: discrete value changes (picker, slider step)
+// ⛔ Never chain multiple haptics in <300ms
+// ⛔ Never use for routine navigation (back, tab switch)
+```
+
+## Permission Timing (iOS/Android)
+
+```
+RULE: Ask ONLY when the feature needs it — not at launch
+
+Permission     When to ask
+─────────────────────────────────────────────────────
+Camera         User taps "Take Photo" button
+Location       User taps "Find Nearby" or map feature
+Contacts       User taps "Invite from Contacts"
+Notifications  After onboarding, show a pre-permission dialog first
+Microphone     User taps "Record Voice Note"
+
+PRE-PERMISSION DIALOG (iOS — before system prompt):
+"Get notified when teammates reply"
+[Allow] [Not now]
+→ Only show system prompt if user taps Allow
+→ Saves 1 chance at permission — don't waste it at cold start
+```
+
+## Ratings Timing
+
+```
+// 2-step flow — ask only after success
+Step 1: "Is [App] helping you get things done?"
+        [Yes!] [Not really]
+
+Step 2 (if Yes): "Mind leaving a review? It helps us a lot."
+                 [Sure] [Maybe later]
+Step 2 (if No):  "What's getting in the way?" [Give feedback]
+
+// iOS: Use SKStoreReviewController.requestReview() — max 3x/year
+// Android: Use ReviewManager from Play Core library
+// NEVER ask after an error, payment, or on app cold start
+```
+
+## Live Activities / Dynamic Island (iOS 16.1+)
+
+```swift
+// 1. Define attributes
+struct DeliveryAttributes: ActivityAttributes {
+    struct ContentState: Codable, Hashable {
+        var status: String
+        var eta: Date
+    }
+    var orderId: String
+}
+
+// 2. Start activity
+let initialState = DeliveryAttributes.ContentState(status: "Preparing", eta: Date())
+let activity = try? Activity.request(
+    attributes: DeliveryAttributes(orderId: "123"),
+    content: .init(state: initialState, staleDate: nil)
+)
+
+// 3. Update
+await activity?.update(.init(state: .init(status: "Out for delivery", eta: Date()), staleDate: nil))
+
+// 4. End
+await activity?.end(dismissalPolicy: .default)
+```
+
+---
+
 ## Anti-Patterns
 
 ```
@@ -151,9 +231,14 @@ export const LoginScreen = Platform.select({
 ❌ iOS navigation on Android
 ❌ Ignoring platform conventions
 ❌ "Write once, look mediocre everywhere"
+❌ Asking permissions at app launch
+❌ Chaining multiple haptics back-to-back
+❌ Rating prompt right after install
 
 ✅ Native look & feel per platform
 ✅ Shared logic, platform UI
 ✅ Respect platform guidelines
 ✅ "Write once, look native everywhere"
+✅ Ask permissions at the moment they're needed
+✅ Rating prompts only after clear success moments
 ```

package/shared/prompt-engineering.md

@@ -66,6 +66,14 @@
 BUG: [description]
 FILE: [path]
 
+<source_verification>
+  ⚠️ BEFORE analyzing — verify I have real data:
+  - [ ] Read the actual file (not guessing from error message)
+  - [ ] Verified function/class names exist (grep)
+  - [ ] Checked package versions in package.json/pubspec.yaml
+  - [ ] Identified data types from actual code (not assumed)
+</source_verification>
+
 <context_needed>
   - Read [file] to understand current implementation
   - Grep for similar patterns: grep "[pattern]" src/
@@ -77,6 +85,7 @@ FILE: [path]
   - What code is executed?
   - What values are passed?
   - What conditions are checked?
+  SOURCE: [file:line where the bug is — cite exact location]
 </root_cause>
 
 <fix>
@@ -84,6 +93,7 @@ FILE: [path]
 
   WHY IT WORKS:
   [Explain the fix based on root cause]
+  SOURCE: [where this fix pattern comes from — project code / skill file / official docs]
 </fix>
 
 <side_effects>
@@ -165,6 +175,14 @@ BUG: App crashes when tapping product with no images
 FEATURE: [description]
 PLATFORM: [React Native / Flutter / iOS / Android]
 
+<source_verification>
+  ⚠️ GROUNDING CHECK:
+  - [ ] Scanned actual project structure (not assumed)
+  - [ ] Found real reference feature (not imagined)
+  - [ ] Will read reference files before cloning pattern
+  - [ ] Will verify all imports/packages exist before using
+</source_verification>
+
 STEP 1: SCAN PROJECT
   - List screens: ls src/screens/
   - Find similar features: grep -r "useState" src/screens/
@@ -620,6 +638,16 @@ Faster than reading documentation.
    "Create login screen following pattern in src/screens/ProductScreen
    using Redux slice from src/store/slices/authSlice
    with email/password fields + remember me checkbox"
+
+❌ Hallucinated answers (AI "intuition")
+   "Use react-native-awesome-picker for this"  ← package may not exist
+   "Call the fetchUserData() method"            ← function may not exist
+   "This API returns { data: [...] }"           ← response shape may be wrong
+
+✅ Grounded answers (verified from source)
+   Read package.json → verify package exists → then suggest usage
+   Grep "fetchUser" src/ → find actual function → then reference it
+   Read API service file → check actual response shape → then use it
 ```
 
 ---

package/shared/version-management.md

@@ -9,6 +9,23 @@
 
 ---
 
+## ⚠️ IMPORTANT: Always WebSearch for Latest
+
+**The version matrix below is a SNAPSHOT and may be outdated.**
+**Before installing ANY package or suggesting ANY version:**
+
+```
+1. WebSearch "[package] latest version [current year]"
+2. WebSearch "[package] [framework version] compatibility"
+3. Read the OFFICIAL changelog/migration guide
+4. Cross-reference with the matrix below
+
+⛔ NEVER rely solely on the matrix below — it was written at a point in time
+✅ ALWAYS verify with WebSearch for the most current information
+```
+
+---
+
 ## Version Matrix (React Native / Expo)
 
 ### Expo SDK Compatibility