tribunal-kit 1.0.0 → 2.4.2

package/.agent/skills/mobile-design/SKILL.md

@@ -1,13 +1,16 @@
 ---
 name: mobile-design
-description: 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.
+description: Mobile-first and Spatial computing design thinking for iOS, Android, Foldables, and WebXR. Touch interaction, advanced haptics, on-device AI patterns, performance extremis. Teaches principles, not fixed values.
 allowed-tools: Read, Glob, Grep, Bash
+version: 1.0.0
+last-updated: 2026-03-12
+applies-to-model: gemini-2.5-pro, claude-3-7-sonnet
 ---
 
-# Mobile Design System
+# Mobile & Spatial Design System (Pro-Max Level)
 
-> **Philosophy:** Touch-first. Battery-conscious. Platform-respectful. Offline-capable.
-> **Core Principle:** Mobile is NOT a small desktop. THINK mobile constraints, ASK platform choice.
+> **Philosophy:** Touch-first. Battery-conscious. Platform-respectful. Contextually aware.
+> **Core Principle:** Mobile is NOT a small desktop. It is a sensor-rich, context-aware extension of the user. THINK constraints, EXPECT hardware diversity.
 
 ---
 
@@ -30,30 +33,15 @@ allowed-tools: Read, Glob, Grep, Bash
 | File | Content | Status |
 |------|---------|--------|
 | **[mobile-design-thinking.md](mobile-design-thinking.md)** | **⚠️ ANTI-MEMORIZATION: Forces thinking, prevents AI defaults** | **⬜ CRITICAL FIRST** |
-| **[touch-psychology.md](touch-psychology.md)** | **Fitts' Law, gestures, haptics, thumb zone** | **⬜ CRITICAL** |
-| **[mobile-performance.md](mobile-performance.md)** | **RN/Flutter performance, 60fps, memory** | **⬜ CRITICAL** |
-| **[mobile-backend.md](mobile-backend.md)** | **Push notifications, offline sync, mobile API** | **⬜ CRITICAL** |
-| **[mobile-testing.md](mobile-testing.md)** | **Testing pyramid, E2E, platform-specific** | **⬜ CRITICAL** |
-| **[mobile-debugging.md](mobile-debugging.md)** | **Native vs JS debugging, Flipper, Logcat** | **⬜ CRITICAL** |
-| [mobile-navigation.md](mobile-navigation.md) | Tab/Stack/Drawer, deep linking | ⬜ Read |
-| [mobile-typography.md](mobile-typography.md) | System fonts, Dynamic Type, a11y | ⬜ Read |
-| [mobile-color-system.md](mobile-color-system.md) | OLED, dark mode, battery-aware | ⬜ Read |
+| **[spatial-and-foldables.md](spatial-and-foldables.md)** | **Foldable screens, WebXR, dynamic viewports** | **⬜ CRITICAL** |
+| **[on-device-ai.md](on-device-ai.md)** | **Streaming UI, local models, zero-wait states** | **⬜ CRITICAL** |
+| **[touch-psychology.md](touch-psychology.md)** | **Advanced haptics, Fitts' Law, magnetic touch targets** | **⬜ CRITICAL** |
+| **[mobile-performance.md](mobile-performance.md)** | **React Native/Flutter rendering at 120Hz** | **⬜ CRITICAL** |
+| [mobile-navigation.md](mobile-navigation.md) | Tab/Stack/Drawer, deep linking, spatial z-axis nav | ⬜ Read |
 | [decision-trees.md](decision-trees.md) | Framework/state/storage selection | ⬜ Read |
 
 > 🧠 **mobile-design-thinking.md is PRIORITY!** This file ensures AI thinks instead of using memorized patterns.
 
-### Platform-Specific (Read Based on Target)
-
-| Platform | File | Content | When to Read |
-|----------|------|---------|--------------|
-| **iOS** | [platform-ios.md](platform-ios.md) | Human Interface Guidelines, SF Pro, SwiftUI patterns | Building for iPhone/iPad |
-| **Android** | [platform-android.md](platform-android.md) | Material Design 3, Roboto, Compose patterns | Building for Android |
-| **Cross-Platform** | Both above | Platform divergence points | React Native / Flutter |
-
-> 🔴 **If building for iOS → Read platform-ios.md FIRST!**
-> 🔴 **If building for Android → Read platform-android.md FIRST!**
-> 🔴 **If cross-platform → Read BOTH and apply conditional platform logic!**
-
 ---
 
 ## ⚠️ CRITICAL: ASK BEFORE ASSUMING (MANDATORY)
