القائمة
Premium mobile UI skill for React Native and Expo apps. Enforces native-grade interaction patterns, platform-specific motion, gesture physics, and non-generic visual systems for iOS and Android.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Advanced motion and animation design skill. Covers scroll-storytelling, physics-grade interactions, Three.js/WebGL, GSAP choreography, and cinematic page transitions. Use alongside forge-core when MOTION_DEPTH >= 8 is needed.
Data-dense dashboard and admin panel design skill for AI agents. Enforces information hierarchy, data visualization clarity, high-density layouts, and professional SaaS-grade UI patterns.
Advanced motion and animation design skill for AI agents. Covers scroll-storytelling, physics-grade interactions, Three.js/WebGL, GSAP choreography, and cinematic page transitions. Use alongside bexa when MOTION_DEPTH >= 8 is needed.
Professional web design skill for AI coding agents. Overrides LLM default UI biases. Non-generic, minimalist, animated frontends. Framework-agnostic. Web / SaaS / Product / Portfolio / Editorial.
Agency-grade landing page design skill. High-conversion, brand-matched, animated. Overrides every generic landing page pattern AI defaults to. Produces Awwwards-caliber pages that convert.
| name | bexa-mobile |
| description | Premium mobile UI skill for React Native and Expo apps. Enforces native-grade interaction patterns, platform-specific motion, gesture physics, and non-generic visual systems for iOS and Android. |
| version | 1.2.0 |
Designing for a human holding glass with their thumbs. Every decision — padding, font, tap target, animation — must honor that physical reality.
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)
Thumb Zone: Primary actions in bottom 40% of screen. Destructive actions top. NO hamburger menus.
Touch Targets:
Safe Areas: Always use SafeAreaView. Bottom: 34pt for home indicator. Never place critical content in top 59pt (Dynamic Island zone).
| 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.
When GESTURE_DEPTH >= 5: use react-native-reanimated + react-native-gesture-handler. Never PanResponder.
Spring configuration:
// 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.
ImpactFeedbackStyle.LightNotificationFeedbackType.SuccessNotificationFeedbackType.ErrorImpactFeedbackStyle.MediumiOS: 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:
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).
expo-image or FastImage. Never plain <Image> in lists.FlashList with estimatedItemSize. FlatList only for < 50 items.useSharedValue + useAnimatedStyle (Reanimated 3). JS thread animations = BANNED.React.memo all list items. useCallback all handlers passed as props.