---
name: bekhruztursunboev/bexa-mobile
source: https://app.decimal.ai/s/bekhruztursunboev-bexa-mobile@1/SKILL.md
source_sha256: 22637f4c5b3c
---

# FORGE MOBILE — Native-Grade Mobile Design Skill

> Designing for a human holding glass with their thumbs.
> Every decision — padding, font, tap target, animation — must honor that physical reality.

---

## DIAL CONFIGURATION

```
NATIVE_FIDELITY:  8   (1=Web-wrapper / 10=Indistinguishable from OS)
GESTURE_DEPTH:    7   (1=Tap only / 10=Physics swipe, pinch, long-press)
VISUAL_RICHNESS:  6   (1=Minimal / 10=Rich depth layers)
```

---

## SECTION 1 — MOBILE-FIRST CONSTRAINTS

**Thumb Zone:** Primary actions in bottom 40% of screen. Destructive actions top. NO hamburger menus.

**Touch Targets:**
- Minimum: 44×44pt (iOS) / 48×48dp (Android)
- Visual can be smaller; hitbox must be padded to minimum
- Min 8pt gap between adjacent targets

**Safe Areas:** Always use `SafeAreaView`. Bottom: 34pt for home indicator. Never place critical content in top 59pt (Dynamic Island zone).

---

## SECTION 2 — TYPOGRAPHY MOBILE SCALE

| Level | Size (pt/sp) | Weight |
|---|---|---|
| Display | 34 | 700 |
| Title 1 | 28 | 700 |
| Title 2 | 22 | 600 |
| Headline | 17 | 600 |
| Body | 17 | 400 |
| Footnote | 13 | 400 |
| Caption | 12 | 400 |

**Font selection:** `Sora` + `DM Sans` for iOS feel. `Plus Jakarta Sans` + `Geist` for Android feel. Never system defaults only.

---

## SECTION 3 — GESTURE PHYSICS

When `GESTURE_DEPTH >= 5`: use `react-native-reanimated` + `react-native-gesture-handler`. Never `PanResponder`.

**Spring configuration:**
```js
// Premium iOS-like spring
const spring = { damping: 15, stiffness: 150, mass: 0.8 };
// Snappy confirmation
const snap   = { damping: 20, stiffness: 300, mass: 0.5 };
```

**Haptics:** Every state change triggers haptic feedback.
- Button press → `ImpactFeedbackStyle.Light`
- Success → `NotificationFeedbackType.Success`
- Error → `NotificationFeedbackType.Error`
- Drag threshold → `ImpactFeedbackStyle.Medium`

---

## SECTION 4 — PLATFORM MOTION

**iOS:** Sheets slide up from bottom with spring. Navigation push slides at 85% finger speed. Action completion scales to 0.95 → overshoot release.

**Android:** Material You ripple on all pressables. `BottomSheetModal` with snapPoints `['40%','70%','95%']`. Shared element transitions on list→detail.

**Universal:**
- Loading: shimmer skeleton matching exact content layout
- Pull-to-refresh: liquid droplet — NOT a spinner
- Scroll: honor platform physics, never hard-stop

---

## SECTION 5 — COLOR SYSTEM (MOBILE)

```
Light — Surface: hsl(220 14% 98%) | Card: hsl(0 0% 100%)
Dark  — Surface: hsl(220 20%  8%) | Card: hsl(220 20% 12%)
OLED  — Background: hsl(0 0% 0%) | Cards remain hsl(220 20% 8%)
```

Accent: same rules as FORGE core (1 accent, sat ≤ 75%, no AI purple).

---

## SECTION 6 — PERFORMANCE MANDATES

- **Images:** `expo-image` or `FastImage`. Never plain `<Image>` in lists.
- **Lists:** `FlashList` with `estimatedItemSize`. `FlatList` only for < 50 items.
- **Animations:** `useSharedValue` + `useAnimatedStyle` (Reanimated 3). JS thread animations = BANNED.
- **Re-renders:** `React.memo` all list items. `useCallback` all handlers passed as props.
- **Network:** Cache responses. Show stale data + refresh indicator, never blank screen.