@@ -64,210 +52,86 @@ allowed-tools: Read, Glob, Grep, Bash
 
 | Aspect | Ask | Why |
 |--------|-----|-----|
-| **Platform** | "iOS, Android, or both?" | Affects EVERY design decision |
-| **Framework** | "React Native, Flutter, or native?" | Determines patterns and tools |
-| **Navigation** | "Tab bar, drawer, or stack-based?" | Core UX decision |
-| **State** | "What state management? (Zustand/Redux/Riverpod/BLoC?)" | Architecture foundation |
-| **Offline** | "Does this need to work offline?" | Affects data strategy |
-| **Target devices** | "Phone only, or tablet support?" | Layout complexity |
+| **Form Factor** | "Standard mobile only, or support for Foldables/Tablets?" | Affects fluid layout geometry |
+| **Performance** | "Is this targeting 60Hz or 120Hz ProMotion displays?" | Determines animation physics |
+| **AI Integration**| "Are we streaming LLM responses to the UI?" | Defines loading vs streaming patterns |
+| **Platform** | "iOS, Android, Spatial (VisionOS/WebXR), or cross-platform?" | Affects EVERY design decision |
 
 ### ⛔ AI MOBILE ANTI-PATTERNS (YASAK LİSTESİ)
 
 > 🚫 **These are AI default tendencies that MUST be avoided!**
 
-#### Performance Sins
-
+#### Performance & Display Sins
 | ❌ NEVER DO | Why It's Wrong | ✅ ALWAYS DO |
 |-------------|----------------|--------------|
-| **ScrollView for long lists** | Renders ALL items, memory explodes | Use `FlatList` / `FlashList` / `ListView.builder` |
-| **Inline renderItem function** | New function every render, all items re-render | `useCallback` + `React.memo` |
-| **Missing keyExtractor** | Index-based keys cause bugs on reorder | Unique, stable ID from data |
-| **Skip getItemLayout** | Async layout = janky scroll | Provide when items have fixed height |
-| **setState() everywhere** | Unnecessary widget rebuilds | Targeted state, `const` constructors |
-| **Native driver: false** | Animations blocked by JS thread | `useNativeDriver: true` always |
+| **Pure White Backgrounds** | Blinds users at night, drains battery | OLED True Black (`#000`) or off-white (`#FAFAFA`) |
+| **Linear Animations** | Feels robotic and cheap | Spring physics (`stiffness`, `damping`) |
+| **ScrollView for long lists** | Renders ALL items, memory explodes | Use `FlashList` / `ListView.builder` / Virtualization |
 | **console.log in production** | Blocks JS thread severely | Remove before release build |
-| **Skip React.memo/const** | Every item re-renders on any change | Memoize list items ALWAYS |
-
-#### Touch/UX Sins
 
+#### Touch & UX Sins
 | ❌ NEVER DO | Why It's Wrong | ✅ ALWAYS DO |
 |-------------|----------------|--------------|
-| **Touch target < 44px** | Impossible to tap accurately, frustrating | Minimum 44pt (iOS) / 48dp (Android) |
-| **Spacing < 8px between targets** | Accidental taps on neighbors | Minimum 8-12px gap |
+| **Touch target < 48px** | Frustrating, violates modern Fitts' Law | Min 48px (iOS/Android), mathematically enforced |
+| **Silent Interactions** | Breaks the illusion of tactility | Bind visual state changes to Advanced Haptic Feedback |
+| **Blocking Spinners for AI** | "Thinking..." spinners cause abandonment | Stream skeleton → partial text → layout |
 | **Gesture-only interactions** | Motor impaired users excluded | Always provide button alternative |
-| **No loading state** | User thinks app crashed | ALWAYS show loading feedback |
-| **No error state** | User stuck, no recovery path | Show error with retry option |
-| **No offline handling** | Crash/block when network lost | Graceful degradation, cached data |
-| **Ignore platform conventions** | Users confused, muscle memory broken | iOS feels iOS, Android feels Android |
-
-#### Security Sins
-
-| ❌ NEVER DO | Why It's Wrong | ✅ ALWAYS DO |
-|-------------|----------------|--------------|
-| **Token in AsyncStorage** | Easily accessible, stolen on rooted device | `SecureStore` / `Keychain` / `EncryptedSharedPreferences` |
-| **Hardcode API keys** | Reverse engineered from APK/IPA | Environment variables, secure storage |
-| **Skip SSL pinning** | MITM attacks possible | Pin certificates in production |
-| **Log sensitive data** | Logs can be extracted | Never log tokens, passwords, PII |
-
-#### Architecture Sins
-
-| ❌ NEVER DO | Why It's Wrong | ✅ ALWAYS DO |
-|-------------|----------------|--------------|
-| **Business logic in UI** | Untestable, unmaintainable | Service layer separation |
-| **Global state for everything** | Unnecessary re-renders, complexity | Local state default, lift when needed |
-| **Deep linking as afterthought** | Notifications, shares broken | Plan deep links from day one |
-| **Skip dispose/cleanup** | Memory leaks, zombie listeners | Clean up subscriptions, timers |
 
 ---
 
-## 📱 Platform Decision Matrix
+## 📱 Hardware & Context Adaptation
 
-### When to Unify vs Diverge
+### 1. The Foldable & Dynamic Screen Era
+Phones fold. Tablets resize. UIs must be perfectly fluid, not reliant on fixed breakpoints.
+- **TwoPane Layouts:** List-Detail views that dynamically collapse into single stacks.
+- **Hinge Awareness:** Do not place critical interactive elements across the physical hinge of a foldable device.
 
-```
-                    UNIFY (same on both)          DIVERGE (platform-specific)
-                    ───────────────────           ──────────────────────────
-Business Logic      ✅ Always                     -
-Data Layer          ✅ Always                     -
-Core Features       ✅ Always                     -
-                    
-Navigation          -                             ✅ iOS: edge swipe, Android: back button
-Gestures            -                             ✅ Platform-native feel
-Icons               -                             ✅ SF Symbols vs Material Icons
-Date Pickers        -                             ✅ Native pickers feel right
-Modals/Sheets       -                             ✅ iOS: bottom sheet vs Android: dialog
-Typography          -                             ✅ SF Pro vs Roboto (or custom)
-Error Dialogs       -                             ✅ Platform conventions for alerts
-```
-
-### Quick Reference: Platform Defaults
+### 2. Advanced Haptics (Tactile UI)
+Visuals are only half the UI. Mobile relies on touch.
+- Bind `Haptics.impactAsync('light')` to micro-interactions (e.g., toggling a switch).
+- Bind `Haptics.notificationAsync('success')` to state completions.
+- *Never* overuse haptics. They must mean something.
 
-| Element | iOS | Android |
-|---------|-----|---------|
-| **Primary Font** | SF Pro / SF Compact | Roboto |
-| **Min Touch Target** | 44pt × 44pt | 48dp × 48dp |
-| **Back Navigation** | Edge swipe left | System back button/gesture |
-| **Bottom Tab Icons** | SF Symbols | Material Symbols |
-| **Action Sheet** | UIActionSheet from bottom | Bottom Sheet / Dialog |
-| **Progress** | Spinner | Linear progress (Material) |
-| **Pull to Refresh** | Native UIRefreshControl | SwipeRefreshLayout |
+### 3. Spatial Z-Axis & Depth
+Modern OSs (iOS 18+, Android 15+) heavily utilize depth and blur.
+- Utilize native `BlurView` or `VisualEffectView` materials for absolutely positioned overlays (tab bars, headers).
+- Shadows must have multi-layered dispersion, not harsh CSS `box-shadow` single drops.
 
 ---
 
-## 🧠 Mobile UX Psychology (Quick Reference)
+## 🧠 Mobile Extreme UX Psychology
 
-### Fitts' Law for Touch
+### Fitts' Law for Touch & Magnetic Targets
+Touch screens are wildly imprecise. 
+- Touch targets MUST be >48px minimum.
+- Important actions map to the THUMB ZONE (bottom arc).
+- **Magnetic Padding:** Visual size can be small (24px icon), but the *hitbox* padding must expand to 48px.
 
-```
-Desktop: Cursor is precise (1px)
-Mobile:  Finger is imprecise (~7mm contact area)
-
-→ Touch targets MUST be 44-48px minimum
-→ Important actions in THUMB ZONE (bottom of screen)
-→ Destructive actions AWAY from easy reach
-```
-
-### Thumb Zone (One-Handed Usage)
-
-```
-┌─────────────────────────────┐
-│      HARD TO REACH          │ ← Navigation, menu, back
-│        (stretch)            │
-├─────────────────────────────┤
-│      OK TO REACH            │ ← Secondary actions
-│       (natural)             │
-├─────────────────────────────┤
-│      EASY TO REACH          │ ← PRIMARY CTAs, tab bar
-│    (thumb's natural arc)    │ ← Main content interaction
-└─────────────────────────────┘
-        [  HOME  ]
-```
-
-### Mobile-Specific Cognitive Load
-
-| Desktop | Mobile Difference |
-|---------|-------------------|
-| Multiple windows | ONE task at a time |
-| Keyboard shortcuts | Touch gestures |
-| Hover states | NO hover (tap or nothing) |
-| Large viewport | Limited space, scroll vertical |
-| Stable attention | Interrupted constantly |
-
-For deep dive: [touch-psychology.md](touch-psychology.md)
+### On-Device AI UX Patterns
+- **Zero-Wait Illusion:** When a model is running, immediately populate the UI with contextual guesses or streaming tokens.
+- **Progressive Disclosure of Confidence:** If AI confidence is low, the UI should reflect uncertainty visually (softer colors, explicit confirmation required).
 
 ---
 
-## ⚡ Performance Principles (Quick Reference)
+## ⚡ Performance Extremis (Quick Reference)
 
-### React Native Critical Rules
+### 120Hz Animation Mandate
+If your animation drops below 120fps on modern hardware, it's failed.
+- GPU-accelerated ONLY: `transform` (translate, scale, rotate) and `opacity`.
+- CPU-bound AVOID: `width`, `height`, `margin`, `top/left/bottom/right`.
+- React Native: MUST use Reanimated 3+ worklets for all motion; `Animated` API is legacy.
 
+### React Native Critical Rules
 ```typescript
-// ✅ CORRECT: Memoized renderItem + React.memo wrapper
-const ListItem = React.memo(({ item }: { item: Item }) => (
-  <View style={styles.item}>
-    <Text>{item.title}</Text>
-  </View>
-));
-
-const renderItem = useCallback(
-  ({ item }: { item: Item }) => <ListItem item={item} />,
-  []
-);
-
-// ✅ CORRECT: FlatList with all optimizations
-<FlatList
+// ✅ CORRECT: FlashList for extreme performance
+<FlashList
   data={items}
   renderItem={renderItem}
-  keyExtractor={(item) => item.id}  // Stable ID, NOT index
-  getItemLayout={(data, index) => ({
-    length: ITEM_HEIGHT,
-    offset: ITEM_HEIGHT * index,
-    index,
-  })}
-  removeClippedSubviews={true}
-  maxToRenderPerBatch={10}
-  windowSize={5}
+  estimatedItemSize={100} // CRITICAL for FlashList
+  keyExtractor={(item) => item.id}
 />
 ```
 
-### Flutter Critical Rules
-
-```dart
-// ✅ CORRECT: const constructors prevent rebuilds
-class MyWidget extends StatelessWidget {
-  const MyWidget({super.key}); // CONST!
-
-  @override
-  Widget build(BuildContext context) {
-    return const Column( // CONST!
-      children: [
-        Text('Static content'),
-        MyConstantWidget(),
-      ],
-    );
-  }
-}
-
-// ✅ CORRECT: Targeted state with ValueListenableBuilder
-ValueListenableBuilder<int>(
-  valueListenable: counter,
-  builder: (context, value, child) => Text('$value'),
-  child: const ExpensiveWidget(), // Won't rebuild!
-)
-```
-
-### Animation Performance
-
-```
-GPU-accelerated (FAST):     CPU-bound (SLOW):
-├── transform               ├── width, height
-├── opacity                 ├── top, left, right, bottom
-└── (use these ONLY)        ├── margin, padding
-                            └── (AVOID animating these)
-```
-
-For complete guide: [mobile-performance.md](mobile-performance.md)
-
 ---
 
 ## 📝 CHECKPOINT (MANDATORY Before Any Mobile Work)
@@ -277,118 +141,74 @@ For complete guide: [mobile-performance.md](mobile-performance.md)
 ```
 🧠 CHECKPOINT:
 
-Platform:   [ iOS / Android / Both ]
-Framework:  [ React Native / Flutter / SwiftUI / Kotlin ]
-Files Read: [ List the skill files you've read ]
+Platform target:   [ iOS / Android / Foldable / Spatial ]
+Hardware expectation:[ 60Hz / 120Hz ]
+Haptic Strategy:   [ Define trigger points ]
 
-3 Principles I Will Apply:
+3 Extreme Principles I Will Apply:
 1. _______________
 2. _______________
 3. _______________
-
-Anti-Patterns I Will Avoid:
-1. _______________
-2. _______________
-```
-
-**Example:**
 ```
-🧠 CHECKPOINT:
-
-Platform:   iOS + Android (Cross-platform)
-Framework:  React Native + Expo
-Files Read: touch-psychology.md, mobile-performance.md, platform-ios.md, platform-android.md
 
-3 Principles I Will Apply:
-1. FlatList with React.memo + useCallback for all lists
-2. 48px touch targets, thumb zone for primary CTAs
-3. Platform-specific navigation (edge swipe iOS, back button Android)
-
-Anti-Patterns I Will Avoid:
-1. ScrollView for lists → FlatList
-2. Inline renderItem → Memoized
-3. AsyncStorage for tokens → SecureStore
-```
-
-> 🔴 **Can't fill the checkpoint? → GO BACK AND READ THE SKILL FILES.**
+> **Remember:** You are designing for a piece of glass that people stare at for 6 hours a day. Battery life, touch precision, and 120Hz fluidity are not optional features; they are the medium itself.
 
 ---
 
-## 🔧 Framework Decision Tree
+## Output Format
+
+When this skill produces a recommendation or design decision, structure your output as:
 
 ```
-WHAT ARE YOU BUILDING?
-        │
-        ├── Need OTA updates + rapid iteration + web team
-        │   └── ✅ React Native + Expo
-        │
-        ├── Need pixel-perfect custom UI + performance critical
-        │   └── ✅ Flutter
-        │
-        ├── Deep native features + single platform focus
-        │   ├── iOS only → SwiftUI
-        │   └── Android only → Kotlin + Jetpack Compose
-        │
-        ├── Existing RN codebase + new features
-        │   └── ✅ React Native (bare workflow)
-        │
-        └── Enterprise + existing Flutter codebase
-            └── ✅ Flutter
+━━━ Mobile Design Recommendation ━━━━━━━━━━━━━━━━
+Decision:    [what was chosen / proposed]
+Rationale:   [why — one concise line]
+Trade-offs:  [what is consciously accepted]
+Next action: [concrete next step for the user]
+─────────────────────────────────────────────────
+Pre-Flight:  ✅ All checks passed
+             or ❌ [blocking item that must be resolved first]
 ```
 
-For complete decision trees: [decision-trees.md](decision-trees.md)
 
----
 
-## 📋 Pre-Development Checklist
+---
 
-### Before Starting ANY Mobile Project
+## 🤖 LLM-Specific Traps
 
-- [ ] **Platform confirmed?** (iOS / Android / Both)
-- [ ] **Framework chosen?** (RN / Flutter / Native)
-- [ ] **Navigation pattern decided?** (Tabs / Stack / Drawer)
-- [ ] **State management selected?** (Zustand / Redux / Riverpod / BLoC)
-- [ ] **Offline requirements known?**
-- [ ] **Deep linking planned from day one?**
-- [ ] **Target devices defined?** (Phone / Tablet / Both)
+AI coding assistants often fall into specific bad habits when dealing with this domain. These are strictly forbidden:
 
-### Before Every Screen
+1. **Over-engineering:** Proposing complex abstractions or distributed systems when a simpler approach suffices.
+2. **Hallucinated Libraries/Methods:** Using non-existent methods or packages. Always `// VERIFY` or check `package.json` / `requirements.txt`.
+3. **Skipping Edge Cases:** Writing the "happy path" and ignoring error handling, timeouts, or data validation.
+4. **Context Amnesia:** Forgetting the user's constraints and offering generic advice instead of tailored solutions.
+5. **Silent Degradation:** Catching and suppressing errors without logging or re-raising.
 
-- [ ] **Touch targets ≥ 44-48px?**
-- [ ] **Primary CTA in thumb zone?**
-- [ ] **Loading state exists?**
-- [ ] **Error state with retry exists?**
-- [ ] **Offline handling considered?**
-- [ ] **Platform conventions followed?**
+---
 
-### Before Release
+## 🏛️ Tribunal Integration (Anti-Hallucination)
 
-- [ ] **console.log removed?**
-- [ ] **SecureStore for sensitive data?**
-- [ ] **SSL pinning enabled?**
-- [ ] **Lists optimized (memo, keyExtractor)?**
-- [ ] **Memory cleanup on unmount?**
-- [ ] **Tested on low-end devices?**
-- [ ] **Accessibility labels on all interactive elements?**
+**Slash command: `/review` or `/tribunal-full`**
+**Active reviewers: `logic-reviewer` · `security-auditor`**
 
----
+### ❌ Forbidden AI Tropes
 
-## 📚 Reference Files
+1. **Blind Assumptions:** Never make an assumption without documenting it clearly with `// VERIFY: [reason]`.
+2. **Silent Degradation:** Catching and suppressing errors without logging or handling.
+3. **Context Amnesia:** Forgetting the user's constraints and offering generic advice instead of tailored solutions.
 
-For deeper guidance on specific areas:
+### ✅ Pre-Flight Self-Audit
 
-| File | When to Use |
-|------|-------------|
-| [mobile-design-thinking.md](mobile-design-thinking.md) | **FIRST! Anti-memorization, forces context-based thinking** |
-| [touch-psychology.md](touch-psychology.md) | Understanding touch interaction, Fitts' Law, gesture design |
-| [mobile-performance.md](mobile-performance.md) | Optimizing RN/Flutter, 60fps, memory/battery |
-| [platform-ios.md](platform-ios.md) | iOS-specific design, HIG compliance |
-| [platform-android.md](platform-android.md) | Android-specific design, Material Design 3 |
-| [mobile-navigation.md](mobile-navigation.md) | Navigation patterns, deep linking |
-| [mobile-typography.md](mobile-typography.md) | Type scale, system fonts, accessibility |
-| [mobile-color-system.md](mobile-color-system.md) | OLED optimization, dark mode, battery |
-| [decision-trees.md](decision-trees.md) | Framework, state, storage decisions |
+Review these questions before confirming output:
+```
+✅ Did I rely ONLY on real, verified tools and methods?
+✅ Is this solution appropriately scoped to the user's constraints?
+✅ Did I handle potential failure modes and edge cases?
+✅ Have I avoided generic boilerplate that doesn't add value?
+```
 
----
+### 🛑 Verification-Before-Completion (VBC) Protocol
 
-> **Remember:** Mobile users are impatient, interrupted, and using imprecise fingers on small screens. Design for the WORST conditions: bad network, one hand, bright sun, low battery. If it works there, it works everywhere.
+**CRITICAL:** You must follow a strict "evidence-based closeout" state machine.
+- ❌ **Forbidden:** Declaring a task complete because the output "looks correct."
+- ✅ **Required:** You are explicitly forbidden from finalizing any task without providing **concrete evidence** (terminal output, passing tests, compile success, or equivalent proof) that your output works as intended